Added tests

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
+ );
+ }
+ );
+ } );
 } );

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' ) {

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(