diff --git a/packages/block-editor/src/components/global-styles/border-panel.js b/packages/block-editor/src/components/global-styles/border-panel.js index 0dee6040c8705..960c19289157a 100644 --- a/packages/block-editor/src/components/global-styles/border-panel.js +++ b/packages/block-editor/src/components/global-styles/border-panel.js @@ -19,7 +19,7 @@ import { __ } from '@wordpress/i18n'; import BorderRadiusControl from '../border-radius-control'; import { useColorsPerOrigin } from './hooks'; import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils'; -import { mergeOrigins } from '../../store/get-block-settings'; +import { overrideOrigins } from '../../store/get-block-settings'; import { setImmutably } from '../../utils/object'; import { getBorderPanelLabel } from '../../hooks/border'; import { ShadowPopover } from './shadow-panel-components'; @@ -154,12 +154,12 @@ export default function BorderPanel( { // Shadow const shadow = decodeValue( inheritedValue?.shadow ); - const shadowPresets = settings?.shadow?.presets; - const mergedShadowPresets = shadowPresets - ? mergeOrigins( shadowPresets ) + const shadowPresets = settings?.shadow?.presets ?? {}; + const overriddenShadowPresets = shadowPresets + ? overrideOrigins( shadowPresets ) : []; const setShadow = ( newValue ) => { - const slug = mergedShadowPresets?.find( + const slug = overriddenShadowPresets?.find( ( { shadow: shadowName } ) => shadowName === newValue )?.slug; diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js index e689d84c83c98..6b09b146f9ea1 100644 --- a/packages/block-editor/src/components/global-styles/typography-panel.js +++ b/packages/block-editor/src/components/global-styles/typography-panel.js @@ -13,7 +13,11 @@ import { useCallback } from '@wordpress/element'; /** * Internal dependencies */ -import { mergeOrigins, hasMergedOrigins } from '../../store/get-block-settings'; +import { + mergeOrigins, + overrideOrigins, + hasOriginValue, +} from '../../store/get-block-settings'; import FontFamilyControl from '../font-family'; import FontAppearanceControl from '../font-appearance-control'; import LineHeightControl from '../line-height-control'; @@ -53,13 +57,13 @@ export function useHasTypographyPanel( settings ) { function useHasFontSizeControl( settings ) { return ( - hasMergedOrigins( settings?.typography?.fontSizes ) || + hasOriginValue( settings?.typography?.fontSizes ) || settings?.typography?.customFontSize ); } function useHasFontFamilyControl( settings ) { - return hasMergedOrigins( settings?.typography?.fontFamilies ); + return hasOriginValue( settings?.typography?.fontFamilies ); } function useHasLineHeightControl( settings ) { @@ -101,10 +105,10 @@ function useHasTextColumnsControl( settings ) { } function getUniqueFontSizesBySlug( settings ) { - const fontSizes = settings?.typography?.fontSizes; - const mergedFontSizes = fontSizes ? mergeOrigins( fontSizes ) : []; + const fontSizes = settings?.typography?.fontSizes ?? {}; + const overriddenFontSizes = fontSizes ? overrideOrigins( fontSizes ) : []; const uniqueSizes = []; - for ( const currentSize of mergedFontSizes ) { + for ( const currentSize of overriddenFontSizes ) { if ( ! uniqueSizes.some( ( { slug } ) => slug === currentSize.slug ) ) { uniqueSizes.push( currentSize ); } @@ -162,7 +166,7 @@ export default function TypographyPanel( { // Font Family const hasFontFamilyEnabled = useHasFontFamilyControl( settings ); - const fontFamilies = settings?.typography?.fontFamilies; + const fontFamilies = settings?.typography?.fontFamilies ?? {}; const mergedFontFamilies = fontFamilies ? mergeOrigins( fontFamilies ) : []; const fontFamily = decodeValue( inheritedValue?.typography?.fontFamily ); const setFontFamily = ( newValue ) => { diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js index 2f7a8f3a81f19..fbe84514c3e53 100644 --- a/packages/block-editor/src/hooks/utils.js +++ b/packages/block-editor/src/hooks/utils.js @@ -176,8 +176,12 @@ export function useBlockSettings( name, parentLayout ) { const [ backgroundImage, backgroundSize, - fontFamilies, - fontSizes, + customFontFamilies, + defaultFontFamilies, + themeFontFamilies, + customFontSizes, + defaultFontSizes, + themeFontSizes, customFontSize, fontStyle, fontWeight, @@ -223,8 +227,12 @@ export function useBlockSettings( name, parentLayout ) { ] = useSettings( 'background.backgroundImage', 'background.backgroundSize', - 'typography.fontFamilies', - 'typography.fontSizes', + 'typography.fontFamilies.custom', + 'typography.fontFamilies.default', + 'typography.fontFamilies.theme', + 'typography.fontSizes.custom', + 'typography.fontSizes.default', + 'typography.fontSizes.theme', 'typography.customFontSize', 'typography.fontStyle', 'typography.fontWeight', @@ -305,10 +313,14 @@ export function useBlockSettings( name, parentLayout ) { }, typography: { fontFamilies: { - custom: fontFamilies, + custom: customFontFamilies, + default: defaultFontFamilies, + theme: themeFontFamilies, }, fontSizes: { - custom: fontSizes, + custom: customFontSizes, + default: defaultFontSizes, + theme: themeFontSizes, }, customFontSize, fontStyle, @@ -346,8 +358,12 @@ export function useBlockSettings( name, parentLayout ) { }, [ backgroundImage, backgroundSize, - fontFamilies, - fontSizes, + customFontFamilies, + defaultFontFamilies, + themeFontFamilies, + customFontSizes, + defaultFontSizes, + themeFontSizes, customFontSize, fontStyle, fontWeight, diff --git a/packages/block-editor/src/store/get-block-settings.js b/packages/block-editor/src/store/get-block-settings.js index 598754a349718..1bffebf931e81 100644 --- a/packages/block-editor/src/store/get-block-settings.js +++ b/packages/block-editor/src/store/get-block-settings.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { - __EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE, + __EXPERIMENTAL_PATHS_WITH_OVERRIDE as PATHS_WITH_OVERRIDE, hasBlockSupport, } from '@wordpress/blocks'; import { applyFilters } from '@wordpress/hooks'; @@ -111,6 +111,17 @@ export function mergeOrigins( value ) { } const mergeCache = new WeakMap(); +/** + * For settings like `color.palette`, which have a value that is an object + * with `default`, `theme`, `custom`, with field values that are arrays of + * items, returns the one with the highest priority among these three arrays. + * @param {Object} value Object to extract from + * @return {Array} Array of items extracted from the three origins + */ +export function overrideOrigins( value ) { + return value.custom ?? value.theme ?? value.default; +} + /** * For settings like `color.palette`, which have a value that is an object * with `default`, `theme`, `custom`, with field values that are arrays of @@ -119,7 +130,7 @@ const mergeCache = new WeakMap(); * @param {Object} value Object to check * @return {boolean} Whether the object has values in any of the three origins */ -export function hasMergedOrigins( value ) { +export function hasOriginValue( value ) { return [ 'default', 'theme', 'custom' ].some( ( key ) => value?.[ key ]?.length ); @@ -203,8 +214,8 @@ export function getBlockSettings( state, clientId, ...paths ) { // Return if the setting was found in either the block instance or the store. if ( result !== undefined ) { - if ( PATHS_WITH_MERGE[ normalizedPath ] ) { - return mergeOrigins( result ); + if ( PATHS_WITH_OVERRIDE[ normalizedPath ] ) { + return overrideOrigins( result ); } return result; } diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index 8af2d0940c8fc..99de83353166c 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -271,11 +271,13 @@ export const __EXPERIMENTAL_ELEMENTS = { cite: 'cite', }; -export const __EXPERIMENTAL_PATHS_WITH_MERGE = { +// These paths may have three origins, custom, theme, and default, +// and are expected to override other origins with custom, theme, +// and default priority. +export const __EXPERIMENTAL_PATHS_WITH_OVERRIDE = { 'color.duotone': true, 'color.gradients': true, 'color.palette': true, - 'typography.fontFamilies': true, 'typography.fontSizes': true, 'spacing.spacingSizes': true, }; diff --git a/packages/blocks/src/api/index.js b/packages/blocks/src/api/index.js index 2ddeb3a60f0ab..aa72979818c9c 100644 --- a/packages/blocks/src/api/index.js +++ b/packages/blocks/src/api/index.js @@ -162,5 +162,5 @@ export { default as node } from './node'; export { __EXPERIMENTAL_STYLE_PROPERTY, __EXPERIMENTAL_ELEMENTS, - __EXPERIMENTAL_PATHS_WITH_MERGE, + __EXPERIMENTAL_PATHS_WITH_OVERRIDE, } from './constants';