From 008b2f4aabcd43c74c08556f244969c2b8689814 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Fri, 2 Aug 2024 12:18:47 +1000
Subject: [PATCH] Added tests

---
 .../components/global-styles/test/utils.js    | 75 +++++++++++++++++++
 .../global-styles/use-global-styles-output.js |  6 +-
 .../src/components/global-styles/utils.js     | 40 ++++++++--
 3 files changed, 110 insertions(+), 11 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/test/utils.js b/packages/block-editor/src/components/global-styles/test/utils.js
index 0ab13e9f92134d..19f3079943412e 100644
--- a/packages/block-editor/src/components/global-styles/test/utils.js
+++ b/packages/block-editor/src/components/global-styles/test/utils.js
@@ -8,6 +8,8 @@ import {
 	getValueFromVariable,
 	scopeFeatureSelectors,
 	getResolvedThemeFilePath,
+	getResolvedRefValue,
+	getResolvedValue,
 } from '../utils';
 
 describe( 'editor utils', () => {
@@ -53,6 +55,27 @@ describe( 'editor utils', () => {
 				},
 			},
 		},
+		styles: {
+			background: {
+				backgroundImage: {
+					url: 'file:./assets/image.jpg',
+				},
+				backgroundAttachment: 'fixed',
+				backgroundPosition: 'top left',
+			},
+			blocks: {
+				'core/group': {
+					background: {
+						backgroundImage: {
+							ref: 'styles.background.backgroundImage',
+						},
+					},
+					dimensions: {
+						minHeight: '100px',
+					},
+				},
+			},
+		},
 		_links: {
 			'wp:theme-file': [
 				{
@@ -411,4 +434,56 @@ describe( 'editor utils', () => {
 			}
 		);
 	} );
+
+	describe( 'getResolvedRefValue()', () => {
+		it.each( [
+			[ 'blue', 'blue', null ],
+			[ 0, 0, themeJson ],
+			[
+				{ ref: 'styles.background.backgroundImage' },
+				{ url: 'file:./assets/image.jpg' },
+				themeJson,
+			],
+			[
+				{
+					ref: 'styles.blocks.core/group.background.backgroundImage',
+				},
+				undefined,
+				themeJson,
+			],
+		] )(
+			'Given ruleValue %s return expected value of %s',
+			( ruleValue, returnedValue, tree ) => {
+				expect( getResolvedRefValue( ruleValue, tree ) ).toEqual(
+					returnedValue
+				);
+			}
+		);
+	} );
+
+	describe( 'getResolvedValue()', () => {
+		it.each( [
+			[ 'blue', 'blue', null ],
+			[ 0, 0, themeJson ],
+			[
+				{ ref: 'styles.background.backgroundImage' },
+				{ url: 'https://wordpress.org/assets/image.jpg' },
+				themeJson,
+			],
+			[
+				{
+					ref: 'styles.blocks.core/group.background.backgroundImage',
+				},
+				undefined,
+				themeJson,
+			],
+		] )(
+			'Given ruleValue %s return expected value of %s',
+			( ruleValue, returnedValue, tree ) => {
+				expect( getResolvedValue( ruleValue, tree ) ).toEqual(
+					returnedValue
+				);
+			}
+		);
+	} );
 } );
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
index 4c81184c832fc8..fc7e880b400624 100644
--- 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
@@ -429,11 +429,7 @@ export function getStylesDeclarations(
 			? rule.key
 			: kebabCase( rule.key );
 
-		let ruleValue = getResolvedValue( rule.value, tree );
-
-		if ( ! ruleValue ) {
-			return;
-		}
+		let ruleValue = getResolvedValue( rule.value, tree, null );
 
 		// Calculate fluid typography rules where available.
 		if ( cssProperty === 'font-size' ) {
diff --git a/packages/block-editor/src/components/global-styles/utils.js b/packages/block-editor/src/components/global-styles/utils.js
index e05720c75b48ec..8de479e39382e5 100644
--- a/packages/block-editor/src/components/global-styles/utils.js
+++ b/packages/block-editor/src/components/global-styles/utils.js
@@ -528,6 +528,7 @@ export function getBlockStyleVariationSelector( variation, blockSelector ) {
 
 /**
  * Converts style preset values `var:` to CSS custom var values.
+ * TODO: Export and use the style engine util: getCSSVarFromStyleValue().
  *
  * Example:
  *
@@ -577,28 +578,55 @@ export function getResolvedThemeFilePath( file, themeFileURIs ) {
 }
 
 /**
- * Resolves ref and relative path values in theme JSON.
+ * Resolves ref values in theme JSON.
  *
  * @param {Object|string} ruleValue A block style value that may contain a reference to a theme.json value.
  * @param {Object}        tree      A theme.json object.
  * @return {*} The resolved value or incoming ruleValue.
  */
-export function getResolvedValue( ruleValue, tree ) {
-	let resolvedValue = ruleValue;
+export function getResolvedRefValue( ruleValue, tree ) {
+	if ( ! ruleValue || ! tree ) {
+		return ruleValue;
+	}
+
 	if ( typeof ruleValue !== 'string' && ruleValue?.ref ) {
 		const refPath = ruleValue.ref.split( '.' );
-		resolvedValue = compileStyleValue(
+		const resolvedRuleValue = compileStyleValue(
 			getValueFromObjectPath( tree, refPath )
 		);
+
 		/*
 		 * Presence of another ref indicates a reference to another dynamic value.
 		 * Pointing to another dynamic value is not supported.
 		 */
-		if ( ! resolvedValue || resolvedValue?.ref ) {
-			return;
+		if ( resolvedRuleValue?.ref ) {
+			return undefined;
 		}
+
+		if ( ! resolvedRuleValue ) {
+			return ruleValue;
+		}
+
+		return resolvedRuleValue;
+	}
+	return ruleValue;
+}
+
+/**
+ * Resolves ref and relative path values in theme JSON.
+ *
+ * @param {Object|string} ruleValue A block style value that may contain a reference to a theme.json value.
+ * @param {Object}        tree      A theme.json object.
+ * @return {*} The resolved value or incoming ruleValue.
+ */
+export function getResolvedValue( ruleValue, tree ) {
+	if ( ! ruleValue || ! tree ) {
+		return ruleValue;
 	}
 
+	// Resolve ref values.
+	const resolvedValue = getResolvedRefValue( ruleValue, tree );
+
 	// Resolve relative paths.
 	if ( resolvedValue?.url ) {
 		resolvedValue.url = getResolvedThemeFilePath(