@wordpress/block-editor 11.6.0 → 11.8.0

package/build-module/components/global-styles/use-global-styles-output.js

@@ -8,15 +8,16 @@ import { get, isEmpty, kebabCase, set } from 'lodash';
  * WordPress dependencies
  */
 
-import { __EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY, __EXPERIMENTAL_ELEMENTS as ELEMENTS, getBlockTypes, store as blocksStore } from '@wordpress/blocks';
+import { __EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY, __EXPERIMENTAL_ELEMENTS as ELEMENTS, getBlockSupport, getBlockTypes, store as blocksStore } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
-import { useContext, useMemo } from '@wordpress/element';
+import { renderToString, useContext, useMemo } from '@wordpress/element';
 import { getCSSRules } from '@wordpress/style-engine';
 /**
  * Internal dependencies
  */
 
 import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, scopeSelector } from './utils';
+import { getBlockCSSSelector } from './get-block-css-selector';
 import { getTypographyFontSizeValue } from './typography-utils';
 import { GlobalStylesContext } from './context';
 import { useGlobalSetting } from './hooks';
@@ -134,10 +135,10 @@ function getPresetsSvgFilters() {
   return PRESET_METADATA.filter( // Duotone are the only type of filters for now.
   metadata => metadata.path.at(-1) === 'duotone').flatMap(metadata => {
     const presetByOrigin = get(blockPresets, metadata.path, {});
-    return ['default', 'theme'].filter(origin => presetByOrigin[origin]).flatMap(origin => presetByOrigin[origin].map(preset => createElement(PresetDuotoneFilter, {
+    return ['default', 'theme'].filter(origin => presetByOrigin[origin]).flatMap(origin => presetByOrigin[origin].map(preset => renderToString(createElement(PresetDuotoneFilter, {
       preset: preset,
       key: preset.slug
-    })));
+    })))).join('');
   });
 }
 
@@ -178,6 +179,76 @@ function concatFeatureVariationSelectorString(featureSelector, styleVariationSel
   });
   return combinedSelectors.join(', ');
 }
+/**
+ * Generate style declarations for a block's custom feature and subfeature
+ * selectors.
+ *
+ * NOTE: The passed `styles` object will be mutated by this function.
+ *
+ * @param {Object} selectors Custom selectors object for a block.
+ * @param {Object} styles    A block's styles object.
+ *
+ * @return {Object} Style declarations.
+ */
+
+
+const getFeatureDeclarations = (selectors, styles) => {
+  const declarations = {};
+  Object.entries(selectors).forEach(_ref5 => {
+    let [feature, selector] = _ref5;
+
+    // We're only processing features/subfeatures that have styles.
+    if (feature === 'root' || !(styles !== null && styles !== void 0 && styles[feature])) {
+      return;
+    }
+
+    const isShorthand = typeof selector === 'string'; // If we have a selector object instead of shorthand process it.
+
+    if (!isShorthand) {
+      Object.entries(selector).forEach(_ref6 => {
+        let [subfeature, subfeatureSelector] = _ref6;
+
+        // Don't process root feature selector yet or any
+        // subfeature that doesn't have a style.
+        if (subfeature === 'root' || !(styles !== null && styles !== void 0 && styles[feature][subfeature])) {
+          return;
+        } // Create a temporary styles object and build
+        // declarations for subfeature.
+
+
+        const subfeatureStyles = {
+          [feature]: {
+            [subfeature]: styles[feature][subfeature]
+          }
+        };
+        const newDeclarations = getStylesDeclarations(subfeatureStyles); // Merge new declarations in with any others that
+        // share the same selector.
+
+        declarations[subfeatureSelector] = [...(declarations[subfeatureSelector] || []), ...newDeclarations]; // Remove the subfeature's style now it will be
+        // included under its own selector not the block's.
+
+        delete styles[feature][subfeature];
+      });
+    } // Now subfeatures have been processed and removed, we can
+    // process root, or shorthand, feature selectors.
+
+
+    if (isShorthand || selector.root) {
+      const featureSelector = isShorthand ? selector : selector.root; // Create temporary style object and build declarations for feature.
+
+      const featureStyles = {
+        [feature]: styles[feature]
+      };
+      const newDeclarations = getStylesDeclarations(featureStyles); // Merge new declarations with any others that share the selector.
+
+      declarations[featureSelector] = [...(declarations[featureSelector] || []), ...newDeclarations]; // Remove the feature from the block's styles now as it will be
+      // included under its own selector not the block's.
+
+      delete styles[feature];
+    }
+  });
+  return declarations;
+};
 /**
  * Transform given style tree into a set of style declarations.
  *
@@ -199,13 +270,13 @@ export function getStylesDeclarations() {
   let useRootPaddingAlign = arguments.length > 2 ? arguments[2] : undefined;
   let tree = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
   const isRoot = ROOT_BLOCK_SELECTOR === selector;
-  const output = Object.entries(STYLE_PROPERTY).reduce((declarations, _ref5) => {
+  const output = Object.entries(STYLE_PROPERTY).reduce((declarations, _ref7) => {
     let [key, {
       value,
       properties,
       useEngine,
       rootOnly
-    }] = _ref5;
+    }] = _ref7;
 
     if (rootOnly && !isRoot) {
       return declarations;
@@ -304,7 +375,7 @@ export function getStylesDeclarations() {
  * @return {string} Generated CSS rules for the layout styles.
  */
 
-export function getLayoutStyles(_ref6) {
+export function getLayoutStyles(_ref8) {
   var _style$spacing, _tree$settings2, _tree$settings2$layou, _tree$settings3, _tree$settings3$layou;
 
   let {
@@ -314,7 +385,7 @@ export function getLayoutStyles(_ref6) {
     hasBlockGapSupport,
     hasFallbackGapSupport,
     fallbackGapValue
-  } = _ref6;
+  } = _ref8;
   let ruleset = '';
   let gapValue = hasBlockGapSupport ? getGapCSSValue(style === null || style === void 0 ? void 0 : (_style$spacing = style.spacing) === null || _style$spacing === void 0 ? void 0 : _style$spacing.blockGap) : ''; // Ensure a fallback gap value for the root layout definitions,
   // and use a fallback value if one is provided for the current block.
@@ -328,12 +399,12 @@ export function getLayoutStyles(_ref6) {
   }
 
   if (gapValue && tree !== null && tree !== void 0 && (_tree$settings2 = tree.settings) !== null && _tree$settings2 !== void 0 && (_tree$settings2$layou = _tree$settings2.layout) !== null && _tree$settings2$layou !== void 0 && _tree$settings2$layou.definitions) {
-    Object.values(tree.settings.layout.definitions).forEach(_ref7 => {
+    Object.values(tree.settings.layout.definitions).forEach(_ref9 => {
       let {
         className,
         name,
         spacingStyles
-      } = _ref7;
+      } = _ref9;
 
       // Allow outputting fallback gap styles for flex layout type when block gap support isn't available.
       if (!hasBlockGapSupport && 'flex' !== name) {
@@ -345,8 +416,8 @@ export function getLayoutStyles(_ref6) {
           const declarations = [];
 
           if (spacingStyle.rules) {
-            Object.entries(spacingStyle.rules).forEach(_ref8 => {
-              let [cssProperty, cssValue] = _ref8;
+            Object.entries(spacingStyle.rules).forEach(_ref10 => {
+              let [cssProperty, cssValue] = _ref10;
               declarations.push(`${cssProperty}: ${cssValue ? cssValue : gapValue}`);
             });
           }
@@ -358,7 +429,7 @@ export function getLayoutStyles(_ref6) {
               // For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles.
               combinedSelector = selector === ROOT_BLOCK_SELECTOR ? `:where(.${className}${(spacingStyle === null || spacingStyle === void 0 ? void 0 : spacingStyle.selector) || ''})` : `:where(${selector}.${className}${(spacingStyle === null || spacingStyle === void 0 ? void 0 : spacingStyle.selector) || ''})`;
             } else {
-              combinedSelector = selector === ROOT_BLOCK_SELECTOR ? `${selector} .${className}${(spacingStyle === null || spacingStyle === void 0 ? void 0 : spacingStyle.selector) || ''}` : `${selector}-${className}${selector}-${className}${(spacingStyle === null || spacingStyle === void 0 ? void 0 : spacingStyle.selector) || ''}`;
+              combinedSelector = selector === ROOT_BLOCK_SELECTOR ? `:where(${selector} .${className})${(spacingStyle === null || spacingStyle === void 0 ? void 0 : spacingStyle.selector) || ''}` : `${selector}-${className}${(spacingStyle === null || spacingStyle === void 0 ? void 0 : spacingStyle.selector) || ''}`;
             }
 
             ruleset += `${combinedSelector} { ${declarations.join('; ')}; }`;
@@ -375,12 +446,12 @@ export function getLayoutStyles(_ref6) {
 
   if (selector === ROOT_BLOCK_SELECTOR && tree !== null && tree !== void 0 && (_tree$settings3 = tree.settings) !== null && _tree$settings3 !== void 0 && (_tree$settings3$layou = _tree$settings3.layout) !== null && _tree$settings3$layou !== void 0 && _tree$settings3$layou.definitions) {
     const validDisplayModes = ['block', 'flex', 'grid'];
-    Object.values(tree.settings.layout.definitions).forEach(_ref9 => {
+    Object.values(tree.settings.layout.definitions).forEach(_ref11 => {
       let {
         className,
         displayMode,
         baseStyles
-      } = _ref9;
+      } = _ref11;
 
       if (displayMode && validDisplayModes.includes(displayMode)) {
         ruleset += `${selector} .${className} { display:${displayMode}; }`;
@@ -391,8 +462,8 @@ export function getLayoutStyles(_ref6) {
           const declarations = [];
 
           if (baseStyle.rules) {
-            Object.entries(baseStyle.rules).forEach(_ref10 => {
-              let [cssProperty, cssValue] = _ref10;
+            Object.entries(baseStyle.rules).forEach(_ref12 => {
+              let [cssProperty, cssValue] = _ref12;
               declarations.push(`${cssProperty}: ${cssValue}`);
             });
           }
@@ -417,8 +488,8 @@ export const getNodesWithStyles = (tree, blockSelectors) => {
     return nodes;
   }
 
-  const pickStyleKeys = treeToPickFrom => Object.fromEntries(Object.entries(treeToPickFrom !== null && treeToPickFrom !== void 0 ? treeToPickFrom : {}).filter(_ref11 => {
-    let [key] = _ref11;
+  const pickStyleKeys = treeToPickFrom => Object.fromEntries(Object.entries(treeToPickFrom !== null && treeToPickFrom !== void 0 ? treeToPickFrom : {}).filter(_ref13 => {
+    let [key] = _ref13;
     return ['border', 'color', 'dimensions', 'spacing', 'typography', 'filter', 'outline', 'shadow'].includes(key);
   })); // Top-level.
 
@@ -432,10 +503,10 @@ export const getNodesWithStyles = (tree, blockSelectors) => {
     });
   }
 
-  Object.entries(ELEMENTS).forEach(_ref12 => {
+  Object.entries(ELEMENTS).forEach(_ref14 => {
     var _tree$styles, _tree$styles$elements;
 
-    let [name, selector] = _ref12;
+    let [name, selector] = _ref14;
 
     if (!!((_tree$styles = tree.styles) !== null && _tree$styles !== void 0 && (_tree$styles$elements = _tree$styles.elements) !== null && _tree$styles$elements !== void 0 && _tree$styles$elements[name])) {
       var _tree$styles2, _tree$styles2$element;
@@ -447,10 +518,10 @@ export const getNodesWithStyles = (tree, blockSelectors) => {
     }
   }); // Iterate over blocks: they can have styles & elements.
 
-  Object.entries((_tree$styles$blocks = (_tree$styles3 = tree.styles) === null || _tree$styles3 === void 0 ? void 0 : _tree$styles3.blocks) !== null && _tree$styles$blocks !== void 0 ? _tree$styles$blocks : {}).forEach(_ref13 => {
+  Object.entries((_tree$styles$blocks = (_tree$styles3 = tree.styles) === null || _tree$styles3 === void 0 ? void 0 : _tree$styles3.blocks) !== null && _tree$styles$blocks !== void 0 ? _tree$styles$blocks : {}).forEach(_ref15 => {
     var _blockSelectors$block, _node$elements;
 
-    let [blockName, node] = _ref13;
+    let [blockName, node] = _ref15;
     const blockStyles = pickStyleKeys(node);
 
     if (node !== null && node !== void 0 && node.variations) {
@@ -475,8 +546,8 @@ export const getNodesWithStyles = (tree, blockSelectors) => {
       });
     }
 
-    Object.entries((_node$elements = node === null || node === void 0 ? void 0 : node.elements) !== null && _node$elements !== void 0 ? _node$elements : {}).forEach(_ref14 => {
-      let [elementName, value] = _ref14;
+    Object.entries((_node$elements = node === null || node === void 0 ? void 0 : node.elements) !== null && _node$elements !== void 0 ? _node$elements : {}).forEach(_ref16 => {
+      let [elementName, value] = _ref16;
 
       if (!!value && !!(blockSelectors !== null && blockSelectors !== void 0 && blockSelectors[blockName]) && !!(ELEMENTS !== null && ELEMENTS !== void 0 && ELEMENTS[elementName])) {
         var _blockSelectors$block3;
@@ -504,10 +575,10 @@ export const getNodesWithSettings = (tree, blockSelectors) => {
 
   const pickPresets = treeToPickFrom => {
     const presets = {};
-    PRESET_METADATA.forEach(_ref15 => {
+    PRESET_METADATA.forEach(_ref17 => {
       let {
         path
-      } = _ref15;
+      } = _ref17;
       const value = get(treeToPickFrom, path, false);
 
       if (value !== false) {
@@ -530,8 +601,8 @@ export const getNodesWithSettings = (tree, blockSelectors) => {
   } // Blocks.
 
 
-  Object.entries((_tree$settings$blocks = (_tree$settings5 = tree.settings) === null || _tree$settings5 === void 0 ? void 0 : _tree$settings5.blocks) !== null && _tree$settings$blocks !== void 0 ? _tree$settings$blocks : {}).forEach(_ref16 => {
-    let [blockName, node] = _ref16;
+  Object.entries((_tree$settings$blocks = (_tree$settings5 = tree.settings) === null || _tree$settings5 === void 0 ? void 0 : _tree$settings5.blocks) !== null && _tree$settings$blocks !== void 0 ? _tree$settings$blocks : {}).forEach(_ref18 => {
+    let [blockName, node] = _ref18;
     const blockPresets = pickPresets(node);
     const blockCustom = node.custom;
 
@@ -550,12 +621,12 @@ export const getNodesWithSettings = (tree, blockSelectors) => {
 export const toCustomProperties = (tree, blockSelectors) => {
   const settings = getNodesWithSettings(tree, blockSelectors);
   let ruleset = '';
-  settings.forEach(_ref17 => {
+  settings.forEach(_ref19 => {
     let {
       presets,
       custom,
       selector
-    } = _ref17;
+    } = _ref19;
     const declarations = getPresetsDeclarations(presets, tree === null || tree === void 0 ? void 0 : tree.settings);
     const customProps = flattenTree(custom, '--wp--custom--', '--');
 
@@ -614,7 +685,7 @@ export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasF
   }
 
   ruleset += '}';
-  nodesWithStyles.forEach(_ref18 => {
+  nodesWithStyles.forEach(_ref20 => {
     let {
       selector,
       duotoneSelector,
@@ -623,54 +694,43 @@ export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasF
       hasLayoutSupport,
       featureSelectors,
       styleVariationSelectors
-    } = _ref18;
+    } = _ref20;
 
     // Process styles for block support features with custom feature level
     // CSS selectors set.
     if (featureSelectors) {
-      Object.entries(featureSelectors).forEach(_ref19 => {
-        let [featureName, featureSelector] = _ref19;
-
-        if (styles !== null && styles !== void 0 && styles[featureName]) {
-          const featureStyles = {
-            [featureName]: styles[featureName]
-          };
-          const featureDeclarations = getStylesDeclarations(featureStyles);
-          delete styles[featureName];
-
-          if (!!featureDeclarations.length) {
-            ruleset = ruleset + `${featureSelector}{${featureDeclarations.join(';')} }`;
-          }
+      const featureDeclarations = getFeatureDeclarations(featureSelectors, styles);
+      Object.entries(featureDeclarations).forEach(_ref21 => {
+        let [cssSelector, declarations] = _ref21;
+
+        if (!!declarations.length) {
+          const rules = declarations.join(';');
+          ruleset = ruleset + `${cssSelector}{${rules}}`;
         }
       });
     }
 
     if (styleVariationSelectors) {
-      Object.entries(styleVariationSelectors).forEach(_ref20 => {
+      Object.entries(styleVariationSelectors).forEach(_ref22 => {
         var _styles$variations;
 
-        let [styleVariationName, styleVariationSelector] = _ref20;
+        let [styleVariationName, styleVariationSelector] = _ref22;
 
         if (styles !== null && styles !== void 0 && (_styles$variations = styles.variations) !== null && _styles$variations !== void 0 && _styles$variations[styleVariationName]) {
           var _styles$variations3;
 
           // If the block uses any custom selectors for block support, add those first.
           if (featureSelectors) {
-            Object.entries(featureSelectors).forEach(_ref21 => {
-              var _styles$variations2, _styles$variations2$s;
-
-              let [featureName, featureSelector] = _ref21;
+            var _styles$variations2;
 
-              if (styles !== null && styles !== void 0 && (_styles$variations2 = styles.variations) !== null && _styles$variations2 !== void 0 && (_styles$variations2$s = _styles$variations2[styleVariationName]) !== null && _styles$variations2$s !== void 0 && _styles$variations2$s[featureName]) {
-                const featureStyles = {
-                  [featureName]: styles.variations[styleVariationName][featureName]
-                };
-                const featureDeclarations = getStylesDeclarations(featureStyles);
-                delete styles.variations[styleVariationName][featureName];
+            const featureDeclarations = getFeatureDeclarations(featureSelectors, styles === null || styles === void 0 ? void 0 : (_styles$variations2 = styles.variations) === null || _styles$variations2 === void 0 ? void 0 : _styles$variations2[styleVariationName]);
+            Object.entries(featureDeclarations).forEach(_ref23 => {
+              let [baseSelector, declarations] = _ref23;
 
-                if (!!featureDeclarations.length) {
-                  ruleset = ruleset + `${concatFeatureVariationSelectorString(featureSelector, styleVariationSelector)}{${featureDeclarations.join(';')} }`;
-                }
+              if (!!declarations.length) {
+                const cssSelector = concatFeatureVariationSelectorString(baseSelector, styleVariationSelector);
+                const rules = declarations.join(';');
+                ruleset = ruleset + `${cssSelector}{${rules}}`;
               }
             });
           } // Otherwise add regular selectors.
@@ -690,14 +750,14 @@ export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasF
     if (styles !== null && styles !== void 0 && styles.filter) {
       duotoneStyles.filter = styles.filter;
       delete styles.filter;
-    } // Process duotone styles (they use color.__experimentalDuotone selector).
+    } // Process duotone styles.
 
 
     if (duotoneSelector) {
       const duotoneDeclarations = getStylesDeclarations(duotoneStyles);
 
       if (duotoneDeclarations.length > 0) {
-        ruleset = ruleset + `${scopeSelector(selector, duotoneSelector)}{${duotoneDeclarations.join(';')};}`;
+        ruleset = ruleset + `${duotoneSelector}{${duotoneDeclarations.join(';')};}`;
       }
     } // Process blockGap and layout styles.
 
@@ -721,14 +781,14 @@ export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasF
     } // Check for pseudo selector in `styles` and handle separately.
 
 
-    const pseudoSelectorStyles = Object.entries(styles).filter(_ref22 => {
-      let [key] = _ref22;
+    const pseudoSelectorStyles = Object.entries(styles).filter(_ref24 => {
+      let [key] = _ref24;
       return key.startsWith(':');
     });
 
     if (pseudoSelectorStyles !== null && pseudoSelectorStyles !== void 0 && pseudoSelectorStyles.length) {
-      pseudoSelectorStyles.forEach(_ref23 => {
-        let [pseudoKey, pseudoStyle] = _ref23;
+      pseudoSelectorStyles.forEach(_ref25 => {
+        let [pseudoKey, pseudoStyle] = _ref25;
         const pseudoDeclarations = getStylesDeclarations(pseudoStyle);
 
         if (!(pseudoDeclarations !== null && pseudoDeclarations !== void 0 && pseudoDeclarations.length)) {
@@ -760,15 +820,16 @@ export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasF
 
     // Use fallback of `0.5em` just in case, however if there is blockGap support, there should nearly always be a real value.
     const gapValue = getGapCSSValue(tree === null || tree === void 0 ? void 0 : (_tree$styles4 = tree.styles) === null || _tree$styles4 === void 0 ? void 0 : (_tree$styles4$spacing = _tree$styles4.spacing) === null || _tree$styles4$spacing === void 0 ? void 0 : _tree$styles4$spacing.blockGap) || '0.5em';
-    ruleset = ruleset + '.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
-    ruleset = ruleset + `.wp-site-blocks > * + * { margin-block-start: ${gapValue}; }`;
+    ruleset = ruleset + `:where(.wp-site-blocks) > * { margin-block-start: ${gapValue}; margin-block-end: 0; }`;
+    ruleset = ruleset + ':where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }';
+    ruleset = ruleset + ':where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }';
   }
 
-  nodesWithSettings.forEach(_ref24 => {
+  nodesWithSettings.forEach(_ref26 => {
     let {
       selector,
       presets
-    } = _ref24;
+    } = _ref26;
 
     if (ROOT_BLOCK_SELECTOR === selector) {
       // Do not add extra specificity for top-level classes.
@@ -785,23 +846,50 @@ export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasF
 };
 export function toSvgFilters(tree, blockSelectors) {
   const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
-  return nodesWithSettings.flatMap(_ref25 => {
+  return nodesWithSettings.flatMap(_ref27 => {
     let {
       presets
-    } = _ref25;
+    } = _ref27;
     return getPresetsSvgFilters(presets);
   });
 }
+
+const getSelectorsConfig = (blockType, rootSelector) => {
+  if (!isEmpty(blockType === null || blockType === void 0 ? void 0 : blockType.selectors)) {
+    return blockType.selectors;
+  }
+
+  const config = {
+    root: rootSelector
+  };
+  Object.entries(BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS).forEach(_ref28 => {
+    let [featureKey, featureName] = _ref28;
+    const featureSelector = getBlockCSSSelector(blockType, featureKey);
+
+    if (featureSelector) {
+      config[featureName] = featureSelector;
+    }
+  });
+  return config;
+};
+
 export const getBlockSelectors = (blockTypes, getBlockStyles) => {
   const result = {};
   blockTypes.forEach(blockType => {
-    var _blockType$supports$_, _blockType$supports, _blockType$supports$c, _blockType$supports2, _blockType$supports2$, _blockType$supports3, _blockType$supports4, _blockType$supports4$, _blockType$supports4$2;
+    var _blockType$supports, _blockType$supports2, _blockType$supports2$, _blockType$supports2$2;
 
     const name = blockType.name;
-    const selector = (_blockType$supports$_ = blockType === null || blockType === void 0 ? void 0 : (_blockType$supports = blockType.supports) === null || _blockType$supports === void 0 ? void 0 : _blockType$supports.__experimentalSelector) !== null && _blockType$supports$_ !== void 0 ? _blockType$supports$_ : '.wp-block-' + name.replace('core/', '').replace('/', '-');
-    const duotoneSelector = (_blockType$supports$c = blockType === null || blockType === void 0 ? void 0 : (_blockType$supports2 = blockType.supports) === null || _blockType$supports2 === void 0 ? void 0 : (_blockType$supports2$ = _blockType$supports2.color) === null || _blockType$supports2$ === void 0 ? void 0 : _blockType$supports2$.__experimentalDuotone) !== null && _blockType$supports$c !== void 0 ? _blockType$supports$c : null;
-    const hasLayoutSupport = !!(blockType !== null && blockType !== void 0 && (_blockType$supports3 = blockType.supports) !== null && _blockType$supports3 !== void 0 && _blockType$supports3.__experimentalLayout);
-    const fallbackGapValue = blockType === null || blockType === void 0 ? void 0 : (_blockType$supports4 = blockType.supports) === null || _blockType$supports4 === void 0 ? void 0 : (_blockType$supports4$ = _blockType$supports4.spacing) === null || _blockType$supports4$ === void 0 ? void 0 : (_blockType$supports4$2 = _blockType$supports4$.blockGap) === null || _blockType$supports4$2 === void 0 ? void 0 : _blockType$supports4$2.__experimentalDefault;
+    const selector = getBlockCSSSelector(blockType);
+    let duotoneSelector = getBlockCSSSelector(blockType, 'filter.duotone'); // Keep backwards compatibility for support.color.__experimentalDuotone.
+
+    if (!duotoneSelector) {
+      const rootSelector = getBlockCSSSelector(blockType);
+      const duotoneSupport = getBlockSupport(blockType, 'color.__experimentalDuotone', false);
+      duotoneSelector = duotoneSupport && scopeSelector(rootSelector, duotoneSupport);
+    }
+
+    const hasLayoutSupport = !!(blockType !== null && blockType !== void 0 && (_blockType$supports = blockType.supports) !== null && _blockType$supports !== void 0 && _blockType$supports.__experimentalLayout);
+    const fallbackGapValue = blockType === null || blockType === void 0 ? void 0 : (_blockType$supports2 = blockType.supports) === null || _blockType$supports2 === void 0 ? void 0 : (_blockType$supports2$ = _blockType$supports2.spacing) === null || _blockType$supports2$ === void 0 ? void 0 : (_blockType$supports2$2 = _blockType$supports2$.blockGap) === null || _blockType$supports2$2 === void 0 ? void 0 : _blockType$supports2$2.__experimentalDefault;
     const blockStyleVariations = getBlockStyles(name);
     const styleVariationSelectors = {};
 
@@ -813,17 +901,7 @@ export const getBlockSelectors = (blockTypes, getBlockStyles) => {
     } // For each block support feature add any custom selectors.
 
 
-    const featureSelectors = {};
-    Object.entries(BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS).forEach(_ref26 => {
-      var _blockType$supports5, _blockType$supports5$;
-
-      let [featureKey, featureName] = _ref26;
-      const featureSelector = blockType === null || blockType === void 0 ? void 0 : (_blockType$supports5 = blockType.supports) === null || _blockType$supports5 === void 0 ? void 0 : (_blockType$supports5$ = _blockType$supports5[featureKey]) === null || _blockType$supports5$ === void 0 ? void 0 : _blockType$supports5$.__experimentalSelector;
-
-      if (featureSelector) {
-        featureSelectors[featureName] = scopeSelector(selector, featureSelector);
-      }
-    });
+    const featureSelectors = getSelectorsConfig(blockType, selector);
     result[name] = {
       duotoneSelector,
       fallbackGapValue,
@@ -907,8 +985,8 @@ export function useGlobalStylesOutput() {
     const blockSelectors = getBlockSelectors(getBlockTypes(), getBlockStyles);
     const customProperties = toCustomProperties(mergedConfig, blockSelectors);
     const globalStyles = toStyles(mergedConfig, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles);
-    const filters = toSvgFilters(mergedConfig, blockSelectors);
-    const stylesheets = [{
+    const svgs = toSvgFilters(mergedConfig, blockSelectors);
+    const styles = [{
       css: customProperties,
       isGlobalStyles: true
     }, {
@@ -918,6 +996,10 @@ export function useGlobalStylesOutput() {
     {
       css: (_mergedConfig$styles$ = mergedConfig.styles.css) !== null && _mergedConfig$styles$ !== void 0 ? _mergedConfig$styles$ : '',
       isGlobalStyles: true
+    }, {
+      assets: svgs,
+      __unstableType: 'svg',
+      isGlobalStyles: true
     }]; // Loop through the blocks to check if there are custom CSS values.
     // If there are, get the block selector and push the selector together with
     // the CSS value to the 'stylesheets' array.
@@ -929,13 +1011,13 @@ export function useGlobalStylesOutput() {
         var _mergedConfig$styles$3;
 
         const selector = blockSelectors[blockType.name].selector;
-        stylesheets.push({
+        styles.push({
           css: processCSSNesting((_mergedConfig$styles$3 = mergedConfig.styles.blocks[blockType.name]) === null || _mergedConfig$styles$3 === void 0 ? void 0 : _mergedConfig$styles$3.css, selector),
           isGlobalStyles: true
         });
       }
     });
-    return [stylesheets, mergedConfig.settings, filters];
+    return [styles, mergedConfig.settings];
   }, [hasBlockGapSupport, hasFallbackGapSupport, mergedConfig, disableLayoutStyles]);
 }
 //# sourceMappingURL=use-global-styles-output.js.map