Section Styles: Resolve ref values in variations data

lib/block-supports/block-style-variations.php

@@ -79,6 +79,38 @@
 		return $parsed_block;
 	}
 
+	// Recursively resolve any ref values with the appropriate value within the
+	// theme_json data.
+	$replace_refs = function ( &$variation_data ) use( &$replace_refs, $theme_json ) {
+		foreach ( $variation_data as $key => &$value ) {
+			// Only need to potentially process arrays.
+			if ( is_array( $value ) ) {
+				// If ref value is set, attempt to find its matching value and update it.
+				if ( isset( $value['ref'] ) ) {
+					// Clean up any invalid ref value.
+					if ( empty( $value['ref'] ) || ! is_string( $value['ref'] ) ) {
+						unset( $variation_data[ $key ] );
+					}
+
+					$value_path = explode( '.', $value['ref'] ?? '' );
+					$ref_value  = _wp_array_get( $theme_json, $value_path );
+
+					// Only update this value if the referenced path matched a value.
+					if ( $ref_value ) {
+						$value = $ref_value;
+					} else {
+						// Otherwise, remove the ref node.
+						unset( $variation_data[ $key ] );
+					}
+				} else {
+					// Recursively look for ref instances.
+					$replace_refs( $value, $theme_json );
+				}
+			}
+		}
+	};
+	$replace_refs( $variation_data );
+
 	$variation_instance = gutenberg_create_block_style_variation_instance_name( $parsed_block, $variation );
 	$class_name         = "is-style-$variation_instance";
 	$updated_class_name = $parsed_block['attrs']['className'] . " $class_name";

packages/block-editor/src/hooks/block-style-variation.js

@@ -14,6 +14,7 @@ import {
 	getBlockSelectors,
 } from '../components/global-styles';
 import { useStyleOverride } from './utils';
+import { getValueFromObjectPath } from '../utils/object';
 import { store as blockEditorStore } from '../store';
 import { globalStylesDataKey } from '../store/private-keys';
 import { unlock } from '../lock-unlock';
@@ -180,6 +181,67 @@ export function __unstableBlockStyleVariationOverridesWithConfig( { config } ) {
 	);
 }
 
+/**
+ * Retrieves any variation styles data and resolves any referenced values.
+ *
+ * @param {Object}    globalStyles A complete global styles object, containing settings and styles.
+ * @param {string}    name         The name of the desired block type.
+ * @param {variation} variation    The of the block style variation to retrieve data for.
+ *
+ * @return {Object|undefined} The global styles data for the specified variation.
+ */
+function getVariationStylesWithRefValues( globalStyles, name, variation ) {
+	if ( ! globalStyles?.styles?.blocks?.[ name ]?.variations?.[ variation ] ) {
+		return;
+	}
+
+	// Helper to recursively look for `ref` values to resolve.
+	const replaceRefs = ( variationStyles ) => {
+		Object.keys( variationStyles ).forEach( ( key ) => {
+			const value = variationStyles[ key ];
+
+			// Only process objects.
+			if ( typeof value === 'object' && value !== null ) {
+				// Process `ref` value if present.
+				if ( value.ref !== undefined ) {
+					if (
+						typeof value.ref !== 'string' ||
+						value.ref.trim() === ''
+					) {
+						// Remove invalid ref.
+						delete variationStyles[ key ];
+					} else {
+						// Resolve `ref` value.
+						const refValue = getValueFromObjectPath(
+							globalStyles,
+							value.ref
+						);
+
+						if ( refValue ) {
+							variationStyles[ key ] = refValue;
+						} else {
+							delete variationStyles[ key ];
+						}
+					}
+				} else {
+					// Recursively resolve `ref` values in nested objects.
+					replaceRefs( value );
+				}
+			}
+		} );
+	};
+
+	// Deep clone variation node to avoid mutating it within global styles and losing refs.
+	const styles = JSON.parse(
+		JSON.stringify(
+			globalStyles.styles.blocks[ name ].variations[ variation ]
+		)
+	);
+	replaceRefs( styles );
+
+	return styles;
+}
+
 function useBlockStyleVariation( name, variation, clientId ) {
 	// Prefer global styles data in GlobalStylesContext, which are available
 	// if in the site editor. Otherwise fall back to whatever is in the
@@ -194,9 +256,14 @@ function useBlockStyleVariation( name, variation, clientId ) {
 	}, [] );
 
 	return useMemo( () => {
-		const styles = mergedConfig?.styles ?? globalStyles;
-		const variationStyles =
-			styles?.blocks?.[ name ]?.variations?.[ variation ];
+		const variationStyles = getVariationStylesWithRefValues(
+			{
+				settings: mergedConfig?.settings ?? globalSettings,
+				styles: mergedConfig?.styles ?? globalStyles,
+			},
+			name,
+			variation
+		);
 
 		return {
 			settings: mergedConfig?.settings ?? globalSettings,