@wordpress/block-editor 13.0.4 → 13.0.5

package/build-module/hooks/block-style-variation.js

@@ -10,6 +10,7 @@ import { useContext, useMemo } from '@wordpress/element';
  */
 import { GlobalStylesContext, toStyles, 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';
@@ -155,6 +156,61 @@ export function __unstableBlockStyleVariationOverridesWithConfig({
     }, override.id))
   });
 }
+
+/**
+ * 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.
+ */
+export 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);
+
+          // After recursion, if value is empty due to explicitly
+          // `undefined` ref value, remove it.
+          if (Object.keys(value).length === 0) {
+            delete variationStyles[key];
+          }
+        }
+      }
+    });
+  };
+
+  // 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
@@ -173,11 +229,13 @@ function useBlockStyleVariation(name, variation, clientId) {
     };
   }, []);
   return useMemo(() => {
-    var _mergedConfig$styles, _mergedConfig$setting;
-    const styles = (_mergedConfig$styles = mergedConfig?.styles) !== null && _mergedConfig$styles !== void 0 ? _mergedConfig$styles : globalStyles;
-    const variationStyles = styles?.blocks?.[name]?.variations?.[variation];
-    return {
+    var _mergedConfig$setting, _mergedConfig$styles, _mergedConfig$setting2;
+    const variationStyles = getVariationStylesWithRefValues({
       settings: (_mergedConfig$setting = mergedConfig?.settings) !== null && _mergedConfig$setting !== void 0 ? _mergedConfig$setting : globalSettings,
+      styles: (_mergedConfig$styles = mergedConfig?.styles) !== null && _mergedConfig$styles !== void 0 ? _mergedConfig$styles : globalStyles
+    }, name, variation);
+    return {
+      settings: (_mergedConfig$setting2 = mergedConfig?.settings) !== null && _mergedConfig$setting2 !== void 0 ? _mergedConfig$setting2 : globalSettings,
       // The variation style data is all that is needed to generate
       // the styles for the current application to a block. The variation
       // name is updated to match the instance specific class name.

package/build-module/hooks/block-style-variation.js.map

@@ -1 +1 @@
-{"version":3,"names":["getBlockTypes","store","blocksStore","useSelect","useContext","useMemo","GlobalStylesContext","toStyles","getBlockSelectors","useStyleOverride","blockEditorStore","globalStylesDataKey","unlock","jsx","_jsx","Fragment","_Fragment","VARIATION_PREFIX","getVariationMatches","className","split","reduce","matches","name","startsWith","match","slice","length","push","getVariationNameFromClass","registeredStyles","variation","some","style","OverrideStyles","override","__unstableBlockStyleVariationOverridesWithConfig","config","getBlockStyles","overrides","select","getStyleOverrides","getBlockName","overridesWithConfig","newOverrides","overriddenClientIds","clientId","includes","blockName","configStyles","styles","blocks","variations","variationConfig","settings","blockSelectors","hasBlockGapSupport","hasFallbackGapSupport","disableLayoutStyles","disableRootPadding","variationStyles","blockGap","blockStyles","layoutStyles","marginReset","presets","rootPadding","id","css","__unstableType","children","map","useBlockStyleVariation","merged","mergedConfig","globalSettings","globalStyles","getSettings","__experimentalFeatures","_mergedConfig$styles","_mergedConfig$setting","useBlockProps","variationClass","hasSupport","attributeKeys","isMatch"],"sources":["@wordpress/block-editor/src/hooks/block-style-variation.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockTypes, store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport { useContext, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tGlobalStylesContext,\n\ttoStyles,\n\tgetBlockSelectors,\n} from '../components/global-styles';\nimport { useStyleOverride } from './utils';\nimport { store as blockEditorStore } from '../store';\nimport { globalStylesDataKey } from '../store/private-keys';\nimport { unlock } from '../lock-unlock';\n\nconst VARIATION_PREFIX = 'is-style-';\n\nfunction getVariationMatches( className ) {\n\tif ( ! className ) {\n\t\treturn [];\n\t}\n\treturn className.split( /\\s+/ ).reduce( ( matches, name ) => {\n\t\tif ( name.startsWith( VARIATION_PREFIX ) ) {\n\t\t\tconst match = name.slice( VARIATION_PREFIX.length );\n\t\t\tif ( match !== 'default' ) {\n\t\t\t\tmatches.push( match );\n\t\t\t}\n\t\t}\n\t\treturn matches;\n\t}, [] );\n}\n\n/**\n * Get the first block style variation that has been registered from the class string.\n *\n * @param {string} className        CSS class string for a block.\n * @param {Array}  registeredStyles Currently registered block styles.\n *\n * @return {string|null} The name of the first registered variation.\n */\nfunction getVariationNameFromClass( className, registeredStyles = [] ) {\n\t// The global flag affects how capturing groups work in JS. So the regex\n\t// below will only return full CSS classes not just the variation name.\n\tconst matches = getVariationMatches( className );\n\n\tif ( ! matches ) {\n\t\treturn null;\n\t}\n\n\tfor ( const variation of matches ) {\n\t\tif ( registeredStyles.some( ( style ) => style.name === variation ) ) {\n\t\t\treturn variation;\n\t\t}\n\t}\n\treturn null;\n}\n\n// A helper component to apply a style override using the useStyleOverride hook.\nfunction OverrideStyles( { override } ) {\n\tuseStyleOverride( override );\n}\n\n/**\n * This component is used to generate new block style variation overrides\n * based on an incoming theme config. If a matching style is found in the config,\n * a new override is created and returned. The overrides can be used in conjunction with\n * useStyleOverride to apply the new styles to the editor. Its use is\n * subject to change.\n *\n * @param {Object} props        Props.\n * @param {Object} props.config A global styles object, containing settings and styles.\n * @return {JSX.Element|undefined} An array of new block variation overrides.\n */\nexport function __unstableBlockStyleVariationOverridesWithConfig( { config } ) {\n\tconst { getBlockStyles, overrides } = useSelect(\n\t\t( select ) => ( {\n\t\t\tgetBlockStyles: select( blocksStore ).getBlockStyles,\n\t\t\toverrides: unlock( select( blockEditorStore ) ).getStyleOverrides(),\n\t\t} ),\n\t\t[]\n\t);\n\tconst { getBlockName } = useSelect( blockEditorStore );\n\n\tconst overridesWithConfig = useMemo( () => {\n\t\tif ( ! overrides?.length ) {\n\t\t\treturn;\n\t\t}\n\t\tconst newOverrides = [];\n\t\tconst overriddenClientIds = [];\n\t\tfor ( const [ , override ] of overrides ) {\n\t\t\tif (\n\t\t\t\toverride?.variation &&\n\t\t\t\toverride?.clientId &&\n\t\t\t\t/*\n\t\t\t\t * Because this component overwrites existing style overrides,\n\t\t\t\t * filter out any overrides that are already present in the store.\n\t\t\t\t */\n\t\t\t\t! overriddenClientIds.includes( override.clientId )\n\t\t\t) {\n\t\t\t\tconst blockName = getBlockName( override.clientId );\n\t\t\t\tconst configStyles =\n\t\t\t\t\tconfig?.styles?.blocks?.[ blockName ]?.variations?.[\n\t\t\t\t\t\toverride.variation\n\t\t\t\t\t];\n\t\t\t\tif ( configStyles ) {\n\t\t\t\t\tconst variationConfig = {\n\t\t\t\t\t\tsettings: config?.settings,\n\t\t\t\t\t\t// The variation style data is all that is needed to generate\n\t\t\t\t\t\t// the styles for the current application to a block. The variation\n\t\t\t\t\t\t// name is updated to match the instance specific class name.\n\t\t\t\t\t\tstyles: {\n\t\t\t\t\t\t\tblocks: {\n\t\t\t\t\t\t\t\t[ blockName ]: {\n\t\t\t\t\t\t\t\t\tvariations: {\n\t\t\t\t\t\t\t\t\t\t[ `${ override.variation }-${ override.clientId }` ]:\n\t\t\t\t\t\t\t\t\t\t\tconfigStyles,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t};\n\t\t\t\t\tconst blockSelectors = getBlockSelectors(\n\t\t\t\t\t\tgetBlockTypes(),\n\t\t\t\t\t\tgetBlockStyles,\n\t\t\t\t\t\toverride.clientId\n\t\t\t\t\t);\n\t\t\t\t\tconst hasBlockGapSupport = false;\n\t\t\t\t\tconst hasFallbackGapSupport = true;\n\t\t\t\t\tconst disableLayoutStyles = true;\n\t\t\t\t\tconst disableRootPadding = true;\n\t\t\t\t\tconst variationStyles = toStyles(\n\t\t\t\t\t\tvariationConfig,\n\t\t\t\t\t\tblockSelectors,\n\t\t\t\t\t\thasBlockGapSupport,\n\t\t\t\t\t\thasFallbackGapSupport,\n\t\t\t\t\t\tdisableLayoutStyles,\n\t\t\t\t\t\tdisableRootPadding,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tblockGap: false,\n\t\t\t\t\t\t\tblockStyles: true,\n\t\t\t\t\t\t\tlayoutStyles: false,\n\t\t\t\t\t\t\tmarginReset: false,\n\t\t\t\t\t\t\tpresets: false,\n\t\t\t\t\t\t\trootPadding: false,\n\t\t\t\t\t\t\tvariationStyles: true,\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t\t\tnewOverrides.push( {\n\t\t\t\t\t\tid: `${ override.variation }-${ override.clientId }`,\n\t\t\t\t\t\tcss: variationStyles,\n\t\t\t\t\t\t__unstableType: 'variation',\n\t\t\t\t\t\tvariation: override.variation,\n\t\t\t\t\t\t// The clientId will be stored with the override and used to ensure\n\t\t\t\t\t\t// the order of overrides matches the order of blocks so that the\n\t\t\t\t\t\t// correct CSS cascade is maintained.\n\t\t\t\t\t\tclientId: override.clientId,\n\t\t\t\t\t} );\n\t\t\t\t\toverriddenClientIds.push( override.clientId );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn newOverrides;\n\t}, [ config, overrides, getBlockStyles, getBlockName ] );\n\n\tif ( ! overridesWithConfig || ! overridesWithConfig.length ) {\n\t\treturn;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ overridesWithConfig.map( ( override ) => (\n\t\t\t\t<OverrideStyles key={ override.id } override={ override } />\n\t\t\t) ) }\n\t\t</>\n\t);\n}\n\nfunction useBlockStyleVariation( name, variation, clientId ) {\n\t// Prefer global styles data in GlobalStylesContext, which are available\n\t// if in the site editor. Otherwise fall back to whatever is in the\n\t// editor settings and available in the post editor.\n\tconst { merged: mergedConfig } = useContext( GlobalStylesContext );\n\tconst { globalSettings, globalStyles } = useSelect( ( select ) => {\n\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\treturn {\n\t\t\tglobalSettings: settings.__experimentalFeatures,\n\t\t\tglobalStyles: settings[ globalStylesDataKey ],\n\t\t};\n\t}, [] );\n\n\treturn useMemo( () => {\n\t\tconst styles = mergedConfig?.styles ?? globalStyles;\n\t\tconst variationStyles =\n\t\t\tstyles?.blocks?.[ name ]?.variations?.[ variation ];\n\n\t\treturn {\n\t\t\tsettings: mergedConfig?.settings ?? globalSettings,\n\t\t\t// The variation style data is all that is needed to generate\n\t\t\t// the styles for the current application to a block. The variation\n\t\t\t// name is updated to match the instance specific class name.\n\t\t\tstyles: {\n\t\t\t\tblocks: {\n\t\t\t\t\t[ name ]: {\n\t\t\t\t\t\tvariations: {\n\t\t\t\t\t\t\t[ `${ variation }-${ clientId }` ]: variationStyles,\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t}, [\n\t\tmergedConfig,\n\t\tglobalSettings,\n\t\tglobalStyles,\n\t\tvariation,\n\t\tclientId,\n\t\tname,\n\t] );\n}\n\n// Rather than leveraging `useInstanceId` here, the `clientId` is used.\n// This is so that the variation style override's ID is predictable\n// when the order of applied style variations changes.\nfunction useBlockProps( { name, className, clientId } ) {\n\tconst { getBlockStyles } = useSelect( blocksStore );\n\n\tconst registeredStyles = getBlockStyles( name );\n\tconst variation = getVariationNameFromClass( className, registeredStyles );\n\tconst variationClass = `${ VARIATION_PREFIX }${ variation }-${ clientId }`;\n\n\tconst { settings, styles } = useBlockStyleVariation(\n\t\tname,\n\t\tvariation,\n\t\tclientId\n\t);\n\n\tconst variationStyles = useMemo( () => {\n\t\tif ( ! variation ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst variationConfig = { settings, styles };\n\t\tconst blockSelectors = getBlockSelectors(\n\t\t\tgetBlockTypes(),\n\t\t\tgetBlockStyles,\n\t\t\tclientId\n\t\t);\n\t\tconst hasBlockGapSupport = false;\n\t\tconst hasFallbackGapSupport = true;\n\t\tconst disableLayoutStyles = true;\n\t\tconst disableRootPadding = true;\n\n\t\treturn toStyles(\n\t\t\tvariationConfig,\n\t\t\tblockSelectors,\n\t\t\thasBlockGapSupport,\n\t\t\thasFallbackGapSupport,\n\t\t\tdisableLayoutStyles,\n\t\t\tdisableRootPadding,\n\t\t\t{\n\t\t\t\tblockGap: false,\n\t\t\t\tblockStyles: true,\n\t\t\t\tlayoutStyles: false,\n\t\t\t\tmarginReset: false,\n\t\t\t\tpresets: false,\n\t\t\t\trootPadding: false,\n\t\t\t\tvariationStyles: true,\n\t\t\t}\n\t\t);\n\t}, [ variation, settings, styles, getBlockStyles, clientId ] );\n\n\tuseStyleOverride( {\n\t\tid: `variation-${ clientId }`,\n\t\tcss: variationStyles,\n\t\t__unstableType: 'variation',\n\t\tvariation,\n\t\t// The clientId will be stored with the override and used to ensure\n\t\t// the order of overrides matches the order of blocks so that the\n\t\t// correct CSS cascade is maintained.\n\t\tclientId,\n\t} );\n\n\treturn variation ? { className: variationClass } : {};\n}\n\nexport default {\n\thasSupport: () => true,\n\tattributeKeys: [ 'className' ],\n\tisMatch: ( { className } ) => getVariationMatches( className ).length > 0,\n\tuseBlockProps,\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,EAAEC,KAAK,IAAIC,WAAW,QAAQ,mBAAmB;AACvE,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,UAAU,EAAEC,OAAO,QAAQ,oBAAoB;;AAExD;AACA;AACA;AACA,SACCC,mBAAmB,EACnBC,QAAQ,EACRC,iBAAiB,QACX,6BAA6B;AACpC,SAASC,gBAAgB,QAAQ,SAAS;AAC1C,SAASR,KAAK,IAAIS,gBAAgB,QAAQ,UAAU;AACpD,SAASC,mBAAmB,QAAQ,uBAAuB;AAC3D,SAASC,MAAM,QAAQ,gBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAExC,MAAMC,gBAAgB,GAAG,WAAW;AAEpC,SAASC,mBAAmBA,CAAEC,SAAS,EAAG;EACzC,IAAK,CAAEA,SAAS,EAAG;IAClB,OAAO,EAAE;EACV;EACA,OAAOA,SAAS,CAACC,KAAK,CAAE,KAAM,CAAC,CAACC,MAAM,CAAE,CAAEC,OAAO,EAAEC,IAAI,KAAM;IAC5D,IAAKA,IAAI,CAACC,UAAU,CAAEP,gBAAiB,CAAC,EAAG;MAC1C,MAAMQ,KAAK,GAAGF,IAAI,CAACG,KAAK,CAAET,gBAAgB,CAACU,MAAO,CAAC;MACnD,IAAKF,KAAK,KAAK,SAAS,EAAG;QAC1BH,OAAO,CAACM,IAAI,CAAEH,KAAM,CAAC;MACtB;IACD;IACA,OAAOH,OAAO;EACf,CAAC,EAAE,EAAG,CAAC;AACR;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASO,yBAAyBA,CAAEV,SAAS,EAAEW,gBAAgB,GAAG,EAAE,EAAG;EACtE;EACA;EACA,MAAMR,OAAO,GAAGJ,mBAAmB,CAAEC,SAAU,CAAC;EAEhD,IAAK,CAAEG,OAAO,EAAG;IAChB,OAAO,IAAI;EACZ;EAEA,KAAM,MAAMS,SAAS,IAAIT,OAAO,EAAG;IAClC,IAAKQ,gBAAgB,CAACE,IAAI,CAAIC,KAAK,IAAMA,KAAK,CAACV,IAAI,KAAKQ,SAAU,CAAC,EAAG;MACrE,OAAOA,SAAS;IACjB;EACD;EACA,OAAO,IAAI;AACZ;;AAEA;AACA,SAASG,cAAcA,CAAE;EAAEC;AAAS,CAAC,EAAG;EACvC1B,gBAAgB,CAAE0B,QAAS,CAAC;AAC7B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gDAAgDA,CAAE;EAAEC;AAAO,CAAC,EAAG;EAC9E,MAAM;IAAEC,cAAc;IAAEC;EAAU,CAAC,GAAGpC,SAAS,CAC5CqC,MAAM,KAAQ;IACfF,cAAc,EAAEE,MAAM,CAAEtC,WAAY,CAAC,CAACoC,cAAc;IACpDC,SAAS,EAAE3B,MAAM,CAAE4B,MAAM,CAAE9B,gBAAiB,CAAE,CAAC,CAAC+B,iBAAiB,CAAC;EACnE,CAAC,CAAE,EACH,EACD,CAAC;EACD,MAAM;IAAEC;EAAa,CAAC,GAAGvC,SAAS,CAAEO,gBAAiB,CAAC;EAEtD,MAAMiC,mBAAmB,GAAGtC,OAAO,CAAE,MAAM;IAC1C,IAAK,CAAEkC,SAAS,EAAEZ,MAAM,EAAG;MAC1B;IACD;IACA,MAAMiB,YAAY,GAAG,EAAE;IACvB,MAAMC,mBAAmB,GAAG,EAAE;IAC9B,KAAM,MAAM,GAAIV,QAAQ,CAAE,IAAII,SAAS,EAAG;MACzC,IACCJ,QAAQ,EAAEJ,SAAS,IACnBI,QAAQ,EAAEW,QAAQ;MAClB;AACJ;AACA;AACA;MACI,CAAED,mBAAmB,CAACE,QAAQ,CAAEZ,QAAQ,CAACW,QAAS,CAAC,EAClD;QACD,MAAME,SAAS,GAAGN,YAAY,CAAEP,QAAQ,CAACW,QAAS,CAAC;QACnD,MAAMG,YAAY,GACjBZ,MAAM,EAAEa,MAAM,EAAEC,MAAM,GAAIH,SAAS,CAAE,EAAEI,UAAU,GAChDjB,QAAQ,CAACJ,SAAS,CAClB;QACF,IAAKkB,YAAY,EAAG;UACnB,MAAMI,eAAe,GAAG;YACvBC,QAAQ,EAAEjB,MAAM,EAAEiB,QAAQ;YAC1B;YACA;YACA;YACAJ,MAAM,EAAE;cACPC,MAAM,EAAE;gBACP,CAAEH,SAAS,GAAI;kBACdI,UAAU,EAAE;oBACX,CAAG,GAAGjB,QAAQ,CAACJ,SAAW,IAAII,QAAQ,CAACW,QAAU,EAAC,GACjDG;kBACF;gBACD;cACD;YACD;UACD,CAAC;UACD,MAAMM,cAAc,GAAG/C,iBAAiB,CACvCR,aAAa,CAAC,CAAC,EACfsC,cAAc,EACdH,QAAQ,CAACW,QACV,CAAC;UACD,MAAMU,kBAAkB,GAAG,KAAK;UAChC,MAAMC,qBAAqB,GAAG,IAAI;UAClC,MAAMC,mBAAmB,GAAG,IAAI;UAChC,MAAMC,kBAAkB,GAAG,IAAI;UAC/B,MAAMC,eAAe,GAAGrD,QAAQ,CAC/B8C,eAAe,EACfE,cAAc,EACdC,kBAAkB,EAClBC,qBAAqB,EACrBC,mBAAmB,EACnBC,kBAAkB,EAClB;YACCE,QAAQ,EAAE,KAAK;YACfC,WAAW,EAAE,IAAI;YACjBC,YAAY,EAAE,KAAK;YACnBC,WAAW,EAAE,KAAK;YAClBC,OAAO,EAAE,KAAK;YACdC,WAAW,EAAE,KAAK;YAClBN,eAAe,EAAE;UAClB,CACD,CAAC;UACDhB,YAAY,CAAChB,IAAI,CAAE;YAClBuC,EAAE,EAAG,GAAGhC,QAAQ,CAACJ,SAAW,IAAII,QAAQ,CAACW,QAAU,EAAC;YACpDsB,GAAG,EAAER,eAAe;YACpBS,cAAc,EAAE,WAAW;YAC3BtC,SAAS,EAAEI,QAAQ,CAACJ,SAAS;YAC7B;YACA;YACA;YACAe,QAAQ,EAAEX,QAAQ,CAACW;UACpB,CAAE,CAAC;UACHD,mBAAmB,CAACjB,IAAI,CAAEO,QAAQ,CAACW,QAAS,CAAC;QAC9C;MACD;IACD;IACA,OAAOF,YAAY;EACpB,CAAC,EAAE,CAAEP,MAAM,EAAEE,SAAS,EAAED,cAAc,EAAEI,YAAY,CAAG,CAAC;EAExD,IAAK,CAAEC,mBAAmB,IAAI,CAAEA,mBAAmB,CAAChB,MAAM,EAAG;IAC5D;EACD;EAEA,oBACCb,IAAA,CAAAE,SAAA;IAAAsD,QAAA,EACG3B,mBAAmB,CAAC4B,GAAG,CAAIpC,QAAQ,iBACpCrB,IAAA,CAACoB,cAAc;MAAqBC,QAAQ,EAAGA;IAAU,GAAnCA,QAAQ,CAACgC,EAA4B,CAC1D;EAAC,CACF,CAAC;AAEL;AAEA,SAASK,sBAAsBA,CAAEjD,IAAI,EAAEQ,SAAS,EAAEe,QAAQ,EAAG;EAC5D;EACA;EACA;EACA,MAAM;IAAE2B,MAAM,EAAEC;EAAa,CAAC,GAAGtE,UAAU,CAAEE,mBAAoB,CAAC;EAClE,MAAM;IAAEqE,cAAc;IAAEC;EAAa,CAAC,GAAGzE,SAAS,CAAIqC,MAAM,IAAM;IACjE,MAAMc,QAAQ,GAAGd,MAAM,CAAE9B,gBAAiB,CAAC,CAACmE,WAAW,CAAC,CAAC;IACzD,OAAO;MACNF,cAAc,EAAErB,QAAQ,CAACwB,sBAAsB;MAC/CF,YAAY,EAAEtB,QAAQ,CAAE3C,mBAAmB;IAC5C,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,OAAON,OAAO,CAAE,MAAM;IAAA,IAAA0E,oBAAA,EAAAC,qBAAA;IACrB,MAAM9B,MAAM,IAAA6B,oBAAA,GAAGL,YAAY,EAAExB,MAAM,cAAA6B,oBAAA,cAAAA,oBAAA,GAAIH,YAAY;IACnD,MAAMhB,eAAe,GACpBV,MAAM,EAAEC,MAAM,GAAI5B,IAAI,CAAE,EAAE6B,UAAU,GAAIrB,SAAS,CAAE;IAEpD,OAAO;MACNuB,QAAQ,GAAA0B,qBAAA,GAAEN,YAAY,EAAEpB,QAAQ,cAAA0B,qBAAA,cAAAA,qBAAA,GAAIL,cAAc;MAClD;MACA;MACA;MACAzB,MAAM,EAAE;QACPC,MAAM,EAAE;UACP,CAAE5B,IAAI,GAAI;YACT6B,UAAU,EAAE;cACX,CAAG,GAAGrB,SAAW,IAAIe,QAAU,EAAC,GAAIc;YACrC;UACD;QACD;MACD;IACD,CAAC;EACF,CAAC,EAAE,CACFc,YAAY,EACZC,cAAc,EACdC,YAAY,EACZ7C,SAAS,EACTe,QAAQ,EACRvB,IAAI,CACH,CAAC;AACJ;;AAEA;AACA;AACA;AACA,SAAS0D,aAAaA,CAAE;EAAE1D,IAAI;EAAEJ,SAAS;EAAE2B;AAAS,CAAC,EAAG;EACvD,MAAM;IAAER;EAAe,CAAC,GAAGnC,SAAS,CAAED,WAAY,CAAC;EAEnD,MAAM4B,gBAAgB,GAAGQ,cAAc,CAAEf,IAAK,CAAC;EAC/C,MAAMQ,SAAS,GAAGF,yBAAyB,CAAEV,SAAS,EAAEW,gBAAiB,CAAC;EAC1E,MAAMoD,cAAc,GAAI,GAAGjE,gBAAkB,GAAGc,SAAW,IAAIe,QAAU,EAAC;EAE1E,MAAM;IAAEQ,QAAQ;IAAEJ;EAAO,CAAC,GAAGsB,sBAAsB,CAClDjD,IAAI,EACJQ,SAAS,EACTe,QACD,CAAC;EAED,MAAMc,eAAe,GAAGvD,OAAO,CAAE,MAAM;IACtC,IAAK,CAAE0B,SAAS,EAAG;MAClB;IACD;IAEA,MAAMsB,eAAe,GAAG;MAAEC,QAAQ;MAAEJ;IAAO,CAAC;IAC5C,MAAMK,cAAc,GAAG/C,iBAAiB,CACvCR,aAAa,CAAC,CAAC,EACfsC,cAAc,EACdQ,QACD,CAAC;IACD,MAAMU,kBAAkB,GAAG,KAAK;IAChC,MAAMC,qBAAqB,GAAG,IAAI;IAClC,MAAMC,mBAAmB,GAAG,IAAI;IAChC,MAAMC,kBAAkB,GAAG,IAAI;IAE/B,OAAOpD,QAAQ,CACd8C,eAAe,EACfE,cAAc,EACdC,kBAAkB,EAClBC,qBAAqB,EACrBC,mBAAmB,EACnBC,kBAAkB,EAClB;MACCE,QAAQ,EAAE,KAAK;MACfC,WAAW,EAAE,IAAI;MACjBC,YAAY,EAAE,KAAK;MACnBC,WAAW,EAAE,KAAK;MAClBC,OAAO,EAAE,KAAK;MACdC,WAAW,EAAE,KAAK;MAClBN,eAAe,EAAE;IAClB,CACD,CAAC;EACF,CAAC,EAAE,CAAE7B,SAAS,EAAEuB,QAAQ,EAAEJ,MAAM,EAAEZ,cAAc,EAAEQ,QAAQ,CAAG,CAAC;EAE9DrC,gBAAgB,CAAE;IACjB0D,EAAE,EAAG,aAAarB,QAAU,EAAC;IAC7BsB,GAAG,EAAER,eAAe;IACpBS,cAAc,EAAE,WAAW;IAC3BtC,SAAS;IACT;IACA;IACA;IACAe;EACD,CAAE,CAAC;EAEH,OAAOf,SAAS,GAAG;IAAEZ,SAAS,EAAE+D;EAAe,CAAC,GAAG,CAAC,CAAC;AACtD;AAEA,eAAe;EACdC,UAAU,EAAEA,CAAA,KAAM,IAAI;EACtBC,aAAa,EAAE,CAAE,WAAW,CAAE;EAC9BC,OAAO,EAAEA,CAAE;IAAElE;EAAU,CAAC,KAAMD,mBAAmB,CAAEC,SAAU,CAAC,CAACQ,MAAM,GAAG,CAAC;EACzEsD;AACD,CAAC","ignoreList":[]}
+{"version":3,"names":["getBlockTypes","store","blocksStore","useSelect","useContext","useMemo","GlobalStylesContext","toStyles","getBlockSelectors","useStyleOverride","getValueFromObjectPath","blockEditorStore","globalStylesDataKey","unlock","jsx","_jsx","Fragment","_Fragment","VARIATION_PREFIX","getVariationMatches","className","split","reduce","matches","name","startsWith","match","slice","length","push","getVariationNameFromClass","registeredStyles","variation","some","style","OverrideStyles","override","__unstableBlockStyleVariationOverridesWithConfig","config","getBlockStyles","overrides","select","getStyleOverrides","getBlockName","overridesWithConfig","newOverrides","overriddenClientIds","clientId","includes","blockName","configStyles","styles","blocks","variations","variationConfig","settings","blockSelectors","hasBlockGapSupport","hasFallbackGapSupport","disableLayoutStyles","disableRootPadding","variationStyles","blockGap","blockStyles","layoutStyles","marginReset","presets","rootPadding","id","css","__unstableType","children","map","getVariationStylesWithRefValues","globalStyles","replaceRefs","Object","keys","forEach","key","value","ref","undefined","trim","refValue","JSON","parse","stringify","useBlockStyleVariation","merged","mergedConfig","globalSettings","getSettings","__experimentalFeatures","_mergedConfig$setting","_mergedConfig$styles","_mergedConfig$setting2","useBlockProps","variationClass","hasSupport","attributeKeys","isMatch"],"sources":["@wordpress/block-editor/src/hooks/block-style-variation.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockTypes, store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport { useContext, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tGlobalStylesContext,\n\ttoStyles,\n\tgetBlockSelectors,\n} from '../components/global-styles';\nimport { useStyleOverride } from './utils';\nimport { getValueFromObjectPath } from '../utils/object';\nimport { store as blockEditorStore } from '../store';\nimport { globalStylesDataKey } from '../store/private-keys';\nimport { unlock } from '../lock-unlock';\n\nconst VARIATION_PREFIX = 'is-style-';\n\nfunction getVariationMatches( className ) {\n\tif ( ! className ) {\n\t\treturn [];\n\t}\n\treturn className.split( /\\s+/ ).reduce( ( matches, name ) => {\n\t\tif ( name.startsWith( VARIATION_PREFIX ) ) {\n\t\t\tconst match = name.slice( VARIATION_PREFIX.length );\n\t\t\tif ( match !== 'default' ) {\n\t\t\t\tmatches.push( match );\n\t\t\t}\n\t\t}\n\t\treturn matches;\n\t}, [] );\n}\n\n/**\n * Get the first block style variation that has been registered from the class string.\n *\n * @param {string} className        CSS class string for a block.\n * @param {Array}  registeredStyles Currently registered block styles.\n *\n * @return {string|null} The name of the first registered variation.\n */\nfunction getVariationNameFromClass( className, registeredStyles = [] ) {\n\t// The global flag affects how capturing groups work in JS. So the regex\n\t// below will only return full CSS classes not just the variation name.\n\tconst matches = getVariationMatches( className );\n\n\tif ( ! matches ) {\n\t\treturn null;\n\t}\n\n\tfor ( const variation of matches ) {\n\t\tif ( registeredStyles.some( ( style ) => style.name === variation ) ) {\n\t\t\treturn variation;\n\t\t}\n\t}\n\treturn null;\n}\n\n// A helper component to apply a style override using the useStyleOverride hook.\nfunction OverrideStyles( { override } ) {\n\tuseStyleOverride( override );\n}\n\n/**\n * This component is used to generate new block style variation overrides\n * based on an incoming theme config. If a matching style is found in the config,\n * a new override is created and returned. The overrides can be used in conjunction with\n * useStyleOverride to apply the new styles to the editor. Its use is\n * subject to change.\n *\n * @param {Object} props        Props.\n * @param {Object} props.config A global styles object, containing settings and styles.\n * @return {JSX.Element|undefined} An array of new block variation overrides.\n */\nexport function __unstableBlockStyleVariationOverridesWithConfig( { config } ) {\n\tconst { getBlockStyles, overrides } = useSelect(\n\t\t( select ) => ( {\n\t\t\tgetBlockStyles: select( blocksStore ).getBlockStyles,\n\t\t\toverrides: unlock( select( blockEditorStore ) ).getStyleOverrides(),\n\t\t} ),\n\t\t[]\n\t);\n\tconst { getBlockName } = useSelect( blockEditorStore );\n\n\tconst overridesWithConfig = useMemo( () => {\n\t\tif ( ! overrides?.length ) {\n\t\t\treturn;\n\t\t}\n\t\tconst newOverrides = [];\n\t\tconst overriddenClientIds = [];\n\t\tfor ( const [ , override ] of overrides ) {\n\t\t\tif (\n\t\t\t\toverride?.variation &&\n\t\t\t\toverride?.clientId &&\n\t\t\t\t/*\n\t\t\t\t * Because this component overwrites existing style overrides,\n\t\t\t\t * filter out any overrides that are already present in the store.\n\t\t\t\t */\n\t\t\t\t! overriddenClientIds.includes( override.clientId )\n\t\t\t) {\n\t\t\t\tconst blockName = getBlockName( override.clientId );\n\t\t\t\tconst configStyles =\n\t\t\t\t\tconfig?.styles?.blocks?.[ blockName ]?.variations?.[\n\t\t\t\t\t\toverride.variation\n\t\t\t\t\t];\n\t\t\t\tif ( configStyles ) {\n\t\t\t\t\tconst variationConfig = {\n\t\t\t\t\t\tsettings: config?.settings,\n\t\t\t\t\t\t// The variation style data is all that is needed to generate\n\t\t\t\t\t\t// the styles for the current application to a block. The variation\n\t\t\t\t\t\t// name is updated to match the instance specific class name.\n\t\t\t\t\t\tstyles: {\n\t\t\t\t\t\t\tblocks: {\n\t\t\t\t\t\t\t\t[ blockName ]: {\n\t\t\t\t\t\t\t\t\tvariations: {\n\t\t\t\t\t\t\t\t\t\t[ `${ override.variation }-${ override.clientId }` ]:\n\t\t\t\t\t\t\t\t\t\t\tconfigStyles,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t};\n\t\t\t\t\tconst blockSelectors = getBlockSelectors(\n\t\t\t\t\t\tgetBlockTypes(),\n\t\t\t\t\t\tgetBlockStyles,\n\t\t\t\t\t\toverride.clientId\n\t\t\t\t\t);\n\t\t\t\t\tconst hasBlockGapSupport = false;\n\t\t\t\t\tconst hasFallbackGapSupport = true;\n\t\t\t\t\tconst disableLayoutStyles = true;\n\t\t\t\t\tconst disableRootPadding = true;\n\t\t\t\t\tconst variationStyles = toStyles(\n\t\t\t\t\t\tvariationConfig,\n\t\t\t\t\t\tblockSelectors,\n\t\t\t\t\t\thasBlockGapSupport,\n\t\t\t\t\t\thasFallbackGapSupport,\n\t\t\t\t\t\tdisableLayoutStyles,\n\t\t\t\t\t\tdisableRootPadding,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tblockGap: false,\n\t\t\t\t\t\t\tblockStyles: true,\n\t\t\t\t\t\t\tlayoutStyles: false,\n\t\t\t\t\t\t\tmarginReset: false,\n\t\t\t\t\t\t\tpresets: false,\n\t\t\t\t\t\t\trootPadding: false,\n\t\t\t\t\t\t\tvariationStyles: true,\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t\t\tnewOverrides.push( {\n\t\t\t\t\t\tid: `${ override.variation }-${ override.clientId }`,\n\t\t\t\t\t\tcss: variationStyles,\n\t\t\t\t\t\t__unstableType: 'variation',\n\t\t\t\t\t\tvariation: override.variation,\n\t\t\t\t\t\t// The clientId will be stored with the override and used to ensure\n\t\t\t\t\t\t// the order of overrides matches the order of blocks so that the\n\t\t\t\t\t\t// correct CSS cascade is maintained.\n\t\t\t\t\t\tclientId: override.clientId,\n\t\t\t\t\t} );\n\t\t\t\t\toverriddenClientIds.push( override.clientId );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn newOverrides;\n\t}, [ config, overrides, getBlockStyles, getBlockName ] );\n\n\tif ( ! overridesWithConfig || ! overridesWithConfig.length ) {\n\t\treturn;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ overridesWithConfig.map( ( override ) => (\n\t\t\t\t<OverrideStyles key={ override.id } override={ override } />\n\t\t\t) ) }\n\t\t</>\n\t);\n}\n\n/**\n * Retrieves any variation styles data and resolves any referenced values.\n *\n * @param {Object}    globalStyles A complete global styles object, containing settings and styles.\n * @param {string}    name         The name of the desired block type.\n * @param {variation} variation    The of the block style variation to retrieve data for.\n *\n * @return {Object|undefined} The global styles data for the specified variation.\n */\nexport function getVariationStylesWithRefValues(\n\tglobalStyles,\n\tname,\n\tvariation\n) {\n\tif ( ! globalStyles?.styles?.blocks?.[ name ]?.variations?.[ variation ] ) {\n\t\treturn;\n\t}\n\n\t// Helper to recursively look for `ref` values to resolve.\n\tconst replaceRefs = ( variationStyles ) => {\n\t\tObject.keys( variationStyles ).forEach( ( key ) => {\n\t\t\tconst value = variationStyles[ key ];\n\n\t\t\t// Only process objects.\n\t\t\tif ( typeof value === 'object' && value !== null ) {\n\t\t\t\t// Process `ref` value if present.\n\t\t\t\tif ( value.ref !== undefined ) {\n\t\t\t\t\tif (\n\t\t\t\t\t\ttypeof value.ref !== 'string' ||\n\t\t\t\t\t\tvalue.ref.trim() === ''\n\t\t\t\t\t) {\n\t\t\t\t\t\t// Remove invalid ref.\n\t\t\t\t\t\tdelete variationStyles[ key ];\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Resolve `ref` value.\n\t\t\t\t\t\tconst refValue = getValueFromObjectPath(\n\t\t\t\t\t\t\tglobalStyles,\n\t\t\t\t\t\t\tvalue.ref\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tif ( refValue ) {\n\t\t\t\t\t\t\tvariationStyles[ key ] = refValue;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tdelete variationStyles[ key ];\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// Recursively resolve `ref` values in nested objects.\n\t\t\t\t\treplaceRefs( value );\n\n\t\t\t\t\t// After recursion, if value is empty due to explicitly\n\t\t\t\t\t// `undefined` ref value, remove it.\n\t\t\t\t\tif ( Object.keys( value ).length === 0 ) {\n\t\t\t\t\t\tdelete variationStyles[ key ];\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t};\n\n\t// Deep clone variation node to avoid mutating it within global styles and losing refs.\n\tconst styles = JSON.parse(\n\t\tJSON.stringify(\n\t\t\tglobalStyles.styles.blocks[ name ].variations[ variation ]\n\t\t)\n\t);\n\treplaceRefs( styles );\n\n\treturn styles;\n}\n\nfunction useBlockStyleVariation( name, variation, clientId ) {\n\t// Prefer global styles data in GlobalStylesContext, which are available\n\t// if in the site editor. Otherwise fall back to whatever is in the\n\t// editor settings and available in the post editor.\n\tconst { merged: mergedConfig } = useContext( GlobalStylesContext );\n\tconst { globalSettings, globalStyles } = useSelect( ( select ) => {\n\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\treturn {\n\t\t\tglobalSettings: settings.__experimentalFeatures,\n\t\t\tglobalStyles: settings[ globalStylesDataKey ],\n\t\t};\n\t}, [] );\n\n\treturn useMemo( () => {\n\t\tconst variationStyles = getVariationStylesWithRefValues(\n\t\t\t{\n\t\t\t\tsettings: mergedConfig?.settings ?? globalSettings,\n\t\t\t\tstyles: mergedConfig?.styles ?? globalStyles,\n\t\t\t},\n\t\t\tname,\n\t\t\tvariation\n\t\t);\n\n\t\treturn {\n\t\t\tsettings: mergedConfig?.settings ?? globalSettings,\n\t\t\t// The variation style data is all that is needed to generate\n\t\t\t// the styles for the current application to a block. The variation\n\t\t\t// name is updated to match the instance specific class name.\n\t\t\tstyles: {\n\t\t\t\tblocks: {\n\t\t\t\t\t[ name ]: {\n\t\t\t\t\t\tvariations: {\n\t\t\t\t\t\t\t[ `${ variation }-${ clientId }` ]: variationStyles,\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t}, [\n\t\tmergedConfig,\n\t\tglobalSettings,\n\t\tglobalStyles,\n\t\tvariation,\n\t\tclientId,\n\t\tname,\n\t] );\n}\n\n// Rather than leveraging `useInstanceId` here, the `clientId` is used.\n// This is so that the variation style override's ID is predictable\n// when the order of applied style variations changes.\nfunction useBlockProps( { name, className, clientId } ) {\n\tconst { getBlockStyles } = useSelect( blocksStore );\n\n\tconst registeredStyles = getBlockStyles( name );\n\tconst variation = getVariationNameFromClass( className, registeredStyles );\n\tconst variationClass = `${ VARIATION_PREFIX }${ variation }-${ clientId }`;\n\n\tconst { settings, styles } = useBlockStyleVariation(\n\t\tname,\n\t\tvariation,\n\t\tclientId\n\t);\n\n\tconst variationStyles = useMemo( () => {\n\t\tif ( ! variation ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst variationConfig = { settings, styles };\n\t\tconst blockSelectors = getBlockSelectors(\n\t\t\tgetBlockTypes(),\n\t\t\tgetBlockStyles,\n\t\t\tclientId\n\t\t);\n\t\tconst hasBlockGapSupport = false;\n\t\tconst hasFallbackGapSupport = true;\n\t\tconst disableLayoutStyles = true;\n\t\tconst disableRootPadding = true;\n\n\t\treturn toStyles(\n\t\t\tvariationConfig,\n\t\t\tblockSelectors,\n\t\t\thasBlockGapSupport,\n\t\t\thasFallbackGapSupport,\n\t\t\tdisableLayoutStyles,\n\t\t\tdisableRootPadding,\n\t\t\t{\n\t\t\t\tblockGap: false,\n\t\t\t\tblockStyles: true,\n\t\t\t\tlayoutStyles: false,\n\t\t\t\tmarginReset: false,\n\t\t\t\tpresets: false,\n\t\t\t\trootPadding: false,\n\t\t\t\tvariationStyles: true,\n\t\t\t}\n\t\t);\n\t}, [ variation, settings, styles, getBlockStyles, clientId ] );\n\n\tuseStyleOverride( {\n\t\tid: `variation-${ clientId }`,\n\t\tcss: variationStyles,\n\t\t__unstableType: 'variation',\n\t\tvariation,\n\t\t// The clientId will be stored with the override and used to ensure\n\t\t// the order of overrides matches the order of blocks so that the\n\t\t// correct CSS cascade is maintained.\n\t\tclientId,\n\t} );\n\n\treturn variation ? { className: variationClass } : {};\n}\n\nexport default {\n\thasSupport: () => true,\n\tattributeKeys: [ 'className' ],\n\tisMatch: ( { className } ) => getVariationMatches( className ).length > 0,\n\tuseBlockProps,\n};\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "13.0.4",
+	"version": "13.0.5",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "85486692a3e48b7d863226cf895a21d787434921"
+	"gitHead": "38063ae466e1b62d400b910136757a4cafdbe7fa"
 }

package/src/components/global-styles/use-global-styles-output.js

@@ -656,7 +656,7 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 						}
 						const variationSelector =
 							blockSelectors[ blockName ]
-								.styleVariationSelectors?.[ variationName ];
+								?.styleVariationSelectors?.[ variationName ];
 
 						// Process the variation's inner element styles.
 						// This comes before the inner block styles so the
@@ -685,18 +685,18 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 								const variationBlockSelector = scopeSelector(
 									variationSelector,
 									blockSelectors[ variationBlockName ]
-										.selector
+										?.selector
 								);
 								const variationDuotoneSelector = scopeSelector(
 									variationSelector,
 									blockSelectors[ variationBlockName ]
-										.duotoneSelector
+										?.duotoneSelector
 								);
 								const variationFeatureSelectors =
 									scopeFeatureSelectors(
 										variationSelector,
 										blockSelectors[ variationBlockName ]
-											.featureSelectors
+											?.featureSelectors
 									);
 
 								const variationBlockStyleNodes =
@@ -713,10 +713,10 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 									featureSelectors: variationFeatureSelectors,
 									fallbackGapValue:
 										blockSelectors[ variationBlockName ]
-											.fallbackGapValue,
+											?.fallbackGapValue,
 									hasLayoutSupport:
 										blockSelectors[ variationBlockName ]
-											.hasLayoutSupport,
+											?.hasLayoutSupport,
 									styles: variationBlockStyleNodes,
 								} );
 
@@ -924,8 +924,8 @@ export const toStyles = (
 			ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) }
 				.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
 				.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }
-				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) { padding-right: 0; padding-left: 0; }
-				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) > .alignfull { margin-left: 0; margin-right: 0;
+				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }
+				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0;
 				`;
 		}
 

package/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,77 @@ 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.
+ */
+export 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 );
+
+					// After recursion, if value is empty due to explicitly
+					// `undefined` ref value, remove it.
+					if ( Object.keys( value ).length === 0 ) {
+						delete variationStyles[ key ];
+					}
+				}
+			}
+		} );
+	};
+
+	// 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 +266,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,

package/src/hooks/test/get-variation-styles-with-ref-values.js

@@ -0,0 +1,91 @@
+/**
+ * Internal dependencies
+ */
+import { getVariationStylesWithRefValues } from '../block-style-variation';
+
+describe( 'getVariationStylesWithRefValues', () => {
+	it( 'should resolve ref values correctly', () => {
+		const globalStyles = {
+			styles: {
+				color: { background: 'red' },
+				blocks: {
+					'core/heading': {
+						color: { text: 'blue' },
+					},
+					'core/group': {
+						variations: {
+							custom: {
+								color: {
+									text: { ref: 'styles.does-not-exist' },
+									background: {
+										ref: 'styles.color.background',
+									},
+								},
+								blocks: {
+									'core/heading': {
+										color: {
+											text: {
+												ref: 'styles.blocks.core/heading.color.text',
+											},
+											background: { ref: '' },
+										},
+									},
+								},
+								elements: {
+									link: {
+										color: {
+											text: {
+												ref: 'styles.elements.link.color.text',
+											},
+											background: { ref: undefined },
+										},
+										':hover': {
+											color: {
+												text: {
+													ref: 'styles.elements.link.:hover.color.text',
+												},
+											},
+										},
+									},
+								},
+							},
+						},
+					},
+				},
+				elements: {
+					link: {
+						color: { text: 'green' },
+						':hover': {
+							color: { text: 'yellow' },
+						},
+					},
+				},
+			},
+		};
+
+		expect(
+			getVariationStylesWithRefValues(
+				globalStyles,
+				'core/group',
+				'custom'
+			)
+		).toEqual( {
+			color: { background: 'red' },
+			blocks: {
+				'core/heading': {
+					color: { text: 'blue' },
+				},
+			},
+			elements: {
+				link: {
+					color: {
+						text: 'green',
+					},
+					':hover': {
+						color: { text: 'yellow' },
+					},
+				},
+			},
+		} );
+	} );
+} );