@wordpress/edit-site 4.8.0 → 4.11.0

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

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getBlockSelectors = void 0;
+exports.getLayoutStyles = getLayoutStyles;
 exports.toStyles = exports.toCustomProperties = exports.getNodesWithStyles = exports.getNodesWithSettings = void 0;
 exports.toSvgFilters = toSvgFilters;
 exports.useGlobalStylesOutput = useGlobalStylesOutput;
@@ -34,6 +36,15 @@ var _hooks = require("./hooks");
 /**
  * Internal dependencies
  */
+// List of block support features that can have their related styles
+// generated under their own feature level selector rather than the block's.
+const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
+  __experimentalBorder: 'border',
+  color: 'color',
+  spacing: 'spacing',
+  typography: 'typography'
+};
+
 function compileStyleValue(uncompiledValue) {
   const VARIABLE_REFERENCE_PREFIX = 'var:';
   const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
@@ -159,7 +170,11 @@ function flattenTree() {
 /**
  * Transform given style tree into a set of style declarations.
  *
- * @param {Object} blockStyles Block styles.
+ * @param {Object}  blockStyles         Block styles.
+ *
+ * @param {string}  selector            The selector these declarations should attach to.
+ *
+ * @param {boolean} useRootPaddingAlign Whether to use CSS custom properties in root selector.
  *
  * @return {Array} An array of style declarations.
  */
@@ -167,12 +182,21 @@ function flattenTree() {
 
 function getStylesDeclarations() {
   let blockStyles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let selector = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  let useRootPaddingAlign = arguments.length > 2 ? arguments[2] : undefined;
+  const isRoot = _utils.ROOT_BLOCK_SELECTOR === selector;
   const output = (0, _lodash.reduce)(_blocks.__EXPERIMENTAL_STYLE_PROPERTY, (declarations, _ref5, key) => {
     let {
       value,
       properties,
-      useEngine
+      useEngine,
+      rootOnly
     } = _ref5;
+
+    if (rootOnly && !isRoot) {
+      return declarations;
+    }
+
     const pathToValue = value;
 
     if ((0, _lodash.first)(pathToValue) === 'elements' || useEngine) {
@@ -181,7 +205,7 @@ function getStylesDeclarations() {
 
     const styleValue = (0, _lodash.get)(blockStyles, pathToValue);
 
-    if (!!properties && !(0, _lodash.isString)(styleValue)) {
+    if (!!properties && typeof styleValue !== 'string') {
       Object.entries(properties).forEach(entry => {
         const [name, prop] = entry;
 
@@ -191,18 +215,27 @@ function getStylesDeclarations() {
           return;
         }
 
-        const cssProperty = (0, _lodash.kebabCase)(name);
+        const cssProperty = name.startsWith('--') ? name : (0, _lodash.kebabCase)(name);
         declarations.push(`${cssProperty}: ${compileStyleValue((0, _lodash.get)(styleValue, [prop]))}`);
       });
+    } else if (key === '--wp--style--root--padding' && typeof styleValue === 'string') {
+      // Root-level padding styles don't currently support strings with CSS shorthand values.
+      // This may change: https://github.com/WordPress/gutenberg/issues/40132.
+      return declarations;
     } else if ((0, _lodash.get)(blockStyles, pathToValue, false)) {
       const cssProperty = key.startsWith('--') ? key : (0, _lodash.kebabCase)(key);
       declarations.push(`${cssProperty}: ${compileStyleValue((0, _lodash.get)(blockStyles, pathToValue))}`);
     }
 
     return declarations;
-  }, []); // The goal is to move everything to server side generated engine styles
+  }, []);
+
+  if (isRoot && useRootPaddingAlign) {
+    return output;
+  } // The goal is to move everything to server side generated engine styles
   // This is temporary as we absorb more and more styles into the engine.
 
+
   const extraRules = (0, _styleEngine.getCSSRules)(blockStyles);
   extraRules.forEach(rule => {
     const cssProperty = rule.key.startsWith('--') ? rule.key : (0, _lodash.kebabCase)(rule.key);
@@ -210,6 +243,117 @@ function getStylesDeclarations() {
   });
   return output;
 }
+/**
+ * Get generated CSS for layout styles by looking up layout definitions provided
+ * in theme.json, and outputting common layout styles, and specific blockGap values.
+ *
+ * @param {Object}  props
+ * @param {Object}  props.tree                  A theme.json tree containing layout definitions.
+ * @param {Object}  props.style                 A style object containing spacing values.
+ * @param {string}  props.selector              Selector used to group together layout styling rules.
+ * @param {boolean} props.hasBlockGapSupport    Whether or not the theme opts-in to blockGap support.
+ * @param {boolean} props.hasFallbackGapSupport Whether or not the theme allows fallback gap styles.
+ * @param {?string} props.fallbackGapValue      An optional fallback gap value if no real gap value is available.
+ * @return {string} Generated CSS rules for the layout styles.
+ */
+
+
+function getLayoutStyles(_ref6) {
+  var _style$spacing, _tree$settings, _tree$settings$layout, _tree$settings2, _tree$settings2$layou;
+
+  let {
+    tree,
+    style,
+    selector,
+    hasBlockGapSupport,
+    hasFallbackGapSupport,
+    fallbackGapValue
+  } = _ref6;
+  let ruleset = '';
+  let gapValue = hasBlockGapSupport ? (0, _blockEditor.__experimentalGetGapCSSValue)(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.
+
+  if (hasFallbackGapSupport) {
+    if (selector === _utils.ROOT_BLOCK_SELECTOR) {
+      gapValue = !gapValue ? '0.5em' : gapValue;
+    } else if (!hasBlockGapSupport && fallbackGapValue) {
+      gapValue = fallbackGapValue;
+    }
+  }
+
+  if (gapValue && tree !== null && tree !== void 0 && (_tree$settings = tree.settings) !== null && _tree$settings !== void 0 && (_tree$settings$layout = _tree$settings.layout) !== null && _tree$settings$layout !== void 0 && _tree$settings$layout.definitions) {
+    Object.values(tree.settings.layout.definitions).forEach(_ref7 => {
+      let {
+        className,
+        name,
+        spacingStyles
+      } = _ref7;
+
+      // Allow skipping default layout for themes that opt-in to block styles, but opt-out of blockGap.
+      if (!hasBlockGapSupport && 'default' === name) {
+        return;
+      }
+
+      if (spacingStyles !== null && spacingStyles !== void 0 && spacingStyles.length) {
+        spacingStyles.forEach(spacingStyle => {
+          const declarations = [];
+
+          if (spacingStyle.rules) {
+            Object.entries(spacingStyle.rules).forEach(_ref8 => {
+              let [cssProperty, cssValue] = _ref8;
+              declarations.push(`${cssProperty}: ${cssValue ? cssValue : gapValue}`);
+            });
+          }
+
+          if (declarations.length) {
+            const combinedSelector = selector === _utils.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) || ''}`;
+            ruleset += `${combinedSelector} { ${declarations.join('; ')}; }`;
+          }
+        });
+      }
+    }); // For backwards compatibility, ensure the legacy block gap CSS variable is still available.
+
+    if (selector === _utils.ROOT_BLOCK_SELECTOR && hasBlockGapSupport) {
+      ruleset += `${selector} { --wp--style--block-gap: ${gapValue}; }`;
+    }
+  } // Output base styles
+
+
+  if (selector === _utils.ROOT_BLOCK_SELECTOR && 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) {
+    const validDisplayModes = ['block', 'flex', 'grid'];
+    Object.values(tree.settings.layout.definitions).forEach(_ref9 => {
+      let {
+        className,
+        displayMode,
+        baseStyles
+      } = _ref9;
+
+      if (displayMode && validDisplayModes.includes(displayMode)) {
+        ruleset += `${selector} .${className} { display:${displayMode}; }`;
+      }
+
+      if (baseStyles !== null && baseStyles !== void 0 && baseStyles.length) {
+        baseStyles.forEach(baseStyle => {
+          const declarations = [];
+
+          if (baseStyle.rules) {
+            Object.entries(baseStyle.rules).forEach(_ref10 => {
+              let [cssProperty, cssValue] = _ref10;
+              declarations.push(`${cssProperty}: ${cssValue}`);
+            });
+          }
+
+          if (declarations.length) {
+            const combinedSelector = `${selector} .${className}${(baseStyle === null || baseStyle === void 0 ? void 0 : baseStyle.selector) || ''}`;
+            ruleset += `${combinedSelector} { ${declarations.join('; ')}; }`;
+          }
+        });
+      }
+    });
+  }
+
+  return ruleset;
+}
 
 const getNodesWithStyles = (tree, blockSelectors) => {
   var _tree$styles, _tree$styles2;
@@ -248,9 +392,12 @@ const getNodesWithStyles = (tree, blockSelectors) => {
 
     if (!!blockStyles && !!(blockSelectors !== null && blockSelectors !== void 0 && (_blockSelectors$block = blockSelectors[blockName]) !== null && _blockSelectors$block !== void 0 && _blockSelectors$block.selector)) {
       nodes.push({
-        styles: blockStyles,
+        duotoneSelector: blockSelectors[blockName].duotoneSelector,
+        fallbackGapValue: blockSelectors[blockName].fallbackGapValue,
+        hasLayoutSupport: blockSelectors[blockName].hasLayoutSupport,
         selector: blockSelectors[blockName].selector,
-        duotoneSelector: blockSelectors[blockName].duotoneSelector
+        styles: blockStyles,
+        featureSelectors: blockSelectors[blockName].featureSelectors
       });
     }
 
@@ -258,7 +405,11 @@ const getNodesWithStyles = (tree, blockSelectors) => {
       if (!!value && !!(blockSelectors !== null && blockSelectors !== void 0 && blockSelectors[blockName]) && !!(_blocks.__EXPERIMENTAL_ELEMENTS !== null && _blocks.__EXPERIMENTAL_ELEMENTS !== void 0 && _blocks.__EXPERIMENTAL_ELEMENTS[elementName])) {
         nodes.push({
           styles: value,
-          selector: blockSelectors[blockName].selector.split(',').map(sel => sel + ' ' + _blocks.__EXPERIMENTAL_ELEMENTS[elementName]).join(',')
+          selector: blockSelectors[blockName].selector.split(',').map(sel => {
+            const elementSelectors = _blocks.__EXPERIMENTAL_ELEMENTS[elementName].split(',');
+
+            return elementSelectors.map(elementSelector => sel + ' ' + elementSelector);
+          }).join(',')
         });
       }
     });
@@ -269,7 +420,7 @@ const getNodesWithStyles = (tree, blockSelectors) => {
 exports.getNodesWithStyles = getNodesWithStyles;
 
 const getNodesWithSettings = (tree, blockSelectors) => {
-  var _tree$settings, _tree$settings2;
+  var _tree$settings3, _tree$settings4;
 
   const nodes = [];
 
@@ -280,10 +431,10 @@ const getNodesWithSettings = (tree, blockSelectors) => {
   const pickPresets = treeToPickFrom => {
     const presets = {};
 
-    _utils.PRESET_METADATA.forEach(_ref6 => {
+    _utils.PRESET_METADATA.forEach(_ref11 => {
       let {
         path
-      } = _ref6;
+      } = _ref11;
       const value = (0, _lodash.get)(treeToPickFrom, path, false);
 
       if (value !== false) {
@@ -296,7 +447,7 @@ const getNodesWithSettings = (tree, blockSelectors) => {
 
 
   const presets = pickPresets(tree.settings);
-  const custom = (_tree$settings = tree.settings) === null || _tree$settings === void 0 ? void 0 : _tree$settings.custom;
+  const custom = (_tree$settings3 = tree.settings) === null || _tree$settings3 === void 0 ? void 0 : _tree$settings3.custom;
 
   if (!(0, _lodash.isEmpty)(presets) || !!custom) {
     nodes.push({
@@ -307,7 +458,7 @@ const getNodesWithSettings = (tree, blockSelectors) => {
   } // Blocks.
 
 
-  (0, _lodash.forEach)((_tree$settings2 = tree.settings) === null || _tree$settings2 === void 0 ? void 0 : _tree$settings2.blocks, (node, blockName) => {
+  (0, _lodash.forEach)((_tree$settings4 = tree.settings) === null || _tree$settings4 === void 0 ? void 0 : _tree$settings4.blocks, (node, blockName) => {
     const blockPresets = pickPresets(node);
     const blockCustom = node.custom;
 
@@ -327,12 +478,12 @@ exports.getNodesWithSettings = getNodesWithSettings;
 const toCustomProperties = (tree, blockSelectors) => {
   const settings = getNodesWithSettings(tree, blockSelectors);
   let ruleset = '';
-  settings.forEach(_ref7 => {
+  settings.forEach(_ref12 => {
     let {
       presets,
       custom,
       selector
-    } = _ref7;
+    } = _ref12;
     const declarations = getPresetsDeclarations(presets);
     const customProps = flattenTree(custom, '--wp--custom--', '--');
 
@@ -349,9 +500,12 @@ const toCustomProperties = (tree, blockSelectors) => {
 
 exports.toCustomProperties = toCustomProperties;
 
-const toStyles = (tree, blockSelectors, hasBlockGapSupport) => {
+const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport) => {
+  var _tree$settings5;
+
   const nodesWithStyles = getNodesWithStyles(tree, blockSelectors);
   const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
+  const useRootPaddingAlign = tree === null || tree === void 0 ? void 0 : (_tree$settings5 = tree.settings) === null || _tree$settings5 === void 0 ? void 0 : _tree$settings5.useRootPaddingAwareAlignments;
   /*
    * Reset default browser margin on the root body element.
    * This is set on the root selector **before** generating the ruleset
@@ -362,12 +516,41 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport) => {
    */
 
   let ruleset = 'body {margin: 0;}';
-  nodesWithStyles.forEach(_ref8 => {
+
+  if (useRootPaddingAlign) {
+    ruleset = 'body { margin: 0; padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } .has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } .has-global-padding > .alignfull > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
+  }
+
+  nodesWithStyles.forEach(_ref13 => {
     let {
       selector,
       duotoneSelector,
-      styles
-    } = _ref8;
+      styles,
+      fallbackGapValue,
+      hasLayoutSupport,
+      featureSelectors
+    } = _ref13;
+
+    // Process styles for block support features with custom feature level
+    // CSS selectors set.
+    if (featureSelectors) {
+      Object.entries(featureSelectors).forEach(_ref14 => {
+        let [featureName, featureSelector] = _ref14;
+
+        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 duotoneStyles = {};
 
     if (styles !== null && styles !== void 0 && styles.filter) {
@@ -384,16 +567,55 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport) => {
       }
 
       ruleset = ruleset + `${duotoneSelector}{${duotoneDeclarations.join(';')};}`;
-    } // Process the remaning block styles (they use either normal block class or __experimentalSelector).
+    } // Process blockGap and layout styles.
 
 
-    const declarations = getStylesDeclarations(styles);
+    if (_utils.ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport) {
+      ruleset += getLayoutStyles({
+        tree,
+        style: styles,
+        selector,
+        hasBlockGapSupport,
+        hasFallbackGapSupport,
+        fallbackGapValue
+      });
+    } // Process the remaining block styles (they use either normal block class or __experimentalSelector).
 
-    if (declarations.length === 0) {
-      return;
-    }
 
-    ruleset = ruleset + `${selector}{${declarations.join(';')};}`;
+    const declarations = getStylesDeclarations(styles, selector, useRootPaddingAlign);
+
+    if (declarations !== null && declarations !== void 0 && declarations.length) {
+      ruleset = ruleset + `${selector}{${declarations.join(';')};}`;
+    } // Check for pseudo selector in `styles` and handle separately.
+
+
+    const pseudoSelectorStyles = Object.entries(styles).filter(_ref15 => {
+      let [key] = _ref15;
+      return key.startsWith(':');
+    });
+
+    if (pseudoSelectorStyles !== null && pseudoSelectorStyles !== void 0 && pseudoSelectorStyles.length) {
+      pseudoSelectorStyles.forEach(_ref16 => {
+        let [pseudoKey, pseudoStyle] = _ref16;
+        const pseudoDeclarations = getStylesDeclarations(pseudoStyle);
+
+        if (!(pseudoDeclarations !== null && pseudoDeclarations !== void 0 && pseudoDeclarations.length)) {
+          return;
+        } // `selector` maybe provided in a form
+        // where block level selectors have sub element
+        // selectors appended to them as a comma separated
+        // string.
+        // e.g. `h1 a,h2 a,h3 a,h4 a,h5 a,h6 a`;
+        // Split and append pseudo selector to create
+        // the proper rules to target the elements.
+
+
+        const _selector = selector.split(',').map(sel => sel + pseudoKey).join(',');
+
+        const pseudoRule = `${_selector}{${pseudoDeclarations.join(';')};}`;
+        ruleset = ruleset + pseudoRule;
+      });
+    }
   });
   /* Add alignment / layout styles */
 
@@ -402,15 +624,19 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport) => {
   ruleset = ruleset + '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
 
   if (hasBlockGapSupport) {
+    var _tree$styles3, _tree$styles3$spacing;
+
+    // Use fallback of `0.5em` just in case, however if there is blockGap support, there should nearly always be a real value.
+    const gapValue = (0, _blockEditor.__experimentalGetGapCSSValue)(tree === null || tree === void 0 ? void 0 : (_tree$styles3 = tree.styles) === null || _tree$styles3 === void 0 ? void 0 : (_tree$styles3$spacing = _tree$styles3.spacing) === null || _tree$styles3$spacing === void 0 ? void 0 : _tree$styles3$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: var( --wp--style--block-gap ); }';
+    ruleset = ruleset + `.wp-site-blocks > * + * { margin-block-start: ${gapValue}; }`;
   }
 
-  nodesWithSettings.forEach(_ref9 => {
+  nodesWithSettings.forEach(_ref17 => {
     let {
       selector,
       presets
-    } = _ref9;
+    } = _ref17;
 
     if (_utils.ROOT_BLOCK_SELECTOR === selector) {
       // Do not add extra specificity for top-level classes.
@@ -430,10 +656,10 @@ exports.toStyles = toStyles;
 
 function toSvgFilters(tree, blockSelectors) {
   const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
-  return nodesWithSettings.flatMap(_ref10 => {
+  return nodesWithSettings.flatMap(_ref18 => {
     let {
       presets
-    } = _ref10;
+    } = _ref18;
     return getPresetsSvgFilters(presets);
   });
 }
@@ -441,20 +667,39 @@ function toSvgFilters(tree, blockSelectors) {
 const getBlockSelectors = blockTypes => {
   const result = {};
   blockTypes.forEach(blockType => {
-    var _blockType$supports$_, _blockType$supports, _blockType$supports$c, _blockType$supports2, _blockType$supports2$;
+    var _blockType$supports$_, _blockType$supports, _blockType$supports$c, _blockType$supports2, _blockType$supports2$, _blockType$supports3, _blockType$supports4, _blockType$supports4$, _blockType$supports4$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; // For each block support feature add any custom selectors.
+
+    const featureSelectors = {};
+    Object.entries(BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS).forEach(_ref19 => {
+      var _blockType$supports5, _blockType$supports5$;
+
+      let [featureKey, featureName] = _ref19;
+      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] = (0, _utils.scopeSelector)(selector, featureSelector);
+      }
+    });
     result[name] = {
+      duotoneSelector,
+      fallbackGapValue,
+      featureSelectors: Object.keys(featureSelectors).length ? featureSelectors : undefined,
+      hasLayoutSupport,
       name,
-      selector,
-      duotoneSelector
+      selector
     };
   });
   return result;
 };
 
+exports.getBlockSelectors = getBlockSelectors;
+
 function useGlobalStylesOutput() {
   const [stylesheets, setStylesheets] = (0, _element.useState)([]);
   const [settings, setSettings] = (0, _element.useState)({});
@@ -464,6 +709,8 @@ function useGlobalStylesOutput() {
   } = (0, _element.useContext)(_context.GlobalStylesContext);
   const [blockGap] = (0, _hooks.useSetting)('spacing.blockGap');
   const hasBlockGapSupport = blockGap !== null;
+  const hasFallbackGapSupport = !hasBlockGapSupport; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback styles support.
+
   (0, _element.useEffect)(() => {
     if (!(mergedConfig !== null && mergedConfig !== void 0 && mergedConfig.styles) || !(mergedConfig !== null && mergedConfig !== void 0 && mergedConfig.settings)) {
       return;
@@ -471,7 +718,7 @@ function useGlobalStylesOutput() {
 
     const blockSelectors = getBlockSelectors((0, _blocks.getBlockTypes)());
     const customProperties = toCustomProperties(mergedConfig, blockSelectors);
-    const globalStyles = toStyles(mergedConfig, blockSelectors, hasBlockGapSupport);
+    const globalStyles = toStyles(mergedConfig, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport);
     const filters = toSvgFilters(mergedConfig, blockSelectors);
     setStylesheets([{
       css: customProperties,
@@ -482,7 +729,7 @@ function useGlobalStylesOutput() {
     }]);
     setSettings(mergedConfig.settings);
     setSvgFilters(filters);
-  }, [mergedConfig]);
+  }, [hasBlockGapSupport, hasFallbackGapSupport, mergedConfig]);
   return [stylesheets, settings, svgFilters, hasBlockGapSupport];
 }
 //# sourceMappingURL=use-global-styles-output.js.map