@wordpress/block-editor 15.6.0 → 15.6.1-next.36001005c.0

package/build/components/global-styles/utils.js

@@ -28,154 +28,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var utils_exports = {};
 __export(utils_exports, {
-  PRESET_METADATA: () => PRESET_METADATA,
-  ROOT_BLOCK_SELECTOR: () => ROOT_BLOCK_SELECTOR,
-  ROOT_CSS_PROPERTIES_SELECTOR: () => ROOT_CSS_PROPERTIES_SELECTOR,
-  STYLE_PATH_TO_CSS_VAR_INFIX: () => STYLE_PATH_TO_CSS_VAR_INFIX,
-  STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE: () => STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE,
-  appendToSelector: () => appendToSelector,
   areGlobalStyleConfigsEqual: () => areGlobalStyleConfigsEqual,
-  getBlockStyleVariationSelector: () => getBlockStyleVariationSelector,
-  getPresetVariableFromValue: () => getPresetVariableFromValue,
-  getResolvedRefValue: () => getResolvedRefValue,
-  getResolvedThemeFilePath: () => getResolvedThemeFilePath,
-  getResolvedValue: () => getResolvedValue,
-  getValueFromVariable: () => getValueFromVariable,
-  scopeFeatureSelectors: () => scopeFeatureSelectors,
   scopeSelector: () => scopeSelector,
   useToolsPanelDropdownMenuProps: () => useToolsPanelDropdownMenuProps
 });
 module.exports = __toCommonJS(utils_exports);
 var import_es6 = __toESM(require("fast-deep-equal/es6"));
 var import_compose = require("@wordpress/compose");
-var import_style_engine = require("@wordpress/style-engine");
-var import_typography_utils = require("./typography-utils");
-var import_object = require("../../utils/object");
-const ROOT_BLOCK_SELECTOR = "body";
-const ROOT_CSS_PROPERTIES_SELECTOR = ":root";
-const PRESET_METADATA = [
-  {
-    path: ["color", "palette"],
-    valueKey: "color",
-    cssVarInfix: "color",
-    classes: [
-      { classSuffix: "color", propertyName: "color" },
-      {
-        classSuffix: "background-color",
-        propertyName: "background-color"
-      },
-      {
-        classSuffix: "border-color",
-        propertyName: "border-color"
-      }
-    ]
-  },
-  {
-    path: ["color", "gradients"],
-    valueKey: "gradient",
-    cssVarInfix: "gradient",
-    classes: [
-      {
-        classSuffix: "gradient-background",
-        propertyName: "background"
-      }
-    ]
-  },
-  {
-    path: ["color", "duotone"],
-    valueKey: "colors",
-    cssVarInfix: "duotone",
-    valueFunc: ({ slug }) => `url( '#wp-duotone-${slug}' )`,
-    classes: []
-  },
-  {
-    path: ["shadow", "presets"],
-    valueKey: "shadow",
-    cssVarInfix: "shadow",
-    classes: []
-  },
-  {
-    path: ["typography", "fontSizes"],
-    valueFunc: (preset, settings) => (0, import_typography_utils.getTypographyFontSizeValue)(preset, settings),
-    valueKey: "size",
-    cssVarInfix: "font-size",
-    classes: [{ classSuffix: "font-size", propertyName: "font-size" }]
-  },
-  {
-    path: ["typography", "fontFamilies"],
-    valueKey: "fontFamily",
-    cssVarInfix: "font-family",
-    classes: [
-      { classSuffix: "font-family", propertyName: "font-family" }
-    ]
-  },
-  {
-    path: ["spacing", "spacingSizes"],
-    valueKey: "size",
-    cssVarInfix: "spacing",
-    classes: []
-  },
-  {
-    path: ["border", "radiusSizes"],
-    valueKey: "size",
-    cssVarInfix: "border-radius",
-    classes: []
-  }
-];
-const STYLE_PATH_TO_CSS_VAR_INFIX = {
-  "color.background": "color",
-  "color.text": "color",
-  "filter.duotone": "duotone",
-  "elements.link.color.text": "color",
-  "elements.link.:hover.color.text": "color",
-  "elements.link.typography.fontFamily": "font-family",
-  "elements.link.typography.fontSize": "font-size",
-  "elements.button.color.text": "color",
-  "elements.button.color.background": "color",
-  "elements.caption.color.text": "color",
-  "elements.button.typography.fontFamily": "font-family",
-  "elements.button.typography.fontSize": "font-size",
-  "elements.heading.color": "color",
-  "elements.heading.color.background": "color",
-  "elements.heading.typography.fontFamily": "font-family",
-  "elements.heading.gradient": "gradient",
-  "elements.heading.color.gradient": "gradient",
-  "elements.h1.color": "color",
-  "elements.h1.color.background": "color",
-  "elements.h1.typography.fontFamily": "font-family",
-  "elements.h1.color.gradient": "gradient",
-  "elements.h2.color": "color",
-  "elements.h2.color.background": "color",
-  "elements.h2.typography.fontFamily": "font-family",
-  "elements.h2.color.gradient": "gradient",
-  "elements.h3.color": "color",
-  "elements.h3.color.background": "color",
-  "elements.h3.typography.fontFamily": "font-family",
-  "elements.h3.color.gradient": "gradient",
-  "elements.h4.color": "color",
-  "elements.h4.color.background": "color",
-  "elements.h4.typography.fontFamily": "font-family",
-  "elements.h4.color.gradient": "gradient",
-  "elements.h5.color": "color",
-  "elements.h5.color.background": "color",
-  "elements.h5.typography.fontFamily": "font-family",
-  "elements.h5.color.gradient": "gradient",
-  "elements.h6.color": "color",
-  "elements.h6.color.background": "color",
-  "elements.h6.typography.fontFamily": "font-family",
-  "elements.h6.color.gradient": "gradient",
-  "color.gradient": "gradient",
-  shadow: "shadow",
-  "typography.fontSize": "font-size",
-  "typography.fontFamily": "font-family"
-};
-const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
-  "color.background": "backgroundColor",
-  "color.text": "textColor",
-  "color.gradient": "gradient",
-  "typography.fontSize": "fontSize",
-  "typography.fontFamily": "fontFamily"
-};
 function useToolsPanelDropdownMenuProps() {
   const isMobile = (0, import_compose.useViewportMatch)("medium", "<");
   return !isMobile ? {
@@ -186,143 +45,6 @@ function useToolsPanelDropdownMenuProps() {
     }
   } : {};
 }
-function findInPresetsBy(features, blockName, presetPath, presetProperty, presetValueValue) {
-  const orderedPresetsByOrigin = [
-    (0, import_object.getValueFromObjectPath)(features, [
-      "blocks",
-      blockName,
-      ...presetPath
-    ]),
-    (0, import_object.getValueFromObjectPath)(features, presetPath)
-  ];
-  for (const presetByOrigin of orderedPresetsByOrigin) {
-    if (presetByOrigin) {
-      const origins = ["custom", "theme", "default"];
-      for (const origin of origins) {
-        const presets = presetByOrigin[origin];
-        if (presets) {
-          const presetObject = presets.find(
-            (preset) => preset[presetProperty] === presetValueValue
-          );
-          if (presetObject) {
-            if (presetProperty === "slug") {
-              return presetObject;
-            }
-            const highestPresetObjectWithSameSlug = findInPresetsBy(
-              features,
-              blockName,
-              presetPath,
-              "slug",
-              presetObject.slug
-            );
-            if (highestPresetObjectWithSameSlug[presetProperty] === presetObject[presetProperty]) {
-              return presetObject;
-            }
-            return void 0;
-          }
-        }
-      }
-    }
-  }
-}
-function getPresetVariableFromValue(features, blockName, variableStylePath, presetPropertyValue) {
-  if (!presetPropertyValue) {
-    return presetPropertyValue;
-  }
-  const cssVarInfix = STYLE_PATH_TO_CSS_VAR_INFIX[variableStylePath];
-  const metadata = PRESET_METADATA.find(
-    (data) => data.cssVarInfix === cssVarInfix
-  );
-  if (!metadata) {
-    return presetPropertyValue;
-  }
-  const { valueKey, path } = metadata;
-  const presetObject = findInPresetsBy(
-    features,
-    blockName,
-    path,
-    valueKey,
-    presetPropertyValue
-  );
-  if (!presetObject) {
-    return presetPropertyValue;
-  }
-  return `var:preset|${cssVarInfix}|${presetObject.slug}`;
-}
-function getValueFromPresetVariable(features, blockName, variable, [presetType, slug]) {
-  const metadata = PRESET_METADATA.find(
-    (data) => data.cssVarInfix === presetType
-  );
-  if (!metadata) {
-    return variable;
-  }
-  const presetObject = findInPresetsBy(
-    features.settings,
-    blockName,
-    metadata.path,
-    "slug",
-    slug
-  );
-  if (presetObject) {
-    const { valueKey } = metadata;
-    const result = presetObject[valueKey];
-    return getValueFromVariable(features, blockName, result);
-  }
-  return variable;
-}
-function getValueFromCustomVariable(features, blockName, variable, path) {
-  const result = (0, import_object.getValueFromObjectPath)(features.settings, [
-    "blocks",
-    blockName,
-    "custom",
-    ...path
-  ]) ?? (0, import_object.getValueFromObjectPath)(features.settings, ["custom", ...path]);
-  if (!result) {
-    return variable;
-  }
-  return getValueFromVariable(features, blockName, result);
-}
-function getValueFromVariable(features, blockName, variable) {
-  if (!variable || typeof variable !== "string") {
-    if (typeof variable?.ref === "string") {
-      variable = (0, import_object.getValueFromObjectPath)(features, variable.ref);
-      if (!variable || !!variable?.ref) {
-        return variable;
-      }
-    } else {
-      return variable;
-    }
-  }
-  const USER_VALUE_PREFIX = "var:";
-  const THEME_VALUE_PREFIX = "var(--wp--";
-  const THEME_VALUE_SUFFIX = ")";
-  let parsedVar;
-  if (variable.startsWith(USER_VALUE_PREFIX)) {
-    parsedVar = variable.slice(USER_VALUE_PREFIX.length).split("|");
-  } else if (variable.startsWith(THEME_VALUE_PREFIX) && variable.endsWith(THEME_VALUE_SUFFIX)) {
-    parsedVar = variable.slice(THEME_VALUE_PREFIX.length, -THEME_VALUE_SUFFIX.length).split("--");
-  } else {
-    return variable;
-  }
-  const [type, ...path] = parsedVar;
-  if (type === "preset") {
-    return getValueFromPresetVariable(
-      features,
-      blockName,
-      variable,
-      path
-    );
-  }
-  if (type === "custom") {
-    return getValueFromCustomVariable(
-      features,
-      blockName,
-      variable,
-      path
-    );
-  }
-  return variable;
-}
 function scopeSelector(scope, selector) {
   if (!scope || !selector) {
     return selector;
@@ -337,114 +59,15 @@ function scopeSelector(scope, selector) {
   });
   return selectorsScoped.join(", ");
 }
-function scopeFeatureSelectors(scope, selectors) {
-  if (!scope || !selectors) {
-    return;
-  }
-  const featureSelectors = {};
-  Object.entries(selectors).forEach(([feature, selector]) => {
-    if (typeof selector === "string") {
-      featureSelectors[feature] = scopeSelector(scope, selector);
-    }
-    if (typeof selector === "object") {
-      featureSelectors[feature] = {};
-      Object.entries(selector).forEach(
-        ([subfeature, subfeatureSelector]) => {
-          featureSelectors[feature][subfeature] = scopeSelector(
-            scope,
-            subfeatureSelector
-          );
-        }
-      );
-    }
-  });
-  return featureSelectors;
-}
-function appendToSelector(selector, toAppend) {
-  if (!selector.includes(",")) {
-    return selector + toAppend;
-  }
-  const selectors = selector.split(",");
-  const newSelectors = selectors.map((sel) => sel + toAppend);
-  return newSelectors.join(",");
-}
 function areGlobalStyleConfigsEqual(original, variation) {
   if (typeof original !== "object" || typeof variation !== "object") {
     return original === variation;
   }
   return (0, import_es6.default)(original?.styles, variation?.styles) && (0, import_es6.default)(original?.settings, variation?.settings);
 }
-function getBlockStyleVariationSelector(variation, blockSelector) {
-  const variationClass = `.is-style-${variation}`;
-  if (!blockSelector) {
-    return variationClass;
-  }
-  const ancestorRegex = /((?::\([^)]+\))?\s*)([^\s:]+)/;
-  const addVariationClass = (_match, group1, group2) => {
-    return group1 + group2 + variationClass;
-  };
-  const result = blockSelector.split(",").map((part) => part.replace(ancestorRegex, addVariationClass));
-  return result.join(",");
-}
-function getResolvedThemeFilePath(file, themeFileURIs) {
-  if (!file || !themeFileURIs || !Array.isArray(themeFileURIs)) {
-    return file;
-  }
-  const uri = themeFileURIs.find(
-    (themeFileUri) => themeFileUri?.name === file
-  );
-  if (!uri?.href) {
-    return file;
-  }
-  return uri?.href;
-}
-function getResolvedRefValue(ruleValue, tree) {
-  if (!ruleValue || !tree) {
-    return ruleValue;
-  }
-  if (typeof ruleValue !== "string" && ruleValue?.ref) {
-    const resolvedRuleValue = (0, import_style_engine.getCSSValueFromRawStyle)(
-      (0, import_object.getValueFromObjectPath)(tree, ruleValue.ref)
-    );
-    if (resolvedRuleValue?.ref) {
-      return void 0;
-    }
-    if (resolvedRuleValue === void 0) {
-      return ruleValue;
-    }
-    return resolvedRuleValue;
-  }
-  return ruleValue;
-}
-function getResolvedValue(ruleValue, tree) {
-  if (!ruleValue || !tree) {
-    return ruleValue;
-  }
-  const resolvedValue = getResolvedRefValue(ruleValue, tree);
-  if (resolvedValue?.url) {
-    resolvedValue.url = getResolvedThemeFilePath(
-      resolvedValue.url,
-      tree?._links?.["wp:theme-file"]
-    );
-  }
-  return resolvedValue;
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  PRESET_METADATA,
-  ROOT_BLOCK_SELECTOR,
-  ROOT_CSS_PROPERTIES_SELECTOR,
-  STYLE_PATH_TO_CSS_VAR_INFIX,
-  STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE,
-  appendToSelector,
   areGlobalStyleConfigsEqual,
-  getBlockStyleVariationSelector,
-  getPresetVariableFromValue,
-  getResolvedRefValue,
-  getResolvedThemeFilePath,
-  getResolvedValue,
-  getValueFromVariable,
-  scopeFeatureSelectors,
   scopeSelector,
   useToolsPanelDropdownMenuProps
 });

package/build/components/global-styles/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/global-styles/utils.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport { getCSSValueFromRawStyle } from '@wordpress/style-engine';\n\n/**\n * Internal dependencies\n */\nimport { getTypographyFontSizeValue } from './typography-utils';\nimport { getValueFromObjectPath } from '../../utils/object';\n\n/* Supporting data. */\nexport const ROOT_BLOCK_SELECTOR = 'body';\nexport const ROOT_CSS_PROPERTIES_SELECTOR = ':root';\n\nexport const PRESET_METADATA = [\n\t{\n\t\tpath: [ 'color', 'palette' ],\n\t\tvalueKey: 'color',\n\t\tcssVarInfix: 'color',\n\t\tclasses: [\n\t\t\t{ classSuffix: 'color', propertyName: 'color' },\n\t\t\t{\n\t\t\t\tclassSuffix: 'background-color',\n\t\t\t\tpropertyName: 'background-color',\n\t\t\t},\n\t\t\t{\n\t\t\t\tclassSuffix: 'border-color',\n\t\t\t\tpropertyName: 'border-color',\n\t\t\t},\n\t\t],\n\t},\n\t{\n\t\tpath: [ 'color', 'gradients' ],\n\t\tvalueKey: 'gradient',\n\t\tcssVarInfix: 'gradient',\n\t\tclasses: [\n\t\t\t{\n\t\t\t\tclassSuffix: 'gradient-background',\n\t\t\t\tpropertyName: 'background',\n\t\t\t},\n\t\t],\n\t},\n\t{\n\t\tpath: [ 'color', 'duotone' ],\n\t\tvalueKey: 'colors',\n\t\tcssVarInfix: 'duotone',\n\t\tvalueFunc: ( { slug } ) => `url( '#wp-duotone-${ slug }' )`,\n\t\tclasses: [],\n\t},\n\t{\n\t\tpath: [ 'shadow', 'presets' ],\n\t\tvalueKey: 'shadow',\n\t\tcssVarInfix: 'shadow',\n\t\tclasses: [],\n\t},\n\t{\n\t\tpath: [ 'typography', 'fontSizes' ],\n\t\tvalueFunc: ( preset, settings ) =>\n\t\t\tgetTypographyFontSizeValue( preset, settings ),\n\t\tvalueKey: 'size',\n\t\tcssVarInfix: 'font-size',\n\t\tclasses: [ { classSuffix: 'font-size', propertyName: 'font-size' } ],\n\t},\n\t{\n\t\tpath: [ 'typography', 'fontFamilies' ],\n\t\tvalueKey: 'fontFamily',\n\t\tcssVarInfix: 'font-family',\n\t\tclasses: [\n\t\t\t{ classSuffix: 'font-family', propertyName: 'font-family' },\n\t\t],\n\t},\n\t{\n\t\tpath: [ 'spacing', 'spacingSizes' ],\n\t\tvalueKey: 'size',\n\t\tcssVarInfix: 'spacing',\n\t\tclasses: [],\n\t},\n\t{\n\t\tpath: [ 'border', 'radiusSizes' ],\n\t\tvalueKey: 'size',\n\t\tcssVarInfix: 'border-radius',\n\t\tclasses: [],\n\t},\n];\n\nexport const STYLE_PATH_TO_CSS_VAR_INFIX = {\n\t'color.background': 'color',\n\t'color.text': 'color',\n\t'filter.duotone': 'duotone',\n\t'elements.link.color.text': 'color',\n\t'elements.link.:hover.color.text': 'color',\n\t'elements.link.typography.fontFamily': 'font-family',\n\t'elements.link.typography.fontSize': 'font-size',\n\t'elements.button.color.text': 'color',\n\t'elements.button.color.background': 'color',\n\t'elements.caption.color.text': 'color',\n\t'elements.button.typography.fontFamily': 'font-family',\n\t'elements.button.typography.fontSize': 'font-size',\n\t'elements.heading.color': 'color',\n\t'elements.heading.color.background': 'color',\n\t'elements.heading.typography.fontFamily': 'font-family',\n\t'elements.heading.gradient': 'gradient',\n\t'elements.heading.color.gradient': 'gradient',\n\t'elements.h1.color': 'color',\n\t'elements.h1.color.background': 'color',\n\t'elements.h1.typography.fontFamily': 'font-family',\n\t'elements.h1.color.gradient': 'gradient',\n\t'elements.h2.color': 'color',\n\t'elements.h2.color.background': 'color',\n\t'elements.h2.typography.fontFamily': 'font-family',\n\t'elements.h2.color.gradient': 'gradient',\n\t'elements.h3.color': 'color',\n\t'elements.h3.color.background': 'color',\n\t'elements.h3.typography.fontFamily': 'font-family',\n\t'elements.h3.color.gradient': 'gradient',\n\t'elements.h4.color': 'color',\n\t'elements.h4.color.background': 'color',\n\t'elements.h4.typography.fontFamily': 'font-family',\n\t'elements.h4.color.gradient': 'gradient',\n\t'elements.h5.color': 'color',\n\t'elements.h5.color.background': 'color',\n\t'elements.h5.typography.fontFamily': 'font-family',\n\t'elements.h5.color.gradient': 'gradient',\n\t'elements.h6.color': 'color',\n\t'elements.h6.color.background': 'color',\n\t'elements.h6.typography.fontFamily': 'font-family',\n\t'elements.h6.color.gradient': 'gradient',\n\t'color.gradient': 'gradient',\n\tshadow: 'shadow',\n\t'typography.fontSize': 'font-size',\n\t'typography.fontFamily': 'font-family',\n};\n\n// A static list of block attributes that store global style preset slugs.\nexport const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {\n\t'color.background': 'backgroundColor',\n\t'color.text': 'textColor',\n\t'color.gradient': 'gradient',\n\t'typography.fontSize': 'fontSize',\n\t'typography.fontFamily': 'fontFamily',\n};\n\nexport function useToolsPanelDropdownMenuProps() {\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\treturn ! isMobile\n\t\t? {\n\t\t\t\tpopoverProps: {\n\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)\n\t\t\t\t\toffset: 259,\n\t\t\t\t},\n\t\t  }\n\t\t: {};\n}\n\nfunction findInPresetsBy(\n\tfeatures,\n\tblockName,\n\tpresetPath,\n\tpresetProperty,\n\tpresetValueValue\n) {\n\t// Block presets take priority above root level presets.\n\tconst orderedPresetsByOrigin = [\n\t\tgetValueFromObjectPath( features, [\n\t\t\t'blocks',\n\t\t\tblockName,\n\t\t\t...presetPath,\n\t\t] ),\n\t\tgetValueFromObjectPath( features, presetPath ),\n\t];\n\n\tfor ( const presetByOrigin of orderedPresetsByOrigin ) {\n\t\tif ( presetByOrigin ) {\n\t\t\t// Preset origins ordered by priority.\n\t\t\tconst origins = [ 'custom', 'theme', 'default' ];\n\t\t\tfor ( const origin of origins ) {\n\t\t\t\tconst presets = presetByOrigin[ origin ];\n\t\t\t\tif ( presets ) {\n\t\t\t\t\tconst presetObject = presets.find(\n\t\t\t\t\t\t( preset ) =>\n\t\t\t\t\t\t\tpreset[ presetProperty ] === presetValueValue\n\t\t\t\t\t);\n\t\t\t\t\tif ( presetObject ) {\n\t\t\t\t\t\tif ( presetProperty === 'slug' ) {\n\t\t\t\t\t\t\treturn presetObject;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// If there is a highest priority preset with the same slug but different value the preset we found was overwritten and should be ignored.\n\t\t\t\t\t\tconst highestPresetObjectWithSameSlug = findInPresetsBy(\n\t\t\t\t\t\t\tfeatures,\n\t\t\t\t\t\t\tblockName,\n\t\t\t\t\t\t\tpresetPath,\n\t\t\t\t\t\t\t'slug',\n\t\t\t\t\t\t\tpresetObject.slug\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\thighestPresetObjectWithSameSlug[\n\t\t\t\t\t\t\t\tpresetProperty\n\t\t\t\t\t\t\t] === presetObject[ presetProperty ]\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\treturn presetObject;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn undefined;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\nexport function getPresetVariableFromValue(\n\tfeatures,\n\tblockName,\n\tvariableStylePath,\n\tpresetPropertyValue\n) {\n\tif ( ! presetPropertyValue ) {\n\t\treturn presetPropertyValue;\n\t}\n\n\tconst cssVarInfix = STYLE_PATH_TO_CSS_VAR_INFIX[ variableStylePath ];\n\n\tconst metadata = PRESET_METADATA.find(\n\t\t( data ) => data.cssVarInfix === cssVarInfix\n\t);\n\n\tif ( ! metadata ) {\n\t\t// The property doesn't have preset data\n\t\t// so the value should be returned as it is.\n\t\treturn presetPropertyValue;\n\t}\n\tconst { valueKey, path } = metadata;\n\n\tconst presetObject = findInPresetsBy(\n\t\tfeatures,\n\t\tblockName,\n\t\tpath,\n\t\tvalueKey,\n\t\tpresetPropertyValue\n\t);\n\n\tif ( ! presetObject ) {\n\t\t// Value wasn't found in the presets,\n\t\t// so it must be a custom value.\n\t\treturn presetPropertyValue;\n\t}\n\n\treturn `var:preset|${ cssVarInfix }|${ presetObject.slug }`;\n}\n\nfunction getValueFromPresetVariable(\n\tfeatures,\n\tblockName,\n\tvariable,\n\t[ presetType, slug ]\n) {\n\tconst metadata = PRESET_METADATA.find(\n\t\t( data ) => data.cssVarInfix === presetType\n\t);\n\tif ( ! metadata ) {\n\t\treturn variable;\n\t}\n\n\tconst presetObject = findInPresetsBy(\n\t\tfeatures.settings,\n\t\tblockName,\n\t\tmetadata.path,\n\t\t'slug',\n\t\tslug\n\t);\n\n\tif ( presetObject ) {\n\t\tconst { valueKey } = metadata;\n\t\tconst result = presetObject[ valueKey ];\n\t\treturn getValueFromVariable( features, blockName, result );\n\t}\n\n\treturn variable;\n}\n\nfunction getValueFromCustomVariable( features, blockName, variable, path ) {\n\tconst result =\n\t\tgetValueFromObjectPath( features.settings, [\n\t\t\t'blocks',\n\t\t\tblockName,\n\t\t\t'custom',\n\t\t\t...path,\n\t\t] ) ??\n\t\tgetValueFromObjectPath( features.settings, [ 'custom', ...path ] );\n\tif ( ! result ) {\n\t\treturn variable;\n\t}\n\t// A variable may reference another variable so we need recursion until we find the value.\n\treturn getValueFromVariable( features, blockName, result );\n}\n\n/**\n * Attempts to fetch the value of a theme.json CSS variable.\n *\n * @param {Object}   features  GlobalStylesContext config, e.g., user, base or merged. Represents the theme.json tree.\n * @param {string}   blockName The name of a block as represented in the styles property. E.g., 'root' for root-level, and 'core/${blockName}' for blocks.\n * @param {string|*} variable  An incoming style value. A CSS var value is expected, but it could be any value.\n * @return {string|*|{ref}} The value of the CSS var, if found. If not found, the passed variable argument.\n */\nexport function getValueFromVariable( features, blockName, variable ) {\n\tif ( ! variable || typeof variable !== 'string' ) {\n\t\tif ( typeof variable?.ref === 'string' ) {\n\t\t\tvariable = getValueFromObjectPath( features, variable.ref );\n\t\t\t// Presence of another ref indicates a reference to another dynamic value.\n\t\t\t// Pointing to another dynamic value is not supported.\n\t\t\tif ( ! variable || !! variable?.ref ) {\n\t\t\t\treturn variable;\n\t\t\t}\n\t\t} else {\n\t\t\treturn variable;\n\t\t}\n\t}\n\tconst USER_VALUE_PREFIX = 'var:';\n\tconst THEME_VALUE_PREFIX = 'var(--wp--';\n\tconst THEME_VALUE_SUFFIX = ')';\n\n\tlet parsedVar;\n\n\tif ( variable.startsWith( USER_VALUE_PREFIX ) ) {\n\t\tparsedVar = variable.slice( USER_VALUE_PREFIX.length ).split( '|' );\n\t} else if (\n\t\tvariable.startsWith( THEME_VALUE_PREFIX ) &&\n\t\tvariable.endsWith( THEME_VALUE_SUFFIX )\n\t) {\n\t\tparsedVar = variable\n\t\t\t.slice( THEME_VALUE_PREFIX.length, -THEME_VALUE_SUFFIX.length )\n\t\t\t.split( '--' );\n\t} else {\n\t\t// We don't know how to parse the value: either is raw of uses complex CSS such as `calc(1px * var(--wp--variable) )`\n\t\treturn variable;\n\t}\n\n\tconst [ type, ...path ] = parsedVar;\n\tif ( type === 'preset' ) {\n\t\treturn getValueFromPresetVariable(\n\t\t\tfeatures,\n\t\t\tblockName,\n\t\t\tvariable,\n\t\t\tpath\n\t\t);\n\t}\n\tif ( type === 'custom' ) {\n\t\treturn getValueFromCustomVariable(\n\t\t\tfeatures,\n\t\t\tblockName,\n\t\t\tvariable,\n\t\t\tpath\n\t\t);\n\t}\n\treturn variable;\n}\n\n/**\n * Function that scopes a selector with another one. This works a bit like\n * SCSS nesting except the `&` operator isn't supported.\n *\n * @example\n * ```js\n * const scope = '.a, .b .c';\n * const selector = '> .x, .y';\n * const merged = scopeSelector( scope, selector );\n * // merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'\n * ```\n *\n * @param {string} scope    Selector to scope to.\n * @param {string} selector Original selector.\n *\n * @return {string} Scoped selector.\n */\nexport function scopeSelector( scope, selector ) {\n\tif ( ! scope || ! selector ) {\n\t\treturn selector;\n\t}\n\n\tconst scopes = scope.split( ',' );\n\tconst selectors = selector.split( ',' );\n\n\tconst selectorsScoped = [];\n\tscopes.forEach( ( outer ) => {\n\t\tselectors.forEach( ( inner ) => {\n\t\t\tselectorsScoped.push( `${ outer.trim() } ${ inner.trim() }` );\n\t\t} );\n\t} );\n\n\treturn selectorsScoped.join( ', ' );\n}\n\n/**\n * Scopes a collection of selectors for features and subfeatures.\n *\n * @example\n * ```js\n * const scope = '.custom-scope';\n * const selectors = {\n *     color: '.wp-my-block p',\n *     typography: { fontSize: '.wp-my-block caption' },\n * };\n * const result = scopeFeatureSelector( scope, selectors );\n * // result is {\n * //     color: '.custom-scope .wp-my-block p',\n * //     typography: { fonSize: '.custom-scope .wp-my-block caption' },\n * // }\n * ```\n *\n * @param {string} scope     Selector to scope collection of selectors with.\n * @param {Object} selectors Collection of feature selectors e.g.\n *\n * @return {Object|undefined} Scoped collection of feature selectors.\n */\nexport function scopeFeatureSelectors( scope, selectors ) {\n\tif ( ! scope || ! selectors ) {\n\t\treturn;\n\t}\n\n\tconst featureSelectors = {};\n\n\tObject.entries( selectors ).forEach( ( [ feature, selector ] ) => {\n\t\tif ( typeof selector === 'string' ) {\n\t\t\tfeatureSelectors[ feature ] = scopeSelector( scope, selector );\n\t\t}\n\n\t\tif ( typeof selector === 'object' ) {\n\t\t\tfeatureSelectors[ feature ] = {};\n\n\t\t\tObject.entries( selector ).forEach(\n\t\t\t\t( [ subfeature, subfeatureSelector ] ) => {\n\t\t\t\t\tfeatureSelectors[ feature ][ subfeature ] = scopeSelector(\n\t\t\t\t\t\tscope,\n\t\t\t\t\t\tsubfeatureSelector\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t} );\n\n\treturn featureSelectors;\n}\n\n/**\n * Appends a sub-selector to an existing one.\n *\n * Given the compounded `selector` \"h1, h2, h3\"\n * and the `toAppend` selector \".some-class\" the result will be\n * \"h1.some-class, h2.some-class, h3.some-class\".\n *\n * @param {string} selector Original selector.\n * @param {string} toAppend Selector to append.\n *\n * @return {string} The new selector.\n */\nexport function appendToSelector( selector, toAppend ) {\n\tif ( ! selector.includes( ',' ) ) {\n\t\treturn selector + toAppend;\n\t}\n\tconst selectors = selector.split( ',' );\n\tconst newSelectors = selectors.map( ( sel ) => sel + toAppend );\n\treturn newSelectors.join( ',' );\n}\n\n/**\n * Compares global style variations according to their styles and settings properties.\n *\n * @example\n * ```js\n * const globalStyles = { styles: { typography: { fontSize: '10px' } }, settings: {} };\n * const variation = { styles: { typography: { fontSize: '10000px' } }, settings: {} };\n * const isEqual = areGlobalStyleConfigsEqual( globalStyles, variation );\n * // false\n * ```\n *\n * @param {Object} original  A global styles object.\n * @param {Object} variation A global styles object.\n *\n * @return {boolean} Whether `original` and `variation` match.\n */\nexport function areGlobalStyleConfigsEqual( original, variation ) {\n\tif ( typeof original !== 'object' || typeof variation !== 'object' ) {\n\t\treturn original === variation;\n\t}\n\treturn (\n\t\tfastDeepEqual( original?.styles, variation?.styles ) &&\n\t\tfastDeepEqual( original?.settings, variation?.settings )\n\t);\n}\n\n/**\n * Generates the selector for a block style variation by creating the\n * appropriate CSS class and adding it to the ancestor portion of the block's\n * selector.\n *\n * For example, take the Button block which has a compound selector:\n * `.wp-block-button .wp-block-button__link`. With a variation named 'custom',\n * the class `.is-style-custom` should be added to the `.wp-block-button`\n * ancestor only.\n *\n * This function will take into account comma separated and complex selectors.\n *\n * @param {string} variation     Name for the variation.\n * @param {string} blockSelector CSS selector for the block.\n *\n * @return {string} CSS selector for the block style variation.\n */\nexport function getBlockStyleVariationSelector( variation, blockSelector ) {\n\tconst variationClass = `.is-style-${ variation }`;\n\n\tif ( ! blockSelector ) {\n\t\treturn variationClass;\n\t}\n\n\tconst ancestorRegex = /((?::\\([^)]+\\))?\\s*)([^\\s:]+)/;\n\tconst addVariationClass = ( _match, group1, group2 ) => {\n\t\treturn group1 + group2 + variationClass;\n\t};\n\n\tconst result = blockSelector\n\t\t.split( ',' )\n\t\t.map( ( part ) => part.replace( ancestorRegex, addVariationClass ) );\n\n\treturn result.join( ',' );\n}\n\n/**\n * Looks up a theme file URI based on a relative path.\n *\n * @param {string}        file          A relative path.\n * @param {Array<Object>} themeFileURIs A collection of absolute theme file URIs and their corresponding file paths.\n * @return {string} A resolved theme file URI, if one is found in the themeFileURIs collection.\n */\nexport function getResolvedThemeFilePath( file, themeFileURIs ) {\n\tif ( ! file || ! themeFileURIs || ! Array.isArray( themeFileURIs ) ) {\n\t\treturn file;\n\t}\n\n\tconst uri = themeFileURIs.find(\n\t\t( themeFileUri ) => themeFileUri?.name === file\n\t);\n\n\tif ( ! uri?.href ) {\n\t\treturn file;\n\t}\n\n\treturn uri?.href;\n}\n\n/**\n * Resolves ref values in theme JSON.\n *\n * @param {Object|string} ruleValue A block style value that may contain a reference to a theme.json value.\n * @param {Object}        tree      A theme.json object.\n * @return {*} The resolved value or incoming ruleValue.\n */\nexport function getResolvedRefValue( ruleValue, tree ) {\n\tif ( ! ruleValue || ! tree ) {\n\t\treturn ruleValue;\n\t}\n\n\t/*\n\t * Where the rule value is an object with a 'ref' property pointing\n\t * to a path, this converts that path into the value at that path.\n\t * For example: { \"ref\": \"style.color.background\" } => \"#fff\".\n\t */\n\tif ( typeof ruleValue !== 'string' && ruleValue?.ref ) {\n\t\tconst resolvedRuleValue = getCSSValueFromRawStyle(\n\t\t\tgetValueFromObjectPath( tree, ruleValue.ref )\n\t\t);\n\n\t\t/*\n\t\t * Presence of another ref indicates a reference to another dynamic value.\n\t\t * Pointing to another dynamic value is not supported.\n\t\t */\n\t\tif ( resolvedRuleValue?.ref ) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\tif ( resolvedRuleValue === undefined ) {\n\t\t\treturn ruleValue;\n\t\t}\n\n\t\treturn resolvedRuleValue;\n\t}\n\treturn ruleValue;\n}\n\n/**\n * Resolves ref and relative path values in theme JSON.\n *\n * @param {Object|string} ruleValue A block style value that may contain a reference to a theme.json value.\n * @param {Object}        tree      A theme.json object.\n * @return {*} The resolved value or incoming ruleValue.\n */\nexport function getResolvedValue( ruleValue, tree ) {\n\tif ( ! ruleValue || ! tree ) {\n\t\treturn ruleValue;\n\t}\n\n\t// Resolve ref values.\n\tconst resolvedValue = getResolvedRefValue( ruleValue, tree );\n\n\t// Resolve relative paths.\n\tif ( resolvedValue?.url ) {\n\t\tresolvedValue.url = getResolvedThemeFilePath(\n\t\t\tresolvedValue.url,\n\t\t\ttree?._links?.[ 'wp:theme-file' ]\n\t\t);\n\t}\n\n\treturn resolvedValue;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\n\nexport function useToolsPanelDropdownMenuProps() {\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\treturn ! isMobile\n\t\t? {\n\t\t\t\tpopoverProps: {\n\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)\n\t\t\t\t\toffset: 259,\n\t\t\t\t},\n\t\t  }\n\t\t: {};\n}\n\n/**\n * Function that scopes a selector with another one. This works a bit like\n * SCSS nesting except the `&` operator isn't supported.\n *\n * @example\n * ```js\n * const scope = '.a, .b .c';\n * const selector = '> .x, .y';\n * const merged = scopeSelector( scope, selector );\n * // merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'\n * ```\n *\n * @param {string} scope    Selector to scope to.\n * @param {string} selector Original selector.\n *\n * @return {string} Scoped selector.\n */\nexport function scopeSelector( scope, selector ) {\n\tif ( ! scope || ! selector ) {\n\t\treturn selector;\n\t}\n\n\tconst scopes = scope.split( ',' );\n\tconst selectors = selector.split( ',' );\n\n\tconst selectorsScoped = [];\n\tscopes.forEach( ( outer ) => {\n\t\tselectors.forEach( ( inner ) => {\n\t\t\tselectorsScoped.push( `${ outer.trim() } ${ inner.trim() }` );\n\t\t} );\n\t} );\n\n\treturn selectorsScoped.join( ', ' );\n}\n\n/**\n * Compares global style variations according to their styles and settings properties.\n *\n * @example\n * ```js\n * const globalStyles = { styles: { typography: { fontSize: '10px' } }, settings: {} };\n * const variation = { styles: { typography: { fontSize: '10000px' } }, settings: {} };\n * const isEqual = areGlobalStyleConfigsEqual( globalStyles, variation );\n * // false\n * ```\n *\n * @param {Object} original  A global styles object.\n * @param {Object} variation A global styles object.\n *\n * @return {boolean} Whether `original` and `variation` match.\n */\nexport function areGlobalStyleConfigsEqual( original, variation ) {\n\tif ( typeof original !== 'object' || typeof variation !== 'object' ) {\n\t\treturn original === variation;\n\t}\n\treturn (\n\t\tfastDeepEqual( original?.styles, variation?.styles ) &&\n\t\tfastDeepEqual( original?.settings, variation?.settings )\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,iBAA0B;AAK1B,qBAAiC;AAE1B,SAAS,iCAAiC;AAChD,QAAM,eAAW,iCAAkB,UAAU,GAAI;AACjD,SAAO,CAAE,WACN;AAAA,IACA,cAAc;AAAA,MACb,WAAW;AAAA;AAAA,MAEX,QAAQ;AAAA,IACT;AAAA,EACA,IACA,CAAC;AACL;AAmBO,SAAS,cAAe,OAAO,UAAW;AAChD,MAAK,CAAE,SAAS,CAAE,UAAW;AAC5B,WAAO;AAAA,EACR;AAEA,QAAM,SAAS,MAAM,MAAO,GAAI;AAChC,QAAM,YAAY,SAAS,MAAO,GAAI;AAEtC,QAAM,kBAAkB,CAAC;AACzB,SAAO,QAAS,CAAE,UAAW;AAC5B,cAAU,QAAS,CAAE,UAAW;AAC/B,sBAAgB,KAAM,GAAI,MAAM,KAAK,CAAE,IAAK,MAAM,KAAK,CAAE,EAAG;AAAA,IAC7D,CAAE;AAAA,EACH,CAAE;AAEF,SAAO,gBAAgB,KAAM,IAAK;AACnC;AAkBO,SAAS,2BAA4B,UAAU,WAAY;AACjE,MAAK,OAAO,aAAa,YAAY,OAAO,cAAc,UAAW;AACpE,WAAO,aAAa;AAAA,EACrB;AACA,aACC,WAAAA,SAAe,UAAU,QAAQ,WAAW,MAAO,SACnD,WAAAA,SAAe,UAAU,UAAU,WAAW,QAAS;AAEzD;",
   "names": ["fastDeepEqual"]
 }

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

@@ -27,6 +27,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_blocks = require("@wordpress/blocks");
 var import_data = require("@wordpress/data");
 var import_element = require("@wordpress/element");
+var import_global_styles_engine = require("@wordpress/global-styles-engine");
 var import_global_styles = require("../components/global-styles");
 var import_utils = require("./utils");
 var import_object = require("../utils/object");
@@ -102,16 +103,15 @@ function __unstableBlockStyleVariationOverridesWithConfig({ config }) {
               }
             }
           };
-          const blockSelectors = (0, import_global_styles.getBlockSelectors)(
+          const blockSelectors = (0, import_global_styles_engine.getBlockSelectors)(
             (0, import_blocks.getBlockTypes)(),
-            getBlockStyles,
             override.clientId
           );
           const hasBlockGapSupport = false;
           const hasFallbackGapSupport = true;
           const disableLayoutStyles = true;
           const disableRootPadding = true;
-          const variationStyles = (0, import_global_styles.toStyles)(
+          const variationStyles = (0, import_global_styles_engine.toStyles)(
             variationConfig,
             blockSelectors,
             hasBlockGapSupport,
@@ -245,16 +245,12 @@ function useBlockProps({ name, className, clientId }) {
       return;
     }
     const variationConfig = { settings, styles };
-    const blockSelectors = (0, import_global_styles.getBlockSelectors)(
-      (0, import_blocks.getBlockTypes)(),
-      getBlockStyles,
-      clientId
-    );
+    const blockSelectors = (0, import_global_styles_engine.getBlockSelectors)((0, import_blocks.getBlockTypes)(), clientId);
     const hasBlockGapSupport = false;
     const hasFallbackGapSupport = true;
     const disableLayoutStyles = true;
     const disableRootPadding = true;
-    return (0, import_global_styles.toStyles)(
+    return (0, import_global_styles_engine.toStyles)(
       variationConfig,
       blockSelectors,
       hasBlockGapSupport,
@@ -271,7 +267,7 @@ function useBlockProps({ name, className, clientId }) {
         variationStyles: true
       }
     );
-  }, [variation, settings, styles, getBlockStyles, clientId]);
+  }, [variation, settings, styles, clientId]);
   (0, import_utils.usePrivateStyleOverride)({
     id: `variation-${clientId}`,
     css: variationStyles,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../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 { usePrivateStyleOverride } 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\tusePrivateStyleOverride( 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\tusePrivateStyleOverride( {\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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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { getBlockTypes, store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport { useContext, useMemo } from '@wordpress/element';\nimport { toStyles, getBlockSelectors } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesContext } from '../components/global-styles';\nimport { usePrivateStyleOverride } 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\tusePrivateStyleOverride( 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\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( getBlockTypes(), clientId );\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, clientId ] );\n\n\tusePrivateStyleOverride( {\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2KE;AAxKF,oBAAoD;AACpD,kBAA0B;AAC1B,qBAAoC;AACpC,kCAA4C;AAK5C,2BAAoC;AACpC,mBAAwC;AACxC,oBAAuC;AACvC,mBAA0C;AAC1C,0BAAoC;AACpC,yBAAuB;AAEvB,MAAM,mBAAmB;AAEzB,SAAS,oBAAqB,WAAY;AACzC,MAAK,CAAE,WAAY;AAClB,WAAO,CAAC;AAAA,EACT;AACA,SAAO,UAAU,MAAO,KAAM,EAAE,OAAQ,CAAE,SAAS,SAAU;AAC5D,QAAK,KAAK,WAAY,gBAAiB,GAAI;AAC1C,YAAM,QAAQ,KAAK,MAAO,iBAAiB,MAAO;AAClD,UAAK,UAAU,WAAY;AAC1B,gBAAQ,KAAM,KAAM;AAAA,MACrB;AAAA,IACD;AACA,WAAO;AAAA,EACR,GAAG,CAAC,CAAE;AACP;AAUA,SAAS,0BAA2B,WAAW,mBAAmB,CAAC,GAAI;AAGtE,QAAM,UAAU,oBAAqB,SAAU;AAE/C,MAAK,CAAE,SAAU;AAChB,WAAO;AAAA,EACR;AAEA,aAAY,aAAa,SAAU;AAClC,QAAK,iBAAiB,KAAM,CAAE,UAAW,MAAM,SAAS,SAAU,GAAI;AACrE,aAAO;AAAA,IACR;AAAA,EACD;AACA,SAAO;AACR;AAGA,SAAS,eAAgB,EAAE,SAAS,GAAI;AACvC,4CAAyB,QAAS;AACnC;AAaO,SAAS,iDAAkD,EAAE,OAAO,GAAI;AAC9E,QAAM,EAAE,gBAAgB,UAAU,QAAI;AAAA,IACrC,CAAE,YAAc;AAAA,MACf,gBAAgB,OAAQ,cAAAA,KAAY,EAAE;AAAA,MACtC,eAAW,2BAAQ,OAAQ,aAAAC,KAAiB,CAAE,EAAE,kBAAkB;AAAA,IACnE;AAAA,IACA,CAAC;AAAA,EACF;AACA,QAAM,EAAE,aAAa,QAAI,uBAAW,aAAAA,KAAiB;AAErD,QAAM,0BAAsB,wBAAS,MAAM;AAC1C,QAAK,CAAE,WAAW,QAAS;AAC1B;AAAA,IACD;AACA,UAAM,eAAe,CAAC;AACtB,UAAM,sBAAsB,CAAC;AAC7B,eAAY,CAAE,EAAE,QAAS,KAAK,WAAY;AACzC,UACC,UAAU,aACV,UAAU;AAAA;AAAA;AAAA;AAAA,MAKV,CAAE,oBAAoB,SAAU,SAAS,QAAS,GACjD;AACD,cAAM,YAAY,aAAc,SAAS,QAAS;AAClD,cAAM,eACL,QAAQ,QAAQ,SAAU,SAAU,GAAG,aACtC,SAAS,SACV;AACD,YAAK,cAAe;AACnB,gBAAM,kBAAkB;AAAA,YACvB,UAAU,QAAQ;AAAA;AAAA;AAAA;AAAA,YAIlB,QAAQ;AAAA,cACP,QAAQ;AAAA,gBACP,CAAE,SAAU,GAAG;AAAA,kBACd,YAAY;AAAA,oBACX,CAAE,GAAI,SAAS,SAAU,IAAK,SAAS,QAAS,EAAG,GAClD;AAAA,kBACF;AAAA,gBACD;AAAA,cACD;AAAA,YACD;AAAA,UACD;AACA,gBAAM,qBAAiB;AAAA,gBACtB,6BAAc;AAAA,YACd,SAAS;AAAA,UACV;AACA,gBAAM,qBAAqB;AAC3B,gBAAM,wBAAwB;AAC9B,gBAAM,sBAAsB;AAC5B,gBAAM,qBAAqB;AAC3B,gBAAM,sBAAkB;AAAA,YACvB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,cACC,UAAU;AAAA,cACV,aAAa;AAAA,cACb,cAAc;AAAA,cACd,aAAa;AAAA,cACb,SAAS;AAAA,cACT,aAAa;AAAA,cACb,iBAAiB;AAAA,YAClB;AAAA,UACD;AACA,uBAAa,KAAM;AAAA,YAClB,IAAI,GAAI,SAAS,SAAU,IAAK,SAAS,QAAS;AAAA,YAClD,KAAK;AAAA,YACL,gBAAgB;AAAA,YAChB,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA,YAIpB,UAAU,SAAS;AAAA,UACpB,CAAE;AACF,8BAAoB,KAAM,SAAS,QAAS;AAAA,QAC7C;AAAA,MACD;AAAA,IACD;AACA,WAAO;AAAA,EACR,GAAG,CAAE,QAAQ,WAAW,gBAAgB,YAAa,CAAE;AAEvD,MAAK,CAAE,uBAAuB,CAAE,oBAAoB,QAAS;AAC5D;AAAA,EACD;AAEA,SACC,2EACG,8BAAoB,IAAK,CAAE,aAC5B,4CAAC,kBAAmC,YAAd,SAAS,EAA2B,CACzD,GACH;AAEF;AAWO,SAAS,gCACf,cACA,MACA,WACC;AACD,MAAK,CAAE,cAAc,QAAQ,SAAU,IAAK,GAAG,aAAc,SAAU,GAAI;AAC1E;AAAA,EACD;AAGA,QAAM,cAAc,CAAE,oBAAqB;AAC1C,WAAO,KAAM,eAAgB,EAAE,QAAS,CAAE,QAAS;AAClD,YAAM,QAAQ,gBAAiB,GAAI;AAGnC,UAAK,OAAO,UAAU,YAAY,UAAU,MAAO;AAElD,YAAK,MAAM,QAAQ,QAAY;AAC9B,cACC,OAAO,MAAM,QAAQ,YACrB,MAAM,IAAI,KAAK,MAAM,IACpB;AAED,mBAAO,gBAAiB,GAAI;AAAA,UAC7B,OAAO;AAEN,kBAAM,eAAW;AAAA,cAChB;AAAA,cACA,MAAM;AAAA,YACP;AAEA,gBAAK,UAAW;AACf,8BAAiB,GAAI,IAAI;AAAA,YAC1B,OAAO;AACN,qBAAO,gBAAiB,GAAI;AAAA,YAC7B;AAAA,UACD;AAAA,QACD,OAAO;AAEN,sBAAa,KAAM;AAInB,cAAK,OAAO,KAAM,KAAM,EAAE,WAAW,GAAI;AACxC,mBAAO,gBAAiB,GAAI;AAAA,UAC7B;AAAA,QACD;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH;AAGA,QAAM,SAAS,KAAK;AAAA,IACnB,KAAK;AAAA,MACJ,aAAa,OAAO,OAAQ,IAAK,EAAE,WAAY,SAAU;AAAA,IAC1D;AAAA,EACD;AACA,cAAa,MAAO;AAEpB,SAAO;AACR;AAEA,SAAS,uBAAwB,MAAM,WAAW,UAAW;AAI5D,QAAM,EAAE,QAAQ,aAAa,QAAI,2BAAY,wCAAoB;AACjE,QAAM,EAAE,gBAAgB,aAAa,QAAI,uBAAW,CAAE,WAAY;AACjE,UAAM,WAAW,OAAQ,aAAAA,KAAiB,EAAE,YAAY;AACxD,WAAO;AAAA,MACN,gBAAgB,SAAS;AAAA,MACzB,cAAc,SAAU,uCAAoB;AAAA,IAC7C;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,aAAO,wBAAS,MAAM;AACrB,UAAM,kBAAkB;AAAA,MACvB;AAAA,QACC,UAAU,cAAc,YAAY;AAAA,QACpC,QAAQ,cAAc,UAAU;AAAA,MACjC;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAEA,WAAO;AAAA,MACN,UAAU,cAAc,YAAY;AAAA;AAAA;AAAA;AAAA,MAIpC,QAAQ;AAAA,QACP,QAAQ;AAAA,UACP,CAAE,IAAK,GAAG;AAAA,YACT,YAAY;AAAA,cACX,CAAE,GAAI,SAAU,IAAK,QAAS,EAAG,GAAG;AAAA,YACrC;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,EACD,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AACH;AAKA,SAAS,cAAe,EAAE,MAAM,WAAW,SAAS,GAAI;AACvD,QAAM,EAAE,eAAe,QAAI,uBAAW,cAAAD,KAAY;AAElD,QAAM,mBAAmB,eAAgB,IAAK;AAC9C,QAAM,YAAY,0BAA2B,WAAW,gBAAiB;AACzE,QAAM,iBAAiB,GAAI,gBAAiB,GAAI,SAAU,IAAK,QAAS;AAExE,QAAM,EAAE,UAAU,OAAO,IAAI;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,sBAAkB,wBAAS,MAAM;AACtC,QAAK,CAAE,WAAY;AAClB;AAAA,IACD;AAEA,UAAM,kBAAkB,EAAE,UAAU,OAAO;AAC3C,UAAM,qBAAiB,mDAAmB,6BAAc,GAAG,QAAS;AACpE,UAAM,qBAAqB;AAC3B,UAAM,wBAAwB;AAC9B,UAAM,sBAAsB;AAC5B,UAAM,qBAAqB;AAE3B,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACC,UAAU;AAAA,QACV,aAAa;AAAA,QACb,cAAc;AAAA,QACd,aAAa;AAAA,QACb,SAAS;AAAA,QACT,aAAa;AAAA,QACb,iBAAiB;AAAA,MAClB;AAAA,IACD;AAAA,EACD,GAAG,CAAE,WAAW,UAAU,QAAQ,QAAS,CAAE;AAE7C,4CAAyB;AAAA,IACxB,IAAI,aAAc,QAAS;AAAA,IAC3B,KAAK;AAAA,IACL,gBAAgB;AAAA,IAChB;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,EACD,CAAE;AAEF,SAAO,YAAY,EAAE,WAAW,eAAe,IAAI,CAAC;AACrD;AAEA,IAAO,gCAAQ;AAAA,EACd,YAAY,MAAM;AAAA,EAClB,eAAe,CAAE,WAAY;AAAA,EAC7B,SAAS,CAAE,EAAE,UAAU,MAAO,oBAAqB,SAAU,EAAE,SAAS;AAAA,EACxE;AACD;",
   "names": ["blocksStore", "blockEditorStore"]
 }

package/build/hooks/duotone.js

@@ -40,9 +40,9 @@ var import_blocks = require("@wordpress/blocks");
 var import_compose = require("@wordpress/compose");
 var import_hooks = require("@wordpress/hooks");
 var import_element = require("@wordpress/element");
+var import_global_styles_engine = require("@wordpress/global-styles-engine");
 var import_components = require("../components");
 var import_utils = require("../components/duotone/utils");
-var import_get_block_css_selector = require("../components/global-styles/get-block-css-selector");
 var import_utils2 = require("../components/global-styles/utils");
 var import_utils3 = require("./utils");
 var import_filters_panel = __toESM(require("../components/global-styles/filters-panel"));
@@ -256,10 +256,10 @@ function useBlockProps({ clientId, name, style }) {
         false
       );
       if (experimentalDuotone) {
-        const rootSelector = (0, import_get_block_css_selector.getBlockCSSSelector)(blockType);
+        const rootSelector = (0, import_global_styles_engine.getBlockSelector)(blockType);
         return typeof experimentalDuotone === "string" ? (0, import_utils2.scopeSelector)(rootSelector, experimentalDuotone) : rootSelector;
       }
-      return (0, import_get_block_css_selector.getBlockCSSSelector)(blockType, "filter.duotone", {
+      return (0, import_global_styles_engine.getBlockSelector)(blockType, "filter.duotone", {
         fallback: true
       });
     }