Feedback applied

lib/global-styles.php

@@ -111,7 +111,9 @@ function_exists( 'gutenberg_is_edit_site_page' ) &&
 	}
 	$consolidated = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( $settings, $origin );
 
-	$settings['__experimentalStyles'] = $consolidated->get_raw_data()['styles'];
+	if ( 'site-editor' !== $context ) {
+		$settings['__experimentalStyles'] = $consolidated->get_raw_data()['styles'];
+	}
 
 	if ( 'site-editor' === $context ) {
 		$theme       = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( $settings, 'theme' );

packages/block-editor/src/components/use-style/index.js

@@ -7,13 +7,14 @@ import { get } from 'lodash';
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { useBlockEditContext } from '../block-edit';
 import { store as blockEditorStore } from '../../store';
-import { getResolvedStyleVariable } from '../../utils/style-variable-resolution';
+import { getValueFromVariable } from '../../utils/style-variable-resolution';
 
 /**
  * Hook that retrieves the global styles of a block.
@@ -31,22 +32,20 @@ import { getResolvedStyleVariable } from '../../utils/style-variable-resolution'
 export default function useStyle( path ) {
 	const { name: blockName } = useBlockEditContext();
 
-	const setting = useSelect(
-		( select ) => {
-			const settings = select( blockEditorStore ).getSettings();
-			const settingsForBlock = get( settings, [
-				'__experimentalStyles',
-				'blocks',
-				blockName,
-			] );
-			return getResolvedStyleVariable(
-				settings.__experimentalFeatures,
-				blockName,
-				get( settingsForBlock, path )
-			);
-		},
-		[ blockName, path ]
-	);
-
-	return setting;
+	const settings = useSelect( ( select ) => {
+		return select( blockEditorStore ).getSettings();
+	}, [] );
+	const settingsForBlock = get( settings, [
+		'__experimentalStyles',
+		'blocks',
+		blockName,
+	] );
+	const value = get( settingsForBlock, path );
+	return useMemo( () => {
+		return getValueFromVariable(
+			settings.__experimentalFeatures,
+			blockName,
+			value
+		);
+	}, [ settings.__experimentalFeatures, blockName, value ] );
 }

packages/block-editor/src/utils/index.js

@@ -2,6 +2,6 @@ export { default as transformStyles } from './transform-styles';
 export * from './theme';
 export * from './block-variation-transforms';
 export {
-	getResolvedStyleVariable as __experimentalGetResolvedStyleVariable,
-	getPresetVariableRepresentingAValue as __experimentalGetPresetVariableRepresentingAValue,
+	getValueFromVariable as __experimentalGetValueFromVariable,
+	getPresetVariableFromValue as __experimentalGetPresetVariableFromValue,
 } from './style-variable-resolution';

packages/block-editor/src/utils/style-variable-resolution.js

@@ -16,14 +16,14 @@ const STYLE_PROPERTIES_TO_CSS_VAR_INFIX = {
 
 function findInPresetsBy(
 	features,
-	context,
+	blockName,
 	presetPath,
 	presetProperty,
 	presetValueValue
 ) {
 	// Block presets take priority above root level presets.
 	const orderedPresetsByOrigin = [
-		get( features, [ 'blocks', context, ...presetPath ] ),
+		get( features, [ 'blocks', blockName, ...presetPath ] ),
 		get( features, presetPath ),
 	];
 	for ( const presetByOrigin of orderedPresetsByOrigin ) {
@@ -45,7 +45,7 @@ function findInPresetsBy(
 						// if there is a highest priority preset with the same slug but different value the preset we found was overwritten and should be ignored.
 						const highestPresetObjectWithSameSlug = findInPresetsBy(
 							features,
-							context,
+							blockName,
 							presetPath,
 							'slug',
 							presetObject.slug
@@ -87,7 +87,7 @@ function getValueFromPresetVariable(
 	if ( presetObject ) {
 		const { valueKey } = metadata;
 		const result = presetObject[ valueKey ];
-		return getResolvedStyleVariable( features, blockName, result );
+		return getValueFromVariable( features, blockName, result );
 	}
 
 	return variable;
@@ -101,29 +101,27 @@ function getValueFromCustomVariable( features, blockName, variable, path ) {
 		return variable;
 	}
 	// A variable may reference another variable so we need recursion until we find the value.
-	return getResolvedStyleVariable( features, blockName, result );
+	return getValueFromVariable( features, blockName, result );
 }
 
-export function getResolvedStyleVariable( features, context, variable ) {
+export function getValueFromVariable( features, blockName, variable ) {
 	if ( ! variable || ! isString( variable ) ) {
 		return variable;
 	}
-	const INTERNAL_REFERENCE_PREFIX = 'var:';
-	const CSS_REFERENCE_PREFIX = 'var(--wp--';
-	const CSS_REFERENCE_SUFFIX = ')';
+	const USER_VALUE_PREFIX = 'var:';
+	const THEME_VALUE_PREFIX = 'var(--wp--';
+	const THEME_VALUE_SUFFIX = ')';
 
 	let parsedVar;
 
-	if ( variable.startsWith( INTERNAL_REFERENCE_PREFIX ) ) {
-		parsedVar = variable
-			.slice( INTERNAL_REFERENCE_PREFIX.length )
-			.split( '|' );
+	if ( variable.startsWith( USER_VALUE_PREFIX ) ) {
+		parsedVar = variable.slice( USER_VALUE_PREFIX.length ).split( '|' );
 	} else if (
-		variable.startsWith( CSS_REFERENCE_PREFIX ) &&
-		variable.endsWith( CSS_REFERENCE_SUFFIX )
+		variable.startsWith( THEME_VALUE_PREFIX ) &&
+		variable.endsWith( THEME_VALUE_SUFFIX )
 	) {
 		parsedVar = variable
-			.slice( CSS_REFERENCE_PREFIX.length, -CSS_REFERENCE_SUFFIX.length )
+			.slice( THEME_VALUE_PREFIX.length, -THEME_VALUE_SUFFIX.length )
 			.split( '--' );
 	} else {
 		// We don't know how to parse the value: either is raw of uses complex CSS such as `calc(1px * var(--wp--variable) )`
@@ -132,48 +130,58 @@ export function getResolvedStyleVariable( features, context, variable ) {
 
 	const [ type, ...path ] = parsedVar;
 	if ( type === 'preset' ) {
-		return getValueFromPresetVariable( features, context, variable, path );
+		return getValueFromPresetVariable(
+			features,
+			blockName,
+			variable,
+			path
+		);
 	}
 	if ( type === 'custom' ) {
-		return getValueFromCustomVariable( features, context, variable, path );
+		return getValueFromCustomVariable(
+			features,
+			blockName,
+			variable,
+			path
+		);
 	}
 	return variable;
 }
 
-export function getPresetVariableRepresentingAValue(
+export function getPresetVariableFromValue(
 	features,
-	context,
-	propertyName,
-	value
+	blockName,
+	presetPropertyName,
+	presetPropertyValue
 ) {
-	if ( ! value ) {
-		return value;
+	if ( ! presetPropertyValue ) {
+		return presetPropertyValue;
 	}
 
 	const cssVarInfix =
-		STYLE_PROPERTIES_TO_CSS_VAR_INFIX[ propertyName ] ||
-		kebabCase( propertyName );
+		STYLE_PROPERTIES_TO_CSS_VAR_INFIX[ presetPropertyName ] ||
+		kebabCase( presetPropertyName );
 
 	const metadata = find( PRESET_METADATA, [ 'cssVarInfix', cssVarInfix ] );
 	if ( ! metadata ) {
 		// The property doesn't have preset data
 		// so the value should be returned as it is.
-		return value;
+		return presetPropertyValue;
 	}
 	const { valueKey, path } = metadata;
 
 	const presetObject = findInPresetsBy(
 		features,
-		context,
+		blockName,
 		path,
 		valueKey,
-		value
+		presetPropertyValue
 	);
 
 	if ( ! presetObject ) {
 		// Value wasn't found in the presets,
 		// so it must be a custom value.
-		return value;
+		return presetPropertyValue;
 	}
 
 	return `var:preset|${ cssVarInfix }|${ presetObject.slug }`;

packages/edit-site/src/components/editor/global-styles-provider.js

@@ -22,8 +22,8 @@ import {
 import { useEntityProp } from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
-	__experimentalGetResolvedStyleVariable as getResolvedStyleVariable,
-	__experimentalGetPresetVariableRepresentingAValue as getPresetVariableRepresentingAValue,
+	__experimentalGetValueFromVariable as getValueFromVariable,
+	__experimentalGetPresetVariableFromValue as getPresetVariableFromValue,
 } from '@wordpress/block-editor';
 
 /**
@@ -258,7 +258,7 @@ export default function GlobalStylesProvider( { children, baseStyles } ) {
 
 				if ( origin === 'theme' ) {
 					const value = get( themeStyles?.styles, path );
-					return getResolvedStyleVariable(
+					return getValueFromVariable(
 						themeStyles.settings,
 						context,
 						value
@@ -271,15 +271,15 @@ export default function GlobalStylesProvider( { children, baseStyles } ) {
 					// We still need to use merged styles here because the
 					// presets used to resolve user variable may be defined a
 					// layer down ( core, theme, or user ).
-					return getResolvedStyleVariable(
+					return getValueFromVariable(
 						mergedStyles.settings,
 						context,
 						value
 					);
 				}
 
 				const value = get( mergedStyles?.styles, path );
-				return getResolvedStyleVariable(
+				return getValueFromVariable(
 					mergedStyles.settings,
 					context,
 					value
@@ -302,7 +302,7 @@ export default function GlobalStylesProvider( { children, baseStyles } ) {
 				set(
 					newStyles,
 					propertyPath,
-					getPresetVariableRepresentingAValue(
+					getPresetVariableFromValue(
 						mergedStyles.settings,
 						context,
 						propertyName,
@@ -337,6 +337,7 @@ export default function GlobalStylesProvider( { children, baseStyles } ) {
 				},
 			],
 			__experimentalFeatures: mergedStyles.settings,
+			__experimentalStyles: mergedStyles.styles,
 		} );
 	}, [ blocks, mergedStyles ] );
 

packages/edit-site/src/components/editor/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get  } from 'lodash';
+import { get } from 'lodash';
 /**
  * WordPress dependencies
  */