GlobalStyles hooks: do not smart merge presets in useGlobalSetting

WordPress · Jan 25, 2023 · 2fd03c2 · 2fd03c2
1 parent 14e8390
commit 2fd03c2
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 49 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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' );