@wordpress/block-editor 11.7.0 → 12.0.0

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

@@ -8,7 +8,7 @@ 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 { renderToString, useContext, useMemo } from '@wordpress/element';
 import { getCSSRules } from '@wordpress/style-engine';
@@ -295,7 +295,7 @@ export function getStylesDeclarations() {
       return declarations;
     }
 
-    if (!!properties && typeof styleValue !== 'string') {
+    if (properties && typeof styleValue !== 'string') {
       Object.entries(properties).forEach(entry => {
         const [name, prop] = entry;
 
@@ -336,7 +336,7 @@ export function getStylesDeclarations() {
       ruleValue = get(tree, refPath); // Presence of another ref indicates a reference to another dynamic value.
       // Pointing to another dynamic value is not supported.
 
-      if (!ruleValue || !!((_ruleValue2 = ruleValue) !== null && _ruleValue2 !== void 0 && _ruleValue2.ref)) {
+      if (!ruleValue || (_ruleValue2 = ruleValue) !== null && _ruleValue2 !== void 0 && _ruleValue2.ref) {
         return;
       }
     } // Calculate fluid typography rules where available.
@@ -429,7 +429,7 @@ export function getLayoutStyles(_ref8) {
               // 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('; ')}; }`;
@@ -479,6 +479,26 @@ export function getLayoutStyles(_ref8) {
 
   return ruleset;
 }
+const STYLE_KEYS = ['border', 'color', 'dimensions', 'spacing', 'typography', 'filter', 'outline', 'shadow'];
+
+function pickStyleKeys(treeToPickFrom) {
+  if (!treeToPickFrom) {
+    return {};
+  }
+
+  const entries = Object.entries(treeToPickFrom);
+  const pickedEntries = entries.filter(_ref13 => {
+    let [key] = _ref13;
+    return STYLE_KEYS.includes(key);
+  }); // clone the style objects so that `getFeatureDeclarations` can remove consumed keys from it
+
+  const clonedEntries = pickedEntries.map(_ref14 => {
+    let [key, style] = _ref14;
+    return [key, JSON.parse(JSON.stringify(style))];
+  });
+  return Object.fromEntries(clonedEntries);
+}
+
 export const getNodesWithStyles = (tree, blockSelectors) => {
   var _tree$styles$blocks, _tree$styles3;
 
@@ -486,29 +506,24 @@ export const getNodesWithStyles = (tree, blockSelectors) => {
 
   if (!(tree !== null && tree !== void 0 && tree.styles)) {
     return nodes;
-  }
-
-  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.
+  } // Top-level.
 
 
   const styles = pickStyleKeys(tree.styles);
 
-  if (!!styles) {
+  if (styles) {
     nodes.push({
       styles,
       selector: ROOT_BLOCK_SELECTOR
     });
   }
 
-  Object.entries(ELEMENTS).forEach(_ref14 => {
+  Object.entries(ELEMENTS).forEach(_ref15 => {
     var _tree$styles, _tree$styles$elements;
 
-    let [name, selector] = _ref14;
+    let [name, selector] = _ref15;
 
-    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])) {
+    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({
@@ -518,10 +533,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(_ref15 => {
+  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(_ref16 => {
     var _blockSelectors$block, _node$elements;
 
-    let [blockName, node] = _ref15;
+    let [blockName, node] = _ref16;
     const blockStyles = pickStyleKeys(node);
 
     if (node !== null && node !== void 0 && node.variations) {
@@ -532,29 +547,27 @@ export const getNodesWithStyles = (tree, blockSelectors) => {
       blockStyles.variations = variations;
     }
 
-    if (!!blockStyles && !!(blockSelectors !== null && blockSelectors !== void 0 && (_blockSelectors$block = blockSelectors[blockName]) !== null && _blockSelectors$block !== void 0 && _blockSelectors$block.selector)) {
-      var _blockSelectors$block2;
-
+    if (blockStyles && blockSelectors !== null && blockSelectors !== void 0 && (_blockSelectors$block = blockSelectors[blockName]) !== null && _blockSelectors$block !== void 0 && _blockSelectors$block.selector) {
       nodes.push({
         duotoneSelector: blockSelectors[blockName].duotoneSelector,
         fallbackGapValue: blockSelectors[blockName].fallbackGapValue,
         hasLayoutSupport: blockSelectors[blockName].hasLayoutSupport,
-        selector: (_blockSelectors$block2 = blockSelectors[blockName]) === null || _blockSelectors$block2 === void 0 ? void 0 : _blockSelectors$block2.selector,
+        selector: blockSelectors[blockName].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(_ref16 => {
-      let [elementName, value] = _ref16;
+    Object.entries((_node$elements = node === null || node === void 0 ? void 0 : node.elements) !== null && _node$elements !== void 0 ? _node$elements : {}).forEach(_ref17 => {
+      let [elementName, value] = _ref17;
 
-      if (!!value && !!(blockSelectors !== null && blockSelectors !== void 0 && blockSelectors[blockName]) && !!(ELEMENTS !== null && ELEMENTS !== void 0 && ELEMENTS[elementName])) {
-        var _blockSelectors$block3;
+      if (value && blockSelectors !== null && blockSelectors !== void 0 && blockSelectors[blockName] && ELEMENTS[elementName]) {
+        var _blockSelectors$block2;
 
         nodes.push({
           styles: value,
-          selector: (_blockSelectors$block3 = blockSelectors[blockName]) === null || _blockSelectors$block3 === void 0 ? void 0 : _blockSelectors$block3.selector.split(',').map(sel => {
+          selector: (_blockSelectors$block2 = blockSelectors[blockName]) === null || _blockSelectors$block2 === void 0 ? void 0 : _blockSelectors$block2.selector.split(',').map(sel => {
             const elementSelectors = ELEMENTS[elementName].split(',');
             return elementSelectors.map(elementSelector => sel + ' ' + elementSelector);
           }).join(',')
@@ -575,10 +588,10 @@ export const getNodesWithSettings = (tree, blockSelectors) => {
 
   const pickPresets = treeToPickFrom => {
     const presets = {};
-    PRESET_METADATA.forEach(_ref17 => {
+    PRESET_METADATA.forEach(_ref18 => {
       let {
         path
-      } = _ref17;
+      } = _ref18;
       const value = get(treeToPickFrom, path, false);
 
       if (value !== false) {
@@ -592,7 +605,7 @@ export const getNodesWithSettings = (tree, blockSelectors) => {
   const presets = pickPresets(tree.settings);
   const custom = (_tree$settings4 = tree.settings) === null || _tree$settings4 === void 0 ? void 0 : _tree$settings4.custom;
 
-  if (!isEmpty(presets) || !!custom) {
+  if (!isEmpty(presets) || custom) {
     nodes.push({
       presets,
       custom,
@@ -601,18 +614,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(_ref18 => {
-    let [blockName, node] = _ref18;
+  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(_ref19 => {
+    let [blockName, node] = _ref19;
     const blockPresets = pickPresets(node);
     const blockCustom = node.custom;
 
-    if (!isEmpty(blockPresets) || !!blockCustom) {
-      var _blockSelectors$block4;
+    if (!isEmpty(blockPresets) || blockCustom) {
+      var _blockSelectors$block3;
 
       nodes.push({
         presets: blockPresets,
         custom: blockCustom,
-        selector: (_blockSelectors$block4 = blockSelectors[blockName]) === null || _blockSelectors$block4 === void 0 ? void 0 : _blockSelectors$block4.selector
+        selector: (_blockSelectors$block3 = blockSelectors[blockName]) === null || _blockSelectors$block3 === void 0 ? void 0 : _blockSelectors$block3.selector
       });
     }
   });
@@ -621,12 +634,12 @@ export const getNodesWithSettings = (tree, blockSelectors) => {
 export const toCustomProperties = (tree, blockSelectors) => {
   const settings = getNodesWithSettings(tree, blockSelectors);
   let ruleset = '';
-  settings.forEach(_ref19 => {
+  settings.forEach(_ref20 => {
     let {
       presets,
       custom,
       selector
-    } = _ref19;
+    } = _ref20;
     const declarations = getPresetsDeclarations(presets, tree === null || tree === void 0 ? void 0 : tree.settings);
     const customProps = flattenTree(custom, '--wp--custom--', '--');
 
@@ -635,7 +648,7 @@ export const toCustomProperties = (tree, blockSelectors) => {
     }
 
     if (declarations.length > 0) {
-      ruleset = ruleset + `${selector}{${declarations.join(';')};}`;
+      ruleset += `${selector}{${declarations.join(';')};}`;
     }
   });
   return ruleset;
@@ -685,7 +698,7 @@ export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasF
   }
 
   ruleset += '}';
-  nodesWithStyles.forEach(_ref20 => {
+  nodesWithStyles.forEach(_ref21 => {
     let {
       selector,
       duotoneSelector,
@@ -694,70 +707,67 @@ export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasF
       hasLayoutSupport,
       featureSelectors,
       styleVariationSelectors
-    } = _ref20;
+    } = _ref21;
 
     // Process styles for block support features with custom feature level
     // CSS selectors set.
     if (featureSelectors) {
       const featureDeclarations = getFeatureDeclarations(featureSelectors, styles);
-      Object.entries(featureDeclarations).forEach(_ref21 => {
-        let [cssSelector, declarations] = _ref21;
+      Object.entries(featureDeclarations).forEach(_ref22 => {
+        let [cssSelector, declarations] = _ref22;
 
-        if (!!declarations.length) {
+        if (declarations.length) {
           const rules = declarations.join(';');
-          ruleset = ruleset + `${cssSelector}{${rules}}`;
+          ruleset += `${cssSelector}{${rules};}`;
         }
       });
     }
 
     if (styleVariationSelectors) {
-      Object.entries(styleVariationSelectors).forEach(_ref22 => {
+      Object.entries(styleVariationSelectors).forEach(_ref23 => {
         var _styles$variations;
 
-        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;
+        let [styleVariationName, styleVariationSelector] = _ref23;
+        const styleVariations = styles === null || styles === void 0 ? void 0 : (_styles$variations = styles.variations) === null || _styles$variations === void 0 ? void 0 : _styles$variations[styleVariationName];
 
+        if (styleVariations) {
           // If the block uses any custom selectors for block support, add those first.
           if (featureSelectors) {
-            var _styles$variations2;
-
-            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;
+            const featureDeclarations = getFeatureDeclarations(featureSelectors, styleVariations);
+            Object.entries(featureDeclarations).forEach(_ref24 => {
+              let [baseSelector, declarations] = _ref24;
 
-              if (!!declarations.length) {
+              if (declarations.length) {
                 const cssSelector = concatFeatureVariationSelectorString(baseSelector, styleVariationSelector);
                 const rules = declarations.join(';');
-                ruleset = ruleset + `${cssSelector}{${rules}}`;
+                ruleset += `${cssSelector}{${rules};}`;
               }
             });
           } // Otherwise add regular selectors.
 
 
-          const styleVariationDeclarations = getStylesDeclarations(styles === null || styles === void 0 ? void 0 : (_styles$variations3 = styles.variations) === null || _styles$variations3 === void 0 ? void 0 : _styles$variations3[styleVariationName], styleVariationSelector, useRootPaddingAlign, tree);
+          const styleVariationDeclarations = getStylesDeclarations(styleVariations, styleVariationSelector, useRootPaddingAlign, tree);
 
-          if (!!styleVariationDeclarations.length) {
-            ruleset = ruleset + `${styleVariationSelector}{${styleVariationDeclarations.join(';')}}`;
+          if (styleVariationDeclarations.length) {
+            ruleset += `${styleVariationSelector}{${styleVariationDeclarations.join(';')};}`;
           }
         }
       });
-    }
+    } // Process duotone styles.
 
-    const duotoneStyles = {};
 
-    if (styles !== null && styles !== void 0 && styles.filter) {
-      duotoneStyles.filter = styles.filter;
-      delete styles.filter;
-    } // Process duotone styles (they use color.__experimentalDuotone selector).
+    if (duotoneSelector) {
+      const duotoneStyles = {};
 
+      if (styles !== null && styles !== void 0 && styles.filter) {
+        duotoneStyles.filter = styles.filter;
+        delete styles.filter;
+      }
 
-    if (duotoneSelector) {
       const duotoneDeclarations = getStylesDeclarations(duotoneStyles);
 
-      if (duotoneDeclarations.length > 0) {
-        ruleset = ruleset + `${scopeSelector(selector, duotoneSelector)}{${duotoneDeclarations.join(';')};}`;
+      if (duotoneDeclarations.length) {
+        ruleset += `${duotoneSelector}{${duotoneDeclarations.join(';')};}`;
       }
     } // Process blockGap and layout styles.
 
@@ -777,18 +787,18 @@ export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasF
     const declarations = getStylesDeclarations(styles, selector, useRootPaddingAlign, tree);
 
     if (declarations !== null && declarations !== void 0 && declarations.length) {
-      ruleset = ruleset + `${selector}{${declarations.join(';')};}`;
+      ruleset += `${selector}{${declarations.join(';')};}`;
     } // Check for pseudo selector in `styles` and handle separately.
 
 
-    const pseudoSelectorStyles = Object.entries(styles).filter(_ref24 => {
-      let [key] = _ref24;
+    const pseudoSelectorStyles = Object.entries(styles).filter(_ref25 => {
+      let [key] = _ref25;
       return key.startsWith(':');
     });
 
     if (pseudoSelectorStyles !== null && pseudoSelectorStyles !== void 0 && pseudoSelectorStyles.length) {
-      pseudoSelectorStyles.forEach(_ref25 => {
-        let [pseudoKey, pseudoStyle] = _ref25;
+      pseudoSelectorStyles.forEach(_ref26 => {
+        let [pseudoKey, pseudoStyle] = _ref26;
         const pseudoDeclarations = getStylesDeclarations(pseudoStyle);
 
         if (!(pseudoDeclarations !== null && pseudoDeclarations !== void 0 && pseudoDeclarations.length)) {
@@ -805,7 +815,7 @@ export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasF
         const _selector = selector.split(',').map(sel => sel + pseudoKey).join(',');
 
         const pseudoRule = `${_selector}{${pseudoDeclarations.join(';')};}`;
-        ruleset = ruleset + pseudoRule;
+        ruleset += pseudoRule;
       });
     }
   });
@@ -820,15 +830,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(_ref26 => {
+  nodesWithSettings.forEach(_ref27 => {
     let {
       selector,
       presets
-    } = _ref26;
+    } = _ref27;
 
     if (ROOT_BLOCK_SELECTOR === selector) {
       // Do not add extra specificity for top-level classes.
@@ -838,17 +849,17 @@ export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasF
     const classes = getPresetsClasses(selector, presets);
 
     if (!isEmpty(classes)) {
-      ruleset = ruleset + classes;
+      ruleset += classes;
     }
   });
   return ruleset;
 };
 export function toSvgFilters(tree, blockSelectors) {
   const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
-  return nodesWithSettings.flatMap(_ref27 => {
+  return nodesWithSettings.flatMap(_ref28 => {
     let {
       presets
-    } = _ref27;
+    } = _ref28;
     return getPresetsSvgFilters(presets);
   });
 }
@@ -861,8 +872,8 @@ const getSelectorsConfig = (blockType, rootSelector) => {
   const config = {
     root: rootSelector
   };
-  Object.entries(BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS).forEach(_ref28 => {
-    let [featureKey, featureName] = _ref28;
+  Object.entries(BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS).forEach(_ref29 => {
+    let [featureKey, featureName] = _ref29;
     const featureSelector = getBlockCSSSelector(blockType, featureKey);
 
     if (featureSelector) {
@@ -878,8 +889,15 @@ export const getBlockSelectors = (blockTypes, getBlockStyles) => {
     var _blockType$supports, _blockType$supports2, _blockType$supports2$, _blockType$supports2$2;
 
     const name = blockType.name;
-    const selector = getBlockCSSSelector(blockType, 'root');
-    const duotoneSelector = getBlockCSSSelector(blockType, 'filter.duotone');
+    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);