Resolve refs before they're passed to the style engine.

WordPress · Jul 31, 2024 · ee0ffb2 · ee0ffb2
1 parent 49a07b2
commit ee0ffb2
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 21 deletions.
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
@@ -2309,7 +2309,7 @@ protected static function flatten_tree( $tree, $prefix = '', $token = '--' ) {
 	 * ```php
 	 * array(
 	 *   'name'  => 'property_name',
-	 *   'value' => 'property_value,
+	 *   'value' => 'property_value',
 	 * )
 	 * ```
 	 *
@@ -2318,6 +2318,7 @@ protected static function flatten_tree( $tree, $prefix = '', $token = '--' ) {
 	 * @since 6.1.0 Added `$theme_json`, `$selector`, and `$use_root_padding` parameters.
 	 * @since 6.5.0 Output a `min-height: unset` rule when `aspect-ratio` is set.
 	 * @since 6.6.0 Passing current theme JSON settings to wp_get_typography_font_size_value(). Using style engine to correctly fetch background CSS values.
+	 * @since 6.7.0 Allow ref resolution of background properties.
 	 *
 	 * @param array   $styles Styles to process.
 	 * @param array   $settings Theme settings.
@@ -2361,11 +2362,13 @@ protected static function compute_style_properties( $styles, $settings = array()
 				$root_variable_duplicates[] = substr( $css_property, $root_style_length );
 			}
 
-			// Processes background styles.
+			// Processes background image styles.
 			if ( 'background-image' === $css_property && ! empty( $value ) ) {
-				if ( ! empty( $value['url'] ) ) {
-					$value = "url('" . $value['url'] . "')";
-				}
+				$background_styles = gutenberg_style_engine_get_styles(
+					array( 'background' => array( 'backgroundImage' => $value ) ),
+				);
+
+				$value = $background_styles['declarations'][ $css_property ];
 			}
 
 			// Skip if empty and not "0" or value represents array of longhand values.

diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -395,24 +395,44 @@ export function getStylesDeclarations(
 	);
 
 	/*
-	 * Set background defaults.
-	 * Applies to all background styles except the top-level site background.
+	 * Preprocess background image values.
+	 * 1. Sets default values for blocks (not root).
+	 * 2. .
+	 *
+	 * Note: A refactor is for the style engine to handle ref resolution (and possibly defaults)
+	 * via a public util used internally and externally. Theme.json tree and defaults could be passed
+	 * as options.
 	 */
-	if ( ! isRoot && !! blockStyles.background ) {
-		blockStyles = {
-			...blockStyles,
-			background: {
-				...blockStyles.background,
-				...setBackgroundStyleDefaults( blockStyles.background ),
-			},
-		};
+	if ( !! blockStyles.background ) {
+		// 1. Set default values for block styles except the top-level site background
+		if ( ! isRoot ) {
+			blockStyles = {
+				...blockStyles,
+				background: {
+					...blockStyles.background,
+					...setBackgroundStyleDefaults( blockStyles.background ),
+				},
+			};
+		}
+
+		/*
+		 * 2. Resolve dynamic values before they are compiled by the style engine,
+		 * which doesn't (yet) resolve dynamic values.
+		 */
+		if ( blockStyles.background?.backgroundImage?.ref ) {
+			if ( typeof blockStyles.background.backgroundImage !== 'string' ) {
+				const refPath =
+					blockStyles.background.backgroundImage.ref.split( '.' );
+				blockStyles.background.backgroundImage = getValueFromObjectPath(
+					tree,
+					refPath
+				);
+			}
+		}
 	}
 
 	// The goal is to move everything to server side generated engine styles
 	// This is temporary as we absorb more and more styles into the engine.
-
-	// @TODO - it looks like the style engine needs to take care of both
-	// the ref resolution, then the background image value build url() using the resolved value.
 	const extraRules = getCSSRules( blockStyles );
 	extraRules.forEach( ( rule ) => {
 		// Don't output padding properties if padding variables are set or if we're not editing a full template.
@@ -428,14 +448,11 @@ export function getStylesDeclarations(
 			: kebabCase( rule.key );
 
 		let ruleValue = rule.value;
-
 		if ( typeof ruleValue !== 'string' && ruleValue?.ref ) {
 			const refPath = ruleValue.ref.split( '.' );
 			ruleValue = compileStyleValue(
 				getValueFromObjectPath( tree, refPath )
 			);
-			console.log( { ruleValue } );
-
 			// Presence of another ref indicates a reference to another dynamic value.
 			// Pointing to another dynamic value is not supported.
 			if ( ! ruleValue || ruleValue?.ref ) {