@wordpress/edit-site 4.10.0 → 4.12.1-next.d6164808d3.0

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

@@ -3,8 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getBlockSelectors = void 0;
 exports.getLayoutStyles = getLayoutStyles;
-exports.toStyles = exports.toCustomProperties = exports.getNodesWithStyles = exports.getNodesWithSettings = void 0;
+exports.getNodesWithStyles = exports.getNodesWithSettings = void 0;
+exports.getStylesDeclarations = getStylesDeclarations;
+exports.toStyles = exports.toCustomProperties = void 0;
 exports.toSvgFilters = toSvgFilters;
 exports.useGlobalStylesOutput = useGlobalStylesOutput;
 
@@ -14,6 +17,8 @@ var _lodash = require("lodash");
 
 var _blocks = require("@wordpress/blocks");
 
+var _data = require("@wordpress/data");
+
 var _styleEngine = require("@wordpress/style-engine");
 
 var _blockEditor = require("@wordpress/block-editor");
@@ -35,12 +40,23 @@ 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) {
+  var _uncompiledValue$star;
+
   const VARIABLE_REFERENCE_PREFIX = 'var:';
   const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
   const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
 
-  if ((0, _lodash.startsWith)(uncompiledValue, VARIABLE_REFERENCE_PREFIX)) {
+  if (uncompiledValue !== null && uncompiledValue !== void 0 && (_uncompiledValue$star = uncompiledValue.startsWith) !== null && _uncompiledValue$star !== void 0 && _uncompiledValue$star.call(uncompiledValue, VARIABLE_REFERENCE_PREFIX)) {
     const variable = uncompiledValue.slice(VARIABLE_REFERENCE_PREFIX.length).split(VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE).join(VARIABLE_PATH_SEPARATOR_TOKEN_STYLE);
     return `var(--wp--${variable})`;
   }
@@ -51,13 +67,15 @@ function compileStyleValue(uncompiledValue) {
  * Transform given preset tree into a set of style declarations.
  *
  * @param {Object} blockPresets
+ * @param {Object} mergedSettings Merged theme.json settings.
  *
- * @return {Array} An array of style declarations.
+ * @return {Array<Object>} An array of style declarations.
  */
 
 
 function getPresetsDeclarations() {
   let blockPresets = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let mergedSettings = arguments.length > 1 ? arguments[1] : undefined;
   return (0, _lodash.reduce)(_utils.PRESET_METADATA, (declarations, _ref) => {
     let {
       path,
@@ -69,10 +87,10 @@ function getPresetsDeclarations() {
     ['default', 'theme', 'custom'].forEach(origin => {
       if (presetByOrigin[origin]) {
         presetByOrigin[origin].forEach(value => {
-          if (valueKey) {
+          if (valueKey && !valueFunc) {
             declarations.push(`--wp--preset--${cssVarInfix}--${(0, _lodash.kebabCase)(value.slug)}: ${value[valueKey]}`);
           } else if (valueFunc && typeof valueFunc === 'function') {
-            declarations.push(`--wp--preset--${cssVarInfix}--${(0, _lodash.kebabCase)(value.slug)}: ${valueFunc(value)}`);
+            declarations.push(`--wp--preset--${cssVarInfix}--${(0, _lodash.kebabCase)(value.slug)}: ${valueFunc(value, mergedSettings)}`);
           }
         });
       }
@@ -160,7 +178,13 @@ 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.
+ *
+ * @param {Object}  tree                A theme.json tree containing layout definitions.
  *
  * @return {Array} An array of style declarations.
  */
@@ -168,19 +192,34 @@ 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;
+  let tree = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  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) {
       return declarations;
     }
 
-    const styleValue = (0, _lodash.get)(blockStyles, pathToValue);
+    const styleValue = (0, _lodash.get)(blockStyles, pathToValue); // Root-level padding styles don't currently support strings with CSS shorthand values.
+    // This may change: https://github.com/WordPress/gutenberg/issues/40132.
+
+    if (key === '--wp--style--root--padding' && (typeof styleValue === 'string' || !useRootPaddingAlign)) {
+      return declarations;
+    }
 
     if (!!properties && typeof styleValue !== 'string') {
       Object.entries(properties).forEach(entry => {
@@ -192,7 +231,7 @@ 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 ((0, _lodash.get)(blockStyles, pathToValue, false)) {
@@ -206,8 +245,29 @@ function getStylesDeclarations() {
 
   const extraRules = (0, _styleEngine.getCSSRules)(blockStyles);
   extraRules.forEach(rule => {
+    var _ruleValue;
+
+    // Don't output padding properties if padding variables are set.
+    if (isRoot && useRootPaddingAlign && rule.key.startsWith('padding')) {
+      return;
+    }
+
     const cssProperty = rule.key.startsWith('--') ? rule.key : (0, _lodash.kebabCase)(rule.key);
-    output.push(`${cssProperty}: ${compileStyleValue(rule.value)}`);
+    let ruleValue = rule.value;
+
+    if (typeof ruleValue !== 'string' && (_ruleValue = ruleValue) !== null && _ruleValue !== void 0 && _ruleValue.ref) {
+      var _ruleValue2;
+
+      const refPath = ruleValue.ref.split('.');
+      ruleValue = (0, _lodash.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)) {
+        return;
+      }
+    }
+
+    output.push(`${cssProperty}: ${ruleValue}`);
   });
   return output;
 }
@@ -274,7 +334,15 @@ function getLayoutStyles(_ref6) {
           }
 
           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) || ''}`;
+            let combinedSelector = '';
+
+            if (!hasBlockGapSupport) {
+              // For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles.
+              combinedSelector = selector === _utils.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 === _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('; ')}; }`;
           }
         });
@@ -324,7 +392,7 @@ function getLayoutStyles(_ref6) {
 }
 
 const getNodesWithStyles = (tree, blockSelectors) => {
-  var _tree$styles, _tree$styles2;
+  var _tree$styles3;
 
   const nodes = [];
 
@@ -344,16 +412,20 @@ const getNodesWithStyles = (tree, blockSelectors) => {
     });
   }
 
-  (0, _lodash.forEach)((_tree$styles = tree.styles) === null || _tree$styles === void 0 ? void 0 : _tree$styles.elements, (value, key) => {
-    if (!!value && !!_blocks.__EXPERIMENTAL_ELEMENTS[key]) {
+  (0, _lodash.forEach)(_blocks.__EXPERIMENTAL_ELEMENTS, (selector, name) => {
+    var _tree$styles;
+
+    if (!!((_tree$styles = tree.styles) !== null && _tree$styles !== void 0 && _tree$styles.elements[name])) {
+      var _tree$styles2;
+
       nodes.push({
-        styles: value,
-        selector: _blocks.__EXPERIMENTAL_ELEMENTS[key]
+        styles: (_tree$styles2 = tree.styles) === null || _tree$styles2 === void 0 ? void 0 : _tree$styles2.elements[name],
+        selector
       });
     }
   }); // Iterate over blocks: they can have styles & elements.
 
-  (0, _lodash.forEach)((_tree$styles2 = tree.styles) === null || _tree$styles2 === void 0 ? void 0 : _tree$styles2.blocks, (node, blockName) => {
+  (0, _lodash.forEach)((_tree$styles3 = tree.styles) === null || _tree$styles3 === void 0 ? void 0 : _tree$styles3.blocks, (node, blockName) => {
     var _blockSelectors$block;
 
     const blockStyles = pickStyleKeys(node);
@@ -364,7 +436,8 @@ const getNodesWithStyles = (tree, blockSelectors) => {
         fallbackGapValue: blockSelectors[blockName].fallbackGapValue,
         hasLayoutSupport: blockSelectors[blockName].hasLayoutSupport,
         selector: blockSelectors[blockName].selector,
-        styles: blockStyles
+        styles: blockStyles,
+        featureSelectors: blockSelectors[blockName].featureSelectors
       });
     }
 
@@ -451,7 +524,7 @@ const toCustomProperties = (tree, blockSelectors) => {
       custom,
       selector
     } = _ref12;
-    const declarations = getPresetsDeclarations(presets);
+    const declarations = getPresetsDeclarations(presets, tree === null || tree === void 0 ? void 0 : tree.settings);
     const customProps = flattenTree(custom, '--wp--custom--', '--');
 
     if (customProps.length > 0) {
@@ -467,9 +540,17 @@ const toCustomProperties = (tree, blockSelectors) => {
 
 exports.toCustomProperties = toCustomProperties;
 
-const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport) => {
+const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport) {
+  var _tree$settings5, _tree$settings6;
+
+  let disableLayoutStyles = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   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;
+  const {
+    contentSize,
+    wideSize
+  } = (tree === null || tree === void 0 ? void 0 : (_tree$settings6 = tree.settings) === null || _tree$settings6 === void 0 ? void 0 : _tree$settings6.layout) || {};
   /*
    * Reset default browser margin on the root body element.
    * This is set on the root selector **before** generating the ruleset
@@ -479,15 +560,51 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSuppor
    * @link https://github.com/WordPress/gutenberg/issues/36147.
    */
 
-  let ruleset = 'body {margin: 0;}';
+  let ruleset = 'body {margin: 0;';
+
+  if (contentSize) {
+    ruleset += ` --wp--style--global--content-size: ${contentSize};`;
+  }
+
+  if (wideSize) {
+    ruleset += ` --wp--style--global--wide-size: ${wideSize};`;
+  }
+
+  if (useRootPaddingAlign) {
+    ruleset += '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);';
+  }
+
+  ruleset += '}';
   nodesWithStyles.forEach(_ref13 => {
     let {
       selector,
       duotoneSelector,
       styles,
       fallbackGapValue,
-      hasLayoutSupport
+      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) {
@@ -499,15 +616,13 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSuppor
     if (duotoneSelector) {
       const duotoneDeclarations = getStylesDeclarations(duotoneStyles);
 
-      if (duotoneDeclarations.length === 0) {
-        return;
+      if (duotoneDeclarations.length > 0) {
+        ruleset = ruleset + `${duotoneSelector}{${duotoneDeclarations.join(';')};}`;
       }
-
-      ruleset = ruleset + `${duotoneSelector}{${duotoneDeclarations.join(';')};}`;
     } // Process blockGap and layout styles.
 
 
-    if (_utils.ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport) {
+    if (!disableLayoutStyles && (_utils.ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport)) {
       ruleset += getLayoutStyles({
         tree,
         style: styles,
@@ -519,28 +634,28 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSuppor
     } // Process the remaining block styles (they use either normal block class or __experimentalSelector).
 
 
-    const declarations = getStylesDeclarations(styles);
+    const declarations = getStylesDeclarations(styles, selector, useRootPaddingAlign, tree);
 
     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(_ref14 => {
-      let [key] = _ref14;
+    const pseudoSelectorStyles = Object.entries(styles).filter(_ref15 => {
+      let [key] = _ref15;
       return key.startsWith(':');
     });
 
     if (pseudoSelectorStyles !== null && pseudoSelectorStyles !== void 0 && pseudoSelectorStyles.length) {
-      pseudoSelectorStyles.forEach(_ref15 => {
-        let [pseudoKey, pseudoStyle] = _ref15;
+      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 seperated
+        // 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
@@ -561,19 +676,19 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSuppor
   ruleset = ruleset + '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
 
   if (hasBlockGapSupport) {
-    var _tree$styles3, _tree$styles3$spacing;
+    var _tree$styles4, _tree$styles4$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';
+    const gapValue = (0, _blockEditor.__experimentalGetGapCSSValue)(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}; }`;
   }
 
-  nodesWithSettings.forEach(_ref16 => {
+  nodesWithSettings.forEach(_ref17 => {
     let {
       selector,
       presets
-    } = _ref16;
+    } = _ref17;
 
     if (_utils.ROOT_BLOCK_SELECTOR === selector) {
       // Do not add extra specificity for top-level classes.
@@ -593,10 +708,10 @@ exports.toStyles = toStyles;
 
 function toSvgFilters(tree, blockSelectors) {
   const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
-  return nodesWithSettings.flatMap(_ref17 => {
+  return nodesWithSettings.flatMap(_ref18 => {
     let {
       presets
-    } = _ref17;
+    } = _ref18;
     return getPresetsSvgFilters(presets);
   });
 }
@@ -610,10 +725,23 @@ const getBlockSelectors = blockTypes => {
     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 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
@@ -622,10 +750,9 @@ const getBlockSelectors = blockTypes => {
   return result;
 };
 
+exports.getBlockSelectors = getBlockSelectors;
+
 function useGlobalStylesOutput() {
-  const [stylesheets, setStylesheets] = (0, _element.useState)([]);
-  const [settings, setSettings] = (0, _element.useState)({});
-  const [svgFilters, setSvgFilters] = (0, _element.useState)({});
   const {
     merged: mergedConfig
   } = (0, _element.useContext)(_context.GlobalStylesContext);
@@ -633,25 +760,29 @@ function useGlobalStylesOutput() {
   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)(() => {
+  const disableLayoutStyles = (0, _data.useSelect)(select => {
+    const {
+      getSettings
+    } = select(_blockEditor.store);
+    return !!getSettings().disableLayoutStyles;
+  });
+  return (0, _element.useMemo)(() => {
     if (!(mergedConfig !== null && mergedConfig !== void 0 && mergedConfig.styles) || !(mergedConfig !== null && mergedConfig !== void 0 && mergedConfig.settings)) {
-      return;
+      return [];
     }
 
     const blockSelectors = getBlockSelectors((0, _blocks.getBlockTypes)());
     const customProperties = toCustomProperties(mergedConfig, blockSelectors);
-    const globalStyles = toStyles(mergedConfig, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport);
+    const globalStyles = toStyles(mergedConfig, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles);
     const filters = toSvgFilters(mergedConfig, blockSelectors);
-    setStylesheets([{
+    const stylesheets = [{
       css: customProperties,
       isGlobalStyles: true
     }, {
       css: globalStyles,
       isGlobalStyles: true
-    }]);
-    setSettings(mergedConfig.settings);
-    setSvgFilters(filters);
-  }, [hasBlockGapSupport, hasFallbackGapSupport, mergedConfig]);
-  return [stylesheets, settings, svgFilters, hasBlockGapSupport];
+    }];
+    return [stylesheets, mergedConfig.settings, filters];
+  }, [hasBlockGapSupport, hasFallbackGapSupport, mergedConfig, disableLayoutStyles]);
 }
 //# sourceMappingURL=use-global-styles-output.js.map