@wordpress/edit-site 5.1.0 → 5.3.0

package/src/components/global-styles/dimensions-panel.js

@@ -18,15 +18,19 @@ import {
 } from '@wordpress/components';
 import {
 	__experimentalUseCustomSides as useCustomSides,
-	__experimentalHeightControl as HeightControl,
+	HeightControl,
 	__experimentalSpacingSizesControl as SpacingSizesControl,
+	experiments as blockEditorExperiments,
 } from '@wordpress/block-editor';
 import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
+import { getSupportedGlobalStylesPanels } from './hooks';
+import { unlock } from '../../experiments';
+
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
 
 const AXIAL_SIDES = [ 'horizontal', 'vertical' ];
 
@@ -50,50 +54,52 @@ export function useHasDimensionsPanel( name ) {
 
 function useHasContentSize( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
-	const [ settings ] = useSetting( 'layout.contentSize', name );
+	const [ settings ] = useGlobalSetting( 'layout.contentSize', name );
 
 	return settings && supports.includes( 'contentSize' );
 }
 
 function useHasWideSize( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
-	const [ settings ] = useSetting( 'layout.wideSize', name );
+	const [ settings ] = useGlobalSetting( 'layout.wideSize', name );
 
 	return settings && supports.includes( 'wideSize' );
 }
 
 function useHasPadding( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
-	const [ settings ] = useSetting( 'spacing.padding', name );
+	const [ settings ] = useGlobalSetting( 'spacing.padding', name );
 
 	return settings && supports.includes( 'padding' );
 }
 
 function useHasMargin( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
-	const [ settings ] = useSetting( 'spacing.margin', name );
+	const [ settings ] = useGlobalSetting( 'spacing.margin', name );
 
 	return settings && supports.includes( 'margin' );
 }
 
 function useHasGap( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
-	const [ settings ] = useSetting( 'spacing.blockGap', name );
+	const [ settings ] = useGlobalSetting( 'spacing.blockGap', name );
 
 	return settings && supports.includes( 'blockGap' );
 }
 
 function useHasMinHeight( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
-	const [ settings ] = useSetting( 'dimensions.minHeight', name );
+	const [ settings ] = useGlobalSetting( 'dimensions.minHeight', name );
 
 	return settings && supports.includes( 'minHeight' );
 }
 
 function useHasSpacingPresets() {
-	const [ settings ] = useSetting( 'spacing.spacingSizes' );
+	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 ) {
@@ -156,11 +162,11 @@ function splitGapValue( value ) {
 
 // Props for managing `layout.contentSize`.
 function useContentSizeProps( name ) {
-	const [ contentSizeValue, setContentSizeValue ] = useSetting(
+	const [ contentSizeValue, setContentSizeValue ] = useGlobalSetting(
 		'layout.contentSize',
 		name
 	);
-	const [ userSetContentSizeValue ] = useSetting(
+	const [ userSetContentSizeValue ] = useGlobalSetting(
 		'layout.contentSize',
 		name,
 		'user'
@@ -177,11 +183,11 @@ function useContentSizeProps( name ) {
 
 // Props for managing `layout.wideSize`.
 function useWideSizeProps( name ) {
-	const [ wideSizeValue, setWideSizeValue ] = useSetting(
+	const [ wideSizeValue, setWideSizeValue ] = useGlobalSetting(
 		'layout.wideSize',
 		name
 	);
-	const [ userSetWideSizeValue ] = useSetting(
+	const [ userSetWideSizeValue ] = useGlobalSetting(
 		'layout.wideSize',
 		name,
 		'user'
@@ -197,8 +203,12 @@ function useWideSizeProps( name ) {
 }
 
 // Props for managing `spacing.padding`.
-function usePaddingProps( name ) {
-	const [ rawPadding, setRawPadding ] = useStyle( 'spacing.padding', name );
+function usePaddingProps( name, variation = '' ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const [ rawPadding, setRawPadding ] = useGlobalStyle(
+		prefix + 'spacing.padding',
+		name
+	);
 	const paddingValues = splitStyleValue( rawPadding );
 	const paddingSides = useCustomSides( name, 'padding' );
 	const isAxialPadding =
@@ -210,7 +220,11 @@ function usePaddingProps( name ) {
 		setRawPadding( padding );
 	};
 	const resetPaddingValue = () => setPaddingValues( {} );
-	const [ userSetPaddingValue ] = useStyle( 'spacing.padding', name, 'user' );
+	const [ userSetPaddingValue ] = useGlobalStyle(
+		prefix + 'spacing.padding',
+		name,
+		'user'
+	);
 	// The `hasPaddingValue` check does not need a parsed value, as `userSetPaddingValue` will be `undefined` if not set.
 	const hasPaddingValue = () => !! userSetPaddingValue;
 
@@ -225,8 +239,12 @@ function usePaddingProps( name ) {
 }
 
 // Props for managing `spacing.margin`.
-function useMarginProps( name ) {
-	const [ rawMargin, setRawMargin ] = useStyle( 'spacing.margin', name );
+function useMarginProps( name, variation = '' ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const [ rawMargin, setRawMargin ] = useGlobalStyle(
+		prefix + 'spacing.margin',
+		name
+	);
 	const marginValues = splitStyleValue( rawMargin );
 	const marginSides = useCustomSides( name, 'margin' );
 	const isAxialMargin =
@@ -252,14 +270,22 @@ function useMarginProps( name ) {
 }
 
 // Props for managing `spacing.blockGap`.
-function useBlockGapProps( name ) {
-	const [ gapValue, setGapValue ] = useStyle( 'spacing.blockGap', name );
+function useBlockGapProps( name, variation = '' ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const [ gapValue, setGapValue ] = useGlobalStyle(
+		prefix + 'spacing.blockGap',
+		name
+	);
 	const gapValues = splitGapValue( gapValue );
 	const gapSides = useCustomSides( name, 'blockGap' );
 	const isAxialGap =
 		gapSides && gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const resetGapValue = () => setGapValue( undefined );
-	const [ userSetGapValue ] = useStyle( 'spacing.blockGap', name, 'user' );
+	const [ userSetGapValue ] = useGlobalStyle(
+		prefix + 'spacing.blockGap',
+		name,
+		'user'
+	);
 	const hasGapValue = () => !! userSetGapValue;
 	const setGapValues = ( nextBoxGapValue ) => {
 		if ( ! nextBoxGapValue ) {
@@ -288,9 +314,10 @@ function useBlockGapProps( name ) {
 }
 
 // Props for managing `dimensions.minHeight`.
-function useMinHeightProps( name ) {
-	const [ minHeightValue, setMinHeightValue ] = useStyle(
-		'dimensions.minHeight',
+function useMinHeightProps( name, variation = '' ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
+	const [ minHeightValue, setMinHeightValue ] = useGlobalStyle(
+		prefix + 'dimensions.minHeight',
 		name
 	);
 	const resetMinHeightValue = () => setMinHeightValue( undefined );
@@ -303,7 +330,7 @@ function useMinHeightProps( name ) {
 	};
 }
 
-export default function DimensionsPanel( { name } ) {
+export default function DimensionsPanel( { name, variation = '' } ) {
 	const showContentSizeControl = useHasContentSize( name );
 	const showWideSizeControl = useHasWideSize( name );
 	const showPaddingControl = useHasPadding( name );
@@ -312,7 +339,7 @@ export default function DimensionsPanel( { name } ) {
 	const showMinHeightControl = useHasMinHeight( name );
 	const showSpacingPresetsControl = useHasSpacingPresets();
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units', name )[ 0 ] || [
+		availableUnits: useGlobalSetting( 'spacing.units', name )[ 0 ] || [
 			'%',
 			'px',
 			'em',
@@ -345,7 +372,7 @@ export default function DimensionsPanel( { name } ) {
 		setPaddingValues,
 		resetPaddingValue,
 		hasPaddingValue,
-	} = usePaddingProps( name );
+	} = usePaddingProps( name, variation );
 
 	// Props for managing `spacing.margin`.
 	const {
@@ -355,7 +382,7 @@ export default function DimensionsPanel( { name } ) {
 		setMarginValues,
 		resetMarginValue,
 		hasMarginValue,
-	} = useMarginProps( name );
+	} = useMarginProps( name, variation );
 
 	// Props for managing `spacing.blockGap`.
 	const {
@@ -367,7 +394,7 @@ export default function DimensionsPanel( { name } ) {
 		setGapValues,
 		resetGapValue,
 		hasGapValue,
-	} = useBlockGapProps( name );
+	} = useBlockGapProps( name, variation );
 
 	// Props for managing `dimensions.minHeight`.
 	const {
@@ -375,7 +402,7 @@ export default function DimensionsPanel( { name } ) {
 		setMinHeightValue,
 		resetMinHeightValue,
 		hasMinHeightValue,
-	} = useMinHeightProps( name );
+	} = useMinHeightProps( name, variation );
 
 	const resetAll = () => {
 		resetPaddingValue();

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

@@ -9,11 +9,15 @@ import { mergeWith, isEmpty, mapValues } from 'lodash';
 import { useMemo, useCallback } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { GlobalStylesContext } from './context';
+import CanvasSpinner from '../canvas-spinner';
+import { unlock } from '../../experiments';
+
+const { GlobalStylesContext } = unlock( blockEditorExperiments );
 
 function mergeTreesCustomizer( _, srcValue ) {
 	// We only pass as arrays the presets,
@@ -165,7 +169,7 @@ function useGlobalStylesContext() {
 export function GlobalStylesProvider( { children } ) {
 	const context = useGlobalStylesContext();
 	if ( ! context.isReady ) {
-		return null;
+		return <CanvasSpinner />;
 	}
 
 	return (

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

@@ -8,48 +8,54 @@ import {
 	DuotonePicker,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { useSetting } from './hooks';
 import Subtitle from './subtitle';
+import { unlock } from '../../experiments';
+
+const { useGlobalSetting } = unlock( blockEditorExperiments );
 
 const noop = () => {};
 
 export default function GradientPalettePanel( { name } ) {
-	const [ themeGradients, setThemeGradients ] = useSetting(
+	const [ themeGradients, setThemeGradients ] = useGlobalSetting(
 		'color.gradients.theme',
 		name
 	);
-	const [ baseThemeGradients ] = useSetting(
+	const [ baseThemeGradients ] = useGlobalSetting(
 		'color.gradients.theme',
 		name,
 		'base'
 	);
-	const [ defaultGradients, setDefaultGradients ] = useSetting(
+	const [ defaultGradients, setDefaultGradients ] = useGlobalSetting(
 		'color.gradients.default',
 		name
 	);
-	const [ baseDefaultGradients ] = useSetting(
+	const [ baseDefaultGradients ] = useGlobalSetting(
 		'color.gradients.default',
 		name,
 		'base'
 	);
-	const [ customGradients, setCustomGradients ] = useSetting(
+	const [ customGradients, setCustomGradients ] = useGlobalSetting(
 		'color.gradients.custom',
 		name
 	);
 
-	const [ defaultPaletteEnabled ] = useSetting(
+	const [ defaultPaletteEnabled ] = useGlobalSetting(
 		'color.defaultGradients',
 		name
 	);
 
-	const [ customDuotone ] = useSetting( 'color.duotone.custom' ) || [];
-	const [ defaultDuotone ] = useSetting( 'color.duotone.default' ) || [];
-	const [ themeDuotone ] = useSetting( 'color.duotone.theme' ) || [];
-	const [ defaultDuotoneEnabled ] = useSetting( 'color.defaultDuotone' );
+	const [ customDuotone ] = useGlobalSetting( 'color.duotone.custom' ) || [];
+	const [ defaultDuotone ] =
+		useGlobalSetting( 'color.duotone.default' ) || [];
+	const [ themeDuotone ] = useGlobalSetting( 'color.duotone.theme' ) || [];
+	const [ defaultDuotoneEnabled ] = useGlobalSetting(
+		'color.defaultDuotone'
+	);
 
 	const duotonePalette = [
 		...( customDuotone || [] ),

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;