From 046d404bef3a16b0bc8b253e5e7f12ee45ca3a4b Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 26 Jan 2023 08:04:37 +0100 Subject: [PATCH] GlobalStyles hooks: do not smart merge presets in useGlobalSetting (#47415) --- .../src/components/global-styles/README.md | 9 ++++---- .../src/components/global-styles/hooks.js | 20 ++++-------------- .../global-styles/dimensions-panel.js | 4 +++- .../global-styles/screen-background-color.js | 7 ++----- .../global-styles/screen-button-color.js | 7 ++----- .../global-styles/screen-heading-color.js | 10 +++------ .../global-styles/screen-link-color.js | 5 +---- .../global-styles/screen-text-color.js | 4 +--- .../global-styles/typography-panel.js | 21 ++++++++++++++++--- 9 files changed, 38 insertions(+), 49 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/README.md b/packages/block-editor/src/components/global-styles/README.md index dc4d52eaff4d0..86a803ee4111d 100644 --- a/packages/block-editor/src/components/global-styles/README.md +++ b/packages/block-editor/src/components/global-styles/README.md @@ -65,13 +65,12 @@ A react hook used to retrieve the setting applied to a given context. import { useGlobalSetting } from '@wordpress/block-editor'; function MyComponent() { - // The default color palette. - const [ colorPalette, setColorPalette ] = useGlobalSetting( 'color.palette' ); + // The theme color palette. + const [ colorPalette, setColorPalette ] = useGlobalSetting( 'color.palette.theme' ); - // The base (theme + core) color palette for the paragraph block, - // ignoring user provided palette. + // The theme color palette for the paragraph block, ignoring user changes. // If the palette is not defined for the paragraph block, the root one is returned. - const [ pColor, setPColor ] = useGlobalSetting( 'color.palette', 'core/paragraph', 'base' ); + const [ pColor, setPColor ] = useGlobalSetting( 'color.palette.theme', 'core/paragraph', 'base' ); return "Something"; } diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js index 776b83b71aa4d..9778cc4ee6420 100644 --- a/packages/block-editor/src/components/global-styles/hooks.js +++ b/packages/block-editor/src/components/global-styles/hooks.js @@ -8,7 +8,6 @@ import { get, set } from 'lodash'; * WordPress dependencies */ import { useContext, useCallback } from '@wordpress/element'; -import { __EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE } from '@wordpress/blocks'; /** * Internal dependencies @@ -46,10 +45,7 @@ export function useGlobalSetting( path, blockName, source = 'all' ) { setUserConfig( ( currentConfig ) => { // Deep clone `currentConfig` to avoid mutating it later. const newUserConfig = JSON.parse( JSON.stringify( currentConfig ) ); - const pathToSet = PATHS_WITH_MERGE[ path ] - ? fullPath + '.custom' - : fullPath; - set( newUserConfig, pathToSet, newValue ); + set( newUserConfig, fullPath, newValue ); return newUserConfig; } ); @@ -60,24 +56,16 @@ export function useGlobalSetting( path, blockName, source = 'all' ) { ? `settings.${ path }` : `settings.blocks.${ name }.${ path }`; - const getSettingValue = ( configToUse ) => { - const result = get( configToUse, currentPath ); - if ( PATHS_WITH_MERGE[ path ] ) { - return result?.custom ?? result?.theme ?? result?.default; - } - return result; - }; - let result; switch ( source ) { case 'all': - result = getSettingValue( mergedConfig ); + result = get( mergedConfig, currentPath ); break; case 'user': - result = getSettingValue( userConfig ); + result = get( userConfig, currentPath ); break; case 'base': - result = getSettingValue( baseConfig ); + result = get( baseConfig, currentPath ); break; default: throw 'Unsupported source'; diff --git a/packages/edit-site/src/components/global-styles/dimensions-panel.js b/packages/edit-site/src/components/global-styles/dimensions-panel.js index 772eb5f3e47f5..ed03c4c288a81 100644 --- a/packages/edit-site/src/components/global-styles/dimensions-panel.js +++ b/packages/edit-site/src/components/global-styles/dimensions-panel.js @@ -96,8 +96,10 @@ function useHasMinHeight( name ) { function useHasSpacingPresets() { const [ settings ] = useGlobalSetting( 'spacing.spacingSizes' ); + const { custom, theme, default: defaultPresets } = settings || {}; + const presets = custom ?? theme ?? defaultPresets ?? []; - return settings && settings.length > 0; + return settings && presets.length > 0; } function filterValuesBySides( values, sides ) { diff --git a/packages/edit-site/src/components/global-styles/screen-background-color.js b/packages/edit-site/src/components/global-styles/screen-background-color.js index 6ae0ece5e848e..3f64b7dc71b62 100644 --- a/packages/edit-site/src/components/global-styles/screen-background-color.js +++ b/packages/edit-site/src/components/global-styles/screen-background-color.js @@ -27,14 +27,11 @@ const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments ); function ScreenBackgroundColor( { name, variationPath = '' } ) { const supports = getSupportedGlobalStylesPanels( name ); - const [ solids ] = useGlobalSetting( 'color.palette', name ); - const [ gradients ] = useGlobalSetting( 'color.gradients', name ); const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name ); const [ areCustomGradientsEnabled ] = useGlobalSetting( 'color.customGradient', name ); - const colorsPerOrigin = useColorsPerOrigin( name ); const gradientsPerOrigin = useGradientsPerOrigin( name ); @@ -46,10 +43,10 @@ function ScreenBackgroundColor( { name, variationPath = '' } ) { const hasBackgroundColor = supports.includes( 'backgroundColor' ) && isBackgroundEnabled && - ( solids.length > 0 || areCustomSolidsEnabled ); + ( colorsPerOrigin.length > 0 || areCustomSolidsEnabled ); const hasGradientColor = supports.includes( 'background' ) && - ( gradients.length > 0 || areCustomGradientsEnabled ); + ( gradientsPerOrigin.length > 0 || areCustomGradientsEnabled ); const [ backgroundColor, setBackgroundColor ] = useGlobalStyle( variationPath + 'color.background', name diff --git a/packages/edit-site/src/components/global-styles/screen-button-color.js b/packages/edit-site/src/components/global-styles/screen-button-color.js index bc420ac79e425..cf2eaa98f3db6 100644 --- a/packages/edit-site/src/components/global-styles/screen-button-color.js +++ b/packages/edit-site/src/components/global-styles/screen-button-color.js @@ -18,11 +18,8 @@ const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments ); function ScreenButtonColor( { name, variationPath = '' } ) { const supports = getSupportedGlobalStylesPanels( name ); - const [ solids ] = useGlobalSetting( 'color.palette', name ); - const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name ); - const colorsPerOrigin = useColorsPerOrigin( name ); - + const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name ); const [ isBackgroundEnabled ] = useGlobalSetting( 'color.background', name @@ -31,7 +28,7 @@ function ScreenButtonColor( { name, variationPath = '' } ) { const hasButtonColor = supports.includes( 'buttonColor' ) && isBackgroundEnabled && - ( solids.length > 0 || areCustomSolidsEnabled ); + ( colorsPerOrigin.length > 0 || areCustomSolidsEnabled ); const [ buttonTextColor, setButtonTextColor ] = useGlobalStyle( variationPath + 'elements.button.color.text', diff --git a/packages/edit-site/src/components/global-styles/screen-heading-color.js b/packages/edit-site/src/components/global-styles/screen-heading-color.js index 18566051bb9bc..197ffc776a981 100644 --- a/packages/edit-site/src/components/global-styles/screen-heading-color.js +++ b/packages/edit-site/src/components/global-styles/screen-heading-color.js @@ -27,10 +27,7 @@ const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments ); function ScreenHeadingColor( { name, variationPath = '' } ) { const [ selectedLevel, setCurrentTab ] = useState( 'heading' ); - const supports = getSupportedGlobalStylesPanels( name ); - const [ solids ] = useGlobalSetting( 'color.palette', name ); - const [ gradients ] = useGlobalSetting( 'color.gradients', name ); const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name ); const [ areCustomGradientsEnabled ] = useGlobalSetting( 'color.customGradient', @@ -41,22 +38,21 @@ function ScreenHeadingColor( { name, variationPath = '' } ) { 'color.background', name ); - const colorsPerOrigin = useColorsPerOrigin( name ); const gradientsPerOrigin = useGradientsPerOrigin( name ); const hasTextColor = supports.includes( 'color' ) && isTextEnabled && - ( solids.length > 0 || areCustomSolidsEnabled ); + ( colorsPerOrigin.length > 0 || areCustomSolidsEnabled ); const hasBackgroundColor = supports.includes( 'backgroundColor' ) && isBackgroundEnabled && - ( solids.length > 0 || areCustomSolidsEnabled ); + ( colorsPerOrigin.length > 0 || areCustomSolidsEnabled ); const hasGradientColor = supports.includes( 'background' ) && - ( gradients.length > 0 || areCustomGradientsEnabled ); + ( gradientsPerOrigin.length > 0 || areCustomGradientsEnabled ); const [ color, setColor ] = useGlobalStyle( variationPath + 'elements.' + selectedLevel + '.color.text', diff --git a/packages/edit-site/src/components/global-styles/screen-link-color.js b/packages/edit-site/src/components/global-styles/screen-link-color.js index 049c2cc99d47a..f0277aef0eab1 100644 --- a/packages/edit-site/src/components/global-styles/screen-link-color.js +++ b/packages/edit-site/src/components/global-styles/screen-link-color.js @@ -19,17 +19,14 @@ const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments ); function ScreenLinkColor( { name, variationPath = '' } ) { const supports = getSupportedGlobalStylesPanels( name ); - const [ solids ] = useGlobalSetting( 'color.palette', name ); const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name ); - const colorsPerOrigin = useColorsPerOrigin( name ); - const [ isLinkEnabled ] = useGlobalSetting( 'color.link', name ); const hasLinkColor = supports.includes( 'linkColor' ) && isLinkEnabled && - ( solids.length > 0 || areCustomSolidsEnabled ); + ( colorsPerOrigin.length > 0 || areCustomSolidsEnabled ); const pseudoStates = { default: { diff --git a/packages/edit-site/src/components/global-styles/screen-text-color.js b/packages/edit-site/src/components/global-styles/screen-text-color.js index d61cea759fd8a..03f692dca1221 100644 --- a/packages/edit-site/src/components/global-styles/screen-text-color.js +++ b/packages/edit-site/src/components/global-styles/screen-text-color.js @@ -18,16 +18,14 @@ const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments ); function ScreenTextColor( { name, variationPath = '' } ) { const supports = getSupportedGlobalStylesPanels( name ); - const [ solids ] = useGlobalSetting( 'color.palette', name ); const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name ); const [ isTextEnabled ] = useGlobalSetting( 'color.text', name ); - const colorsPerOrigin = useColorsPerOrigin( name ); const hasTextColor = supports.includes( 'color' ) && isTextEnabled && - ( solids.length > 0 || areCustomSolidsEnabled ); + ( colorsPerOrigin.length > 0 || areCustomSolidsEnabled ); const [ color, setColor ] = useGlobalStyle( variationPath + 'color.text', diff --git a/packages/edit-site/src/components/global-styles/typography-panel.js b/packages/edit-site/src/components/global-styles/typography-panel.js index 938605ba11c4a..88f00eb3f389d 100644 --- a/packages/edit-site/src/components/global-styles/typography-panel.js +++ b/packages/edit-site/src/components/global-styles/typography-panel.js @@ -42,10 +42,14 @@ export function useHasTypographyPanel( name ) { function useHasFontFamilyControl( name ) { const supports = getSupportedGlobalStylesPanels( name ); - const [ fontFamilies ] = useGlobalSetting( + const [ fontFamiliesPerOrigin ] = useGlobalSetting( 'typography.fontFamilies', name ); + const fontFamilies = + fontFamiliesPerOrigin?.custom || + fontFamiliesPerOrigin?.theme || + fontFamiliesPerOrigin?.default; return supports.includes( 'fontFamily' ) && !! fontFamilies?.length; } @@ -191,16 +195,27 @@ export default function TypographyPanel( { } else if ( element && element !== 'text' ) { prefix = `elements.${ element }.`; } - const [ fontSizes ] = useGlobalSetting( 'typography.fontSizes', name ); + const [ fontSizesPerOrigin ] = useGlobalSetting( + 'typography.fontSizes', + name + ); + const fontSizes = + fontSizesPerOrigin?.custom || + fontSizesPerOrigin?.theme || + fontSizesPerOrigin?.default; const disableCustomFontSizes = ! useGlobalSetting( 'typography.customFontSize', name )[ 0 ]; - const [ fontFamilies ] = useGlobalSetting( + const [ fontFamiliesPerOrigin ] = useGlobalSetting( 'typography.fontFamilies', name ); + const fontFamilies = + fontFamiliesPerOrigin?.custom || + fontFamiliesPerOrigin?.theme || + fontFamiliesPerOrigin?.default; const hasFontStyles = useGlobalSetting( 'typography.fontStyle', name )[ 0 ] && supports.includes( 'fontStyle' );