@wordpress/edit-site 5.2.0 → 5.3.0

package/src/components/global-styles/hooks.js

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import fastDeepEqual from 'fast-deep-equal/es6';
-import { get, set } from 'lodash';
+import { get } from 'lodash';
 import { colord, extend } from 'colord';
 import a11yPlugin from 'colord/plugins/a11y';
 
@@ -10,162 +9,23 @@ import a11yPlugin from 'colord/plugins/a11y';
  * WordPress dependencies
  */
 import { _x } from '@wordpress/i18n';
-import { useContext, useCallback, useMemo } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import {
 	getBlockType,
-	__EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE,
 	__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,
 } from '@wordpress/blocks';
+import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { getValueFromVariable, getPresetVariableFromValue } from './utils';
-import { GlobalStylesContext } from './context';
+import { unlock } from '../../experiments';
+
+const { useGlobalSetting } = unlock( blockEditorExperiments );
 
 // Enable colord's a11y plugin.
 extend( [ a11yPlugin ] );
 
-const EMPTY_CONFIG = { settings: {}, styles: {} };
-
-export const useGlobalStylesReset = () => {
-	const { user: config, setUserConfig } = useContext( GlobalStylesContext );
-	const canReset = !! config && ! fastDeepEqual( config, EMPTY_CONFIG );
-	return [
-		canReset,
-		useCallback(
-			() => setUserConfig( () => EMPTY_CONFIG ),
-			[ setUserConfig ]
-		),
-	];
-};
-
-export function useSetting( path, blockName, source = 'all' ) {
-	const {
-		merged: mergedConfig,
-		base: baseConfig,
-		user: userConfig,
-		setUserConfig,
-	} = useContext( GlobalStylesContext );
-
-	const fullPath = ! blockName
-		? `settings.${ path }`
-		: `settings.blocks.${ blockName }.${ path }`;
-
-	const setSetting = ( newValue ) => {
-		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 );
-
-			return newUserConfig;
-		} );
-	};
-
-	const getSettingValueForContext = ( name ) => {
-		const currentPath = ! name
-			? `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 );
-				break;
-			case 'user':
-				result = getSettingValue( userConfig );
-				break;
-			case 'base':
-				result = getSettingValue( baseConfig );
-				break;
-			default:
-				throw 'Unsupported source';
-		}
-
-		return result;
-	};
-
-	// Unlike styles settings get inherited from top level settings.
-	const resultWithFallback =
-		getSettingValueForContext( blockName ) ?? getSettingValueForContext();
-
-	return [ resultWithFallback, setSetting ];
-}
-
-export function useStyle( path, blockName, source = 'all' ) {
-	const {
-		merged: mergedConfig,
-		base: baseConfig,
-		user: userConfig,
-		setUserConfig,
-	} = useContext( GlobalStylesContext );
-	const finalPath = ! blockName
-		? `styles.${ path }`
-		: `styles.blocks.${ blockName }.${ path }`;
-
-	const setStyle = ( newValue ) => {
-		setUserConfig( ( currentConfig ) => {
-			// Deep clone `currentConfig` to avoid mutating it later.
-			const newUserConfig = JSON.parse( JSON.stringify( currentConfig ) );
-			set(
-				newUserConfig,
-				finalPath,
-				getPresetVariableFromValue(
-					mergedConfig.settings,
-					blockName,
-					path,
-					newValue
-				)
-			);
-			return newUserConfig;
-		} );
-	};
-
-	let result;
-	switch ( source ) {
-		case 'all':
-			result = getValueFromVariable(
-				mergedConfig,
-				blockName,
-				// The stlyes.css path is allowed to be empty, so don't revert to base if undefined.
-				finalPath === 'styles.css'
-					? get( userConfig, finalPath )
-					: get( userConfig, finalPath ) ??
-							get( baseConfig, finalPath )
-			);
-			break;
-		case 'user':
-			result = getValueFromVariable(
-				mergedConfig,
-				blockName,
-				get( userConfig, finalPath )
-			);
-			break;
-		case 'base':
-			result = getValueFromVariable(
-				baseConfig,
-				blockName,
-				get( baseConfig, finalPath )
-			);
-			break;
-		default:
-			throw 'Unsupported source';
-	}
-
-	return [ result, setStyle ];
-}
-
 const ROOT_BLOCK_SUPPORTS = [
 	'background',
 	'backgroundColor',
@@ -211,6 +71,11 @@ export function getSupportedGlobalStylesPanels( name ) {
 		supportKeys.push( 'blockGap' );
 	}
 
+	// check for shadow support
+	if ( blockType?.supports?.shadow ) {
+		supportKeys.push( 'shadow' );
+	}
+
 	Object.keys( STYLE_PROPERTY ).forEach( ( styleName ) => {
 		if ( ! STYLE_PROPERTY[ styleName ].support ) {
 			return;
@@ -247,10 +112,12 @@ export function getSupportedGlobalStylesPanels( name ) {
 }
 
 export function useColorsPerOrigin( name ) {
-	const [ customColors ] = useSetting( 'color.palette.custom', name );
-	const [ themeColors ] = useSetting( 'color.palette.theme', name );
-	const [ defaultColors ] = useSetting( 'color.palette.default', name );
-	const [ shouldDisplayDefaultColors ] = useSetting( 'color.defaultPalette' );
+	const [ customColors ] = useGlobalSetting( 'color.palette.custom', name );
+	const [ themeColors ] = useGlobalSetting( 'color.palette.theme', name );
+	const [ defaultColors ] = useGlobalSetting( 'color.palette.default', name );
+	const [ shouldDisplayDefaultColors ] = useGlobalSetting(
+		'color.defaultPalette'
+	);
 
 	return useMemo( () => {
 		const result = [];
@@ -290,10 +157,19 @@ export function useColorsPerOrigin( name ) {
 }
 
 export function useGradientsPerOrigin( name ) {
-	const [ customGradients ] = useSetting( 'color.gradients.custom', name );
-	const [ themeGradients ] = useSetting( 'color.gradients.theme', name );
-	const [ defaultGradients ] = useSetting( 'color.gradients.default', name );
-	const [ shouldDisplayDefaultGradients ] = useSetting(
+	const [ customGradients ] = useGlobalSetting(
+		'color.gradients.custom',
+		name
+	);
+	const [ themeGradients ] = useGlobalSetting(
+		'color.gradients.theme',
+		name
+	);
+	const [ defaultGradients ] = useGlobalSetting(
+		'color.gradients.default',
+		name
+	);
+	const [ shouldDisplayDefaultGradients ] = useGlobalSetting(
 		'color.defaultGradients'
 	);
 
@@ -335,7 +211,7 @@ export function useGradientsPerOrigin( name ) {
 }
 
 export function useColorRandomizer( name ) {
-	const [ themeColors, setThemeColors ] = useSetting(
+	const [ themeColors, setThemeColors ] = useGlobalSetting(
 		'color.palette.theme',
 		name
 	);

package/src/components/global-styles/index.js

@@ -1,3 +1 @@
 export { default as GlobalStylesUI } from './ui';
-export { useGlobalStylesReset, useStyle, useSetting } from './hooks';
-export { useGlobalStylesOutput } from './use-global-styles-output';

package/src/components/global-styles/palette.js

@@ -13,23 +13,27 @@ import {
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { shuffle } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
+import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import Subtitle from './subtitle';
 import { NavigationButtonAsItem } from './navigation-button';
-import { useColorRandomizer, useSetting } from './hooks';
+import { useColorRandomizer } from './hooks';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
+import { unlock } from '../../experiments';
+
+const { useGlobalSetting } = unlock( blockEditorExperiments );
 
 const EMPTY_COLORS = [];
 
 function Palette( { name } ) {
-	const [ customColors ] = useSetting( 'color.palette.custom' );
-	const [ themeColors ] = useSetting( 'color.palette.theme' );
-	const [ defaultColors ] = useSetting( 'color.palette.default' );
+	const [ customColors ] = useGlobalSetting( 'color.palette.custom' );
+	const [ themeColors ] = useGlobalSetting( 'color.palette.theme' );
+	const [ defaultColors ] = useGlobalSetting( 'color.palette.default' );
 
-	const [ defaultPaletteEnabled ] = useSetting(
+	const [ defaultPaletteEnabled ] = useGlobalSetting(
 		'color.defaultPalette',
 		name
 	);

package/src/components/global-styles/preview.js

@@ -4,6 +4,7 @@
 import {
 	__unstableIframe as Iframe,
 	__unstableEditorStyles as EditorStyles,
+	experiments as blockEditorExperiments,
 } from '@wordpress/block-editor';
 import {
 	__unstableMotion as motion,
@@ -16,8 +17,11 @@ import { useState, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useSetting, useStyle } from './hooks';
-import { useGlobalStylesOutput } from './use-global-styles-output';
+import { unlock } from '../../experiments';
+
+const { useGlobalSetting, useGlobalStyle, useGlobalStylesOutput } = unlock(
+	blockEditorExperiments
+);
 
 const firstFrame = {
 	start: {
@@ -56,23 +60,25 @@ const normalizedHeight = 152;
 const normalizedColorSwatchSize = 32;
 
 const StylesPreview = ( { label, isFocused, withHoverView } ) => {
-	const [ fontWeight ] = useStyle( 'typography.fontWeight' );
-	const [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' );
-	const [ headingFontFamily = fontFamily ] = useStyle(
+	const [ fontWeight ] = useGlobalStyle( 'typography.fontWeight' );
+	const [ fontFamily = 'serif' ] = useGlobalStyle( 'typography.fontFamily' );
+	const [ headingFontFamily = fontFamily ] = useGlobalStyle(
 		'elements.h1.typography.fontFamily'
 	);
-	const [ headingFontWeight = fontWeight ] = useStyle(
+	const [ headingFontWeight = fontWeight ] = useGlobalStyle(
 		'elements.h1.typography.fontWeight'
 	);
-	const [ textColor = 'black' ] = useStyle( 'color.text' );
-	const [ headingColor = textColor ] = useStyle( 'elements.h1.color.text' );
-	const [ backgroundColor = 'white' ] = useStyle( 'color.background' );
-	const [ gradientValue ] = useStyle( 'color.gradient' );
+	const [ textColor = 'black' ] = useGlobalStyle( 'color.text' );
+	const [ headingColor = textColor ] = useGlobalStyle(
+		'elements.h1.color.text'
+	);
+	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
+	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
 	const [ styles ] = useGlobalStylesOutput();
 	const disableMotion = useReducedMotion();
-	const [ coreColors ] = useSetting( 'color.palette.core' );
-	const [ themeColors ] = useSetting( 'color.palette.theme' );
-	const [ customColors ] = useSetting( 'color.palette.custom' );
+	const [ coreColors ] = useGlobalSetting( 'color.palette.core' );
+	const [ themeColors ] = useGlobalSetting( 'color.palette.theme' );
+	const [ customColors ] = useGlobalSetting( 'color.palette.custom' );
 	const [ isHovered, setIsHovered ] = useState( false );
 	const [ containerResizeListener, { width } ] = useResizeObserver();
 	const ratio = width ? width / normalizedWidth : 1;

package/src/components/global-styles/screen-background-color.js

@@ -1,8 +1,16 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
+import {
+	__experimentalColorGradientControl as ColorGradientControl,
+	experiments as blockEditorExperiments,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -12,47 +20,49 @@ import {
 	getSupportedGlobalStylesPanels,
 	useColorsPerOrigin,
 	useGradientsPerOrigin,
-	useSetting,
-	useStyle,
 } from './hooks';
+import { unlock } from '../../experiments';
+
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
 
-function ScreenBackgroundColor( { name, variationPath = '' } ) {
+function ScreenBackgroundColor( { name, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
 	const supports = getSupportedGlobalStylesPanels( name );
-	const [ solids ] = useSetting( 'color.palette', name );
-	const [ gradients ] = useSetting( 'color.gradients', name );
-	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
-	const [ areCustomGradientsEnabled ] = useSetting(
+	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
+	const [ areCustomGradientsEnabled ] = useGlobalSetting(
 		'color.customGradient',
 		name
 	);
-
 	const colorsPerOrigin = useColorsPerOrigin( name );
 	const gradientsPerOrigin = useGradientsPerOrigin( name );
 
-	const [ isBackgroundEnabled ] = useSetting( 'color.background', name );
+	const [ isBackgroundEnabled ] = useGlobalSetting(
+		'color.background',
+		name
+	);
 
 	const hasBackgroundColor =
 		supports.includes( 'backgroundColor' ) &&
 		isBackgroundEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
+		( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
 	const hasGradientColor =
 		supports.includes( 'background' ) &&
-		( gradients.length > 0 || areCustomGradientsEnabled );
-	const [ backgroundColor, setBackgroundColor ] = useStyle(
-		variationPath + 'color.background',
+		( gradientsPerOrigin.length > 0 || areCustomGradientsEnabled );
+	const [ backgroundColor, setBackgroundColor ] = useGlobalStyle(
+		prefix + 'color.background',
 		name
 	);
-	const [ userBackgroundColor ] = useStyle(
-		variationPath + 'color.background',
+	const [ userBackgroundColor ] = useGlobalStyle(
+		prefix + 'color.background',
 		name,
 		'user'
 	);
-	const [ gradient, setGradient ] = useStyle(
-		variationPath + 'color.gradient',
+	const [ gradient, setGradient ] = useGlobalStyle(
+		prefix + 'color.gradient',
 		name
 	);
-	const [ userGradient ] = useStyle(
-		variationPath + 'color.gradient',
+	const [ userGradient ] = useGlobalStyle(
+		prefix + 'color.gradient',
 		name,
 		'user'
 	);
@@ -98,7 +108,13 @@ function ScreenBackgroundColor( { name, variationPath = '' } ) {
 				) }
 			/>
 			<ColorGradientControl
-				className="edit-site-screen-background-color__control"
+				className={ classnames(
+					'edit-site-screen-background-color__control',
+					{
+						'has-no-tabs':
+							! hasBackgroundColor || ! hasGradientColor,
+					}
+				) }
 				colors={ colorsPerOrigin }
 				gradients={ gradientsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }

package/src/components/global-styles/screen-border.js

@@ -9,17 +9,22 @@ import { __ } from '@wordpress/i18n';
 import ScreenHeader from './header';
 import BorderPanel, { useHasBorderPanel } from './border-panel';
 import BlockPreviewPanel from './block-preview-panel';
-import { getVariationClassNameFromPath } from './utils';
+import { getVariationClassName } from './utils';
+import ShadowPanel, { useHasShadowControl } from './shadow-panel';
 
-function ScreenBorder( { name, variationPath = '' } ) {
+function ScreenBorder( { name, variation = '' } ) {
 	const hasBorderPanel = useHasBorderPanel( name );
-	const variationClassName = getVariationClassNameFromPath( variationPath );
+	const variationClassName = getVariationClassName( variation );
+	const hasShadowPanel = useHasShadowControl( name );
 	return (
 		<>
-			<ScreenHeader title={ __( 'Border' ) } />
+			<ScreenHeader title={ __( 'Border & Shadow' ) } />
 			<BlockPreviewPanel name={ name } variation={ variationClassName } />
 			{ hasBorderPanel && (
-				<BorderPanel name={ name } variationPath={ variationPath } />
+				<BorderPanel name={ name } variation={ variation } />
+			) }
+			{ hasShadowPanel && (
+				<ShadowPanel name={ name } variation={ variation } />
 			) }
 		</>
 	);

package/src/components/global-styles/screen-button-color.js

@@ -2,48 +2,50 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
+import {
+	__experimentalColorGradientControl as ColorGradientControl,
+	experiments as blockEditorExperiments,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import ScreenHeader from './header';
-import {
-	getSupportedGlobalStylesPanels,
-	useSetting,
-	useStyle,
-	useColorsPerOrigin,
-} from './hooks';
+import { getSupportedGlobalStylesPanels, useColorsPerOrigin } from './hooks';
+import { unlock } from '../../experiments';
 
-function ScreenButtonColor( { name, variationPath = '' } ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const [ solids ] = useSetting( 'color.palette', name );
-	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
 
+function ScreenButtonColor( { name, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const supports = getSupportedGlobalStylesPanels( name );
 	const colorsPerOrigin = useColorsPerOrigin( name );
-
-	const [ isBackgroundEnabled ] = useSetting( 'color.background', name );
+	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
+	const [ isBackgroundEnabled ] = useGlobalSetting(
+		'color.background',
+		name
+	);
 
 	const hasButtonColor =
 		supports.includes( 'buttonColor' ) &&
 		isBackgroundEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
+		( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
 
-	const [ buttonTextColor, setButtonTextColor ] = useStyle(
-		variationPath + 'elements.button.color.text',
+	const [ buttonTextColor, setButtonTextColor ] = useGlobalStyle(
+		prefix + 'elements.button.color.text',
 		name
 	);
-	const [ userButtonTextColor ] = useStyle(
+	const [ userButtonTextColor ] = useGlobalStyle(
 		'elements.button.color.text',
 		name,
 		'user'
 	);
 
-	const [ buttonBgColor, setButtonBgColor ] = useStyle(
+	const [ buttonBgColor, setButtonBgColor ] = useGlobalStyle(
 		'elements.button.color.background',
 		name
 	);
-	const [ userButtonBgColor ] = useStyle(
+	const [ userButtonBgColor ] = useGlobalStyle(
 		'elements.button.color.background',
 		name,
 		'user'