@wordpress/block-editor 11.5.0 → 11.7.0

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

@@ -10,13 +10,14 @@ import { get, isEmpty, kebabCase, set } from 'lodash';
 
 import { __EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY, __EXPERIMENTAL_ELEMENTS as ELEMENTS, 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';
@@ -84,13 +85,14 @@ function getPresetsDeclarations() {
 /**
  * Transform given preset tree into a set of preset class declarations.
  *
- * @param {string} blockSelector
- * @param {Object} blockPresets
+ * @param {?string} blockSelector
+ * @param {Object}  blockPresets
  * @return {string} CSS declarations for the preset classes.
  */
 
 
-function getPresetsClasses(blockSelector) {
+function getPresetsClasses() {
+  let blockSelector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '*';
   let blockPresets = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   return PRESET_METADATA.reduce((declarations, _ref2) => {
     let {
@@ -133,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('');
   });
 }
 
@@ -177,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.
  *
@@ -198,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;
@@ -303,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 {
@@ -313,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.
@@ -327,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) {
@@ -344,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}`);
             });
           }
@@ -357,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}${(spacingStyle === null || spacingStyle === void 0 ? void 0 : spacingStyle.selector) || ''}`;
+              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) || ''}`;
             }
 
             ruleset += `${combinedSelector} { ${declarations.join('; ')}; }`;
@@ -374,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}; }`;
@@ -390,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}`);
             });
           }
@@ -416,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.
 
@@ -431,25 +503,25 @@ export const getNodesWithStyles = (tree, blockSelectors) => {
     });
   }
 
-  Object.entries(ELEMENTS).forEach(_ref12 => {
-    var _tree$styles;
+  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[name])) {
-      var _tree$styles2;
+    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;
 
       nodes.push({
-        styles: (_tree$styles2 = tree.styles) === null || _tree$styles2 === void 0 ? void 0 : _tree$styles2.elements[name],
+        styles: (_tree$styles2 = tree.styles) === null || _tree$styles2 === void 0 ? void 0 : (_tree$styles2$element = _tree$styles2.elements) === null || _tree$styles2$element === void 0 ? void 0 : _tree$styles2$element[name],
         selector
       });
     }
   }); // 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) {
@@ -461,24 +533,28 @@ export const getNodesWithStyles = (tree, blockSelectors) => {
     }
 
     if (!!blockStyles && !!(blockSelectors !== null && blockSelectors !== void 0 && (_blockSelectors$block = blockSelectors[blockName]) !== null && _blockSelectors$block !== void 0 && _blockSelectors$block.selector)) {
+      var _blockSelectors$block2;
+
       nodes.push({
         duotoneSelector: blockSelectors[blockName].duotoneSelector,
         fallbackGapValue: blockSelectors[blockName].fallbackGapValue,
         hasLayoutSupport: blockSelectors[blockName].hasLayoutSupport,
-        selector: blockSelectors[blockName].selector,
+        selector: (_blockSelectors$block2 = blockSelectors[blockName]) === null || _blockSelectors$block2 === void 0 ? void 0 : _blockSelectors$block2.selector,
         styles: blockStyles,
         featureSelectors: blockSelectors[blockName].featureSelectors,
         styleVariationSelectors: blockSelectors[blockName].styleVariationSelectors
       });
     }
 
-    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;
+
         nodes.push({
           styles: value,
-          selector: blockSelectors[blockName].selector.split(',').map(sel => {
+          selector: (_blockSelectors$block3 = blockSelectors[blockName]) === null || _blockSelectors$block3 === void 0 ? void 0 : _blockSelectors$block3.selector.split(',').map(sel => {
             const elementSelectors = ELEMENTS[elementName].split(',');
             return elementSelectors.map(elementSelector => sel + ' ' + elementSelector);
           }).join(',')
@@ -499,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) {
@@ -525,16 +601,18 @@ 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;
 
     if (!isEmpty(blockPresets) || !!blockCustom) {
+      var _blockSelectors$block4;
+
       nodes.push({
         presets: blockPresets,
         custom: blockCustom,
-        selector: blockSelectors[blockName].selector
+        selector: (_blockSelectors$block4 = blockSelectors[blockName]) === null || _blockSelectors$block4 === void 0 ? void 0 : _blockSelectors$block4.selector
       });
     }
   });
@@ -543,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--', '--');
 
@@ -607,7 +685,7 @@ export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasF
   }
 
   ruleset += '}';
-  nodesWithStyles.forEach(_ref18 => {
+  nodesWithStyles.forEach(_ref20 => {
     let {
       selector,
       duotoneSelector,
@@ -616,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.
@@ -714,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)) {
@@ -757,11 +824,11 @@ export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasF
     ruleset = ruleset + `.wp-site-blocks > * + * { margin-block-start: ${gapValue}; }`;
   }
 
-  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.
@@ -778,23 +845,43 @@ 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, 'root');
+    const duotoneSelector = getBlockCSSSelector(blockType, 'filter.duotone');
+    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 = {};
 
@@ -806,17 +893,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,
@@ -838,9 +915,9 @@ export const getBlockSelectors = (blockTypes, getBlockStyles) => {
  */
 
 function updateConfigWithSeparator(config) {
-  var _config$styles, _config$styles2, _config$styles2$block, _config$styles3, _config$styles3$block, _config$styles4, _config$styles4$block;
+  var _config$styles, _config$styles$blocks, _config$styles2, _config$styles2$block, _config$styles2$block2, _config$styles3, _config$styles3$block, _config$styles3$block2, _config$styles4, _config$styles4$block, _config$styles4$block2;
 
-  const needsSeparatorStyleUpdate = ((_config$styles = config.styles) === null || _config$styles === void 0 ? void 0 : _config$styles.blocks['core/separator']) && ((_config$styles2 = config.styles) === null || _config$styles2 === void 0 ? void 0 : (_config$styles2$block = _config$styles2.blocks['core/separator'].color) === null || _config$styles2$block === void 0 ? void 0 : _config$styles2$block.background) && !((_config$styles3 = config.styles) !== null && _config$styles3 !== void 0 && (_config$styles3$block = _config$styles3.blocks['core/separator'].color) !== null && _config$styles3$block !== void 0 && _config$styles3$block.text) && !((_config$styles4 = config.styles) !== null && _config$styles4 !== void 0 && (_config$styles4$block = _config$styles4.blocks['core/separator'].border) !== null && _config$styles4$block !== void 0 && _config$styles4$block.color);
+  const needsSeparatorStyleUpdate = ((_config$styles = config.styles) === null || _config$styles === void 0 ? void 0 : (_config$styles$blocks = _config$styles.blocks) === null || _config$styles$blocks === void 0 ? void 0 : _config$styles$blocks['core/separator']) && ((_config$styles2 = config.styles) === null || _config$styles2 === void 0 ? void 0 : (_config$styles2$block = _config$styles2.blocks) === null || _config$styles2$block === void 0 ? void 0 : (_config$styles2$block2 = _config$styles2$block['core/separator'].color) === null || _config$styles2$block2 === void 0 ? void 0 : _config$styles2$block2.background) && !((_config$styles3 = config.styles) !== null && _config$styles3 !== void 0 && (_config$styles3$block = _config$styles3.blocks) !== null && _config$styles3$block !== void 0 && (_config$styles3$block2 = _config$styles3$block['core/separator'].color) !== null && _config$styles3$block2 !== void 0 && _config$styles3$block2.text) && !((_config$styles4 = config.styles) !== null && _config$styles4 !== void 0 && (_config$styles4$block = _config$styles4.blocks) !== null && _config$styles4$block !== void 0 && (_config$styles4$block2 = _config$styles4$block['core/separator'].border) !== null && _config$styles4$block2 !== void 0 && _config$styles4$block2.color);
 
   if (needsSeparatorStyleUpdate) {
     var _config$styles5;
@@ -900,8 +977,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
     }, {
@@ -911,6 +988,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.
@@ -922,13 +1003,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