@wordpress/block-editor 11.1.0 → 11.3.0

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

@@ -0,0 +1,930 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * External dependencies
+ */
+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 { useSelect } from '@wordpress/data';
+import { useContext, useMemo } from '@wordpress/element';
+import { getCSSRules } from '@wordpress/style-engine';
+/**
+ * Internal dependencies
+ */
+
+import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, scopeSelector } from './utils';
+import { getTypographyFontSizeValue } from './typography-utils';
+import { GlobalStylesContext } from './context';
+import { useGlobalSetting } from './hooks';
+import { PresetDuotoneFilter } from '../duotone/components';
+import { getGapCSSValue } from '../../hooks/gap';
+import { store as blockEditorStore } from '../../store'; // 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 (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})`;
+  }
+
+  return uncompiledValue;
+}
+/**
+ * Transform given preset tree into a set of style declarations.
+ *
+ * @param {Object} blockPresets
+ * @param {Object} mergedSettings Merged theme.json settings.
+ *
+ * @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 PRESET_METADATA.reduce((declarations, _ref) => {
+    let {
+      path,
+      valueKey,
+      valueFunc,
+      cssVarInfix
+    } = _ref;
+    const presetByOrigin = get(blockPresets, path, []);
+    ['default', 'theme', 'custom'].forEach(origin => {
+      if (presetByOrigin[origin]) {
+        presetByOrigin[origin].forEach(value => {
+          if (valueKey && !valueFunc) {
+            declarations.push(`--wp--preset--${cssVarInfix}--${kebabCase(value.slug)}: ${value[valueKey]}`);
+          } else if (valueFunc && typeof valueFunc === 'function') {
+            declarations.push(`--wp--preset--${cssVarInfix}--${kebabCase(value.slug)}: ${valueFunc(value, mergedSettings)}`);
+          }
+        });
+      }
+    });
+    return declarations;
+  }, []);
+}
+/**
+ * Transform given preset tree into a set of preset class declarations.
+ *
+ * @param {string} blockSelector
+ * @param {Object} blockPresets
+ * @return {string} CSS declarations for the preset classes.
+ */
+
+
+function getPresetsClasses(blockSelector) {
+  let blockPresets = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return PRESET_METADATA.reduce((declarations, _ref2) => {
+    let {
+      path,
+      cssVarInfix,
+      classes
+    } = _ref2;
+
+    if (!classes) {
+      return declarations;
+    }
+
+    const presetByOrigin = get(blockPresets, path, []);
+    ['default', 'theme', 'custom'].forEach(origin => {
+      if (presetByOrigin[origin]) {
+        presetByOrigin[origin].forEach(_ref3 => {
+          let {
+            slug
+          } = _ref3;
+          classes.forEach(_ref4 => {
+            let {
+              classSuffix,
+              propertyName
+            } = _ref4;
+            const classSelectorToUse = `.has-${kebabCase(slug)}-${classSuffix}`;
+            const selectorToUse = blockSelector.split(',') // Selector can be "h1, h2, h3"
+            .map(selector => `${selector}${classSelectorToUse}`).join(',');
+            const value = `var(--wp--preset--${cssVarInfix}--${kebabCase(slug)})`;
+            declarations += `${selectorToUse}{${propertyName}: ${value} !important;}`;
+          });
+        });
+      }
+    });
+    return declarations;
+  }, '');
+}
+
+function getPresetsSvgFilters() {
+  let blockPresets = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  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, {
+      preset: preset,
+      key: preset.slug
+    })));
+  });
+}
+
+function flattenTree() {
+  let input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let prefix = arguments.length > 1 ? arguments[1] : undefined;
+  let token = arguments.length > 2 ? arguments[2] : undefined;
+  let result = [];
+  Object.keys(input).forEach(key => {
+    const newKey = prefix + kebabCase(key.replace('/', '-'));
+    const newLeaf = input[key];
+
+    if (newLeaf instanceof Object) {
+      const newPrefix = newKey + token;
+      result = [...result, ...flattenTree(newLeaf, newPrefix, token)];
+    } else {
+      result.push(`${newKey}: ${newLeaf}`);
+    }
+  });
+  return result;
+}
+/**
+ * Gets variation selector string from feature selector.
+ *
+ * @param {string} featureSelector        The feature selector.
+ *
+ * @param {string} styleVariationSelector The style variation selector.
+ * @return {string} Combined selector string.
+ *
+ */
+
+
+function concatFeatureVariationSelectorString(featureSelector, styleVariationSelector) {
+  const featureSelectors = featureSelector.split(',');
+  const combinedSelectors = [];
+  featureSelectors.forEach(selector => {
+    combinedSelectors.push(`${styleVariationSelector.trim()}${selector.trim()}`);
+  });
+  return combinedSelectors.join(', ');
+}
+/**
+ * Transform given style tree into a set of style declarations.
+ *
+ * @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.
+ */
+
+
+export 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 = ROOT_BLOCK_SELECTOR === selector;
+  const output = Object.entries(STYLE_PROPERTY).reduce((declarations, _ref5) => {
+    let [key, {
+      value,
+      properties,
+      useEngine,
+      rootOnly
+    }] = _ref5;
+
+    if (rootOnly && !isRoot) {
+      return declarations;
+    }
+
+    const pathToValue = value;
+
+    if (pathToValue[0] === 'elements' || useEngine) {
+      return declarations;
+    }
+
+    const styleValue = 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 => {
+        const [name, prop] = entry;
+
+        if (!get(styleValue, [prop], false)) {
+          // Do not create a declaration
+          // for sub-properties that don't have any value.
+          return;
+        }
+
+        const cssProperty = name.startsWith('--') ? name : kebabCase(name);
+        declarations.push(`${cssProperty}: ${compileStyleValue(get(styleValue, [prop]))}`);
+      });
+    } else if (get(blockStyles, pathToValue, false)) {
+      const cssProperty = key.startsWith('--') ? key : kebabCase(key);
+      declarations.push(`${cssProperty}: ${compileStyleValue(get(blockStyles, pathToValue))}`);
+    }
+
+    return declarations;
+  }, []); // 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 = 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 : kebabCase(rule.key);
+    let ruleValue = rule.value;
+
+    if (typeof ruleValue !== 'string' && (_ruleValue = ruleValue) !== null && _ruleValue !== void 0 && _ruleValue.ref) {
+      var _ruleValue2;
+
+      const refPath = ruleValue.ref.split('.');
+      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)) {
+        return;
+      }
+    } // Calculate fluid typography rules where available.
+
+
+    if (cssProperty === 'font-size') {
+      var _tree$settings;
+
+      /*
+       * getTypographyFontSizeValue() will check
+       * if fluid typography has been activated and also
+       * whether the incoming value can be converted to a fluid value.
+       * Values that already have a "clamp()" function will not pass the test,
+       * and therefore the original $value will be returned.
+       */
+      ruleValue = getTypographyFontSizeValue({
+        size: ruleValue
+      }, tree === null || tree === void 0 ? void 0 : (_tree$settings = tree.settings) === null || _tree$settings === void 0 ? void 0 : _tree$settings.typography);
+    }
+
+    output.push(`${cssProperty}: ${ruleValue}`);
+  });
+  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.
+ */
+
+export function getLayoutStyles(_ref6) {
+  var _style$spacing, _tree$settings2, _tree$settings2$layou, _tree$settings3, _tree$settings3$layou;
+
+  let {
+    tree,
+    style,
+    selector,
+    hasBlockGapSupport,
+    hasFallbackGapSupport,
+    fallbackGapValue
+  } = _ref6;
+  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.
+
+  if (hasFallbackGapSupport) {
+    if (selector === ROOT_BLOCK_SELECTOR) {
+      gapValue = !gapValue ? '0.5em' : gapValue;
+    } else if (!hasBlockGapSupport && fallbackGapValue) {
+      gapValue = fallbackGapValue;
+    }
+  }
+
+  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 => {
+      let {
+        className,
+        name,
+        spacingStyles
+      } = _ref7;
+
+      // Allow outputting fallback gap styles for flex layout type when block gap support isn't available.
+      if (!hasBlockGapSupport && 'flex' !== 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) {
+            let combinedSelector = '';
+
+            if (!hasBlockGapSupport) {
+              // 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) || ''}`;
+            }
+
+            ruleset += `${combinedSelector} { ${declarations.join('; ')}; }`;
+          }
+        });
+      }
+    }); // For backwards compatibility, ensure the legacy block gap CSS variable is still available.
+
+    if (selector === ROOT_BLOCK_SELECTOR && hasBlockGapSupport) {
+      ruleset += `${selector} { --wp--style--block-gap: ${gapValue}; }`;
+    }
+  } // Output base styles
+
+
+  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 => {
+      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;
+}
+export const getNodesWithStyles = (tree, blockSelectors) => {
+  var _tree$styles$blocks, _tree$styles3;
+
+  const nodes = [];
+
+  if (!(tree !== null && tree !== void 0 && tree.styles)) {
+    return nodes;
+  }
+
+  const pickStyleKeys = treeToPickFrom => Object.fromEntries(Object.entries(treeToPickFrom !== null && treeToPickFrom !== void 0 ? treeToPickFrom : {}).filter(_ref11 => {
+    let [key] = _ref11;
+    return ['border', 'color', 'dimensions', 'spacing', 'typography', 'filter', 'outline', 'shadow'].includes(key);
+  })); // Top-level.
+
+
+  const styles = pickStyleKeys(tree.styles);
+
+  if (!!styles) {
+    nodes.push({
+      styles,
+      selector: ROOT_BLOCK_SELECTOR
+    });
+  }
+
+  Object.entries(ELEMENTS).forEach(_ref12 => {
+    var _tree$styles;
+
+    let [name, selector] = _ref12;
+
+    if (!!((_tree$styles = tree.styles) !== null && _tree$styles !== void 0 && _tree$styles.elements[name])) {
+      var _tree$styles2;
+
+      nodes.push({
+        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.
+
+  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 => {
+    var _blockSelectors$block, _node$elements;
+
+    let [blockName, node] = _ref13;
+    const blockStyles = pickStyleKeys(node);
+
+    if (node !== null && node !== void 0 && node.variations) {
+      const variations = {};
+      Object.keys(node.variations).forEach(variation => {
+        variations[variation] = pickStyleKeys(node.variations[variation]);
+      });
+      blockStyles.variations = variations;
+    }
+
+    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[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(_ref14 => {
+      let [elementName, value] = _ref14;
+
+      if (!!value && !!(blockSelectors !== null && blockSelectors !== void 0 && blockSelectors[blockName]) && !!(ELEMENTS !== null && ELEMENTS !== void 0 && ELEMENTS[elementName])) {
+        nodes.push({
+          styles: value,
+          selector: blockSelectors[blockName].selector.split(',').map(sel => {
+            const elementSelectors = ELEMENTS[elementName].split(',');
+            return elementSelectors.map(elementSelector => sel + ' ' + elementSelector);
+          }).join(',')
+        });
+      }
+    });
+  });
+  return nodes;
+};
+export const getNodesWithSettings = (tree, blockSelectors) => {
+  var _tree$settings4, _tree$settings$blocks, _tree$settings5;
+
+  const nodes = [];
+
+  if (!(tree !== null && tree !== void 0 && tree.settings)) {
+    return nodes;
+  }
+
+  const pickPresets = treeToPickFrom => {
+    const presets = {};
+    PRESET_METADATA.forEach(_ref15 => {
+      let {
+        path
+      } = _ref15;
+      const value = get(treeToPickFrom, path, false);
+
+      if (value !== false) {
+        set(presets, path, value);
+      }
+    });
+    return presets;
+  }; // Top-level.
+
+
+  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) {
+    nodes.push({
+      presets,
+      custom,
+      selector: ROOT_BLOCK_SELECTOR
+    });
+  } // 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;
+    const blockPresets = pickPresets(node);
+    const blockCustom = node.custom;
+
+    if (!isEmpty(blockPresets) || !!blockCustom) {
+      nodes.push({
+        presets: blockPresets,
+        custom: blockCustom,
+        selector: blockSelectors[blockName].selector
+      });
+    }
+  });
+  return nodes;
+};
+export const toCustomProperties = (tree, blockSelectors) => {
+  const settings = getNodesWithSettings(tree, blockSelectors);
+  let ruleset = '';
+  settings.forEach(_ref17 => {
+    let {
+      presets,
+      custom,
+      selector
+    } = _ref17;
+    const declarations = getPresetsDeclarations(presets, tree === null || tree === void 0 ? void 0 : tree.settings);
+    const customProps = flattenTree(custom, '--wp--custom--', '--');
+
+    if (customProps.length > 0) {
+      declarations.push(...customProps);
+    }
+
+    if (declarations.length > 0) {
+      ruleset = ruleset + `${selector}{${declarations.join(';')};}`;
+    }
+  });
+  return ruleset;
+};
+export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport) {
+  var _tree$settings6, _tree$settings7;
+
+  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$settings6 = tree.settings) === null || _tree$settings6 === void 0 ? void 0 : _tree$settings6.useRootPaddingAwareAlignments;
+  const {
+    contentSize,
+    wideSize
+  } = (tree === null || tree === void 0 ? void 0 : (_tree$settings7 = tree.settings) === null || _tree$settings7 === void 0 ? void 0 : _tree$settings7.layout) || {};
+  /*
+   * Reset default browser margin on the root body element.
+   * This is set on the root selector **before** generating the ruleset
+   * from the `theme.json`. This is to ensure that if the `theme.json` declares
+   * `margin` in its `spacing` declaration for the `body` element then these
+   * user-generated values take precedence in the CSS cascade.
+   * @link https://github.com/WordPress/gutenberg/issues/36147.
+   */
+
+  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 :where(.has-global-padding) { padding-right: 0; padding-left: 0; }
+			.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 :where(.has-global-padding) > .alignfull { margin-right: 0; margin-left: 0; }
+			.has-global-padding > .alignfull:where(:not(.has-global-padding)) > :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); }
+			.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 0;`;
+  }
+
+  ruleset += '}';
+  nodesWithStyles.forEach(_ref18 => {
+    let {
+      selector,
+      duotoneSelector,
+      styles,
+      fallbackGapValue,
+      hasLayoutSupport,
+      featureSelectors,
+      styleVariationSelectors
+    } = _ref18;
+
+    // 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(';')} }`;
+          }
+        }
+      });
+    }
+
+    if (styleVariationSelectors) {
+      Object.entries(styleVariationSelectors).forEach(_ref20 => {
+        var _styles$variations;
+
+        let [styleVariationName, styleVariationSelector] = _ref20;
+
+        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;
+
+              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];
+
+                if (!!featureDeclarations.length) {
+                  ruleset = ruleset + `${concatFeatureVariationSelectorString(featureSelector, styleVariationSelector)}{${featureDeclarations.join(';')} }`;
+                }
+              }
+            });
+          } // 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);
+
+          if (!!styleVariationDeclarations.length) {
+            ruleset = ruleset + `${styleVariationSelector}{${styleVariationDeclarations.join(';')}}`;
+          }
+        }
+      });
+    }
+
+    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 duotoneDeclarations = getStylesDeclarations(duotoneStyles);
+
+      if (duotoneDeclarations.length > 0) {
+        ruleset = ruleset + `${duotoneSelector}{${duotoneDeclarations.join(';')};}`;
+      }
+    } // Process blockGap and layout styles.
+
+
+    if (!disableLayoutStyles && (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).
+
+
+    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(_ref22 => {
+      let [key] = _ref22;
+      return key.startsWith(':');
+    });
+
+    if (pseudoSelectorStyles !== null && pseudoSelectorStyles !== void 0 && pseudoSelectorStyles.length) {
+      pseudoSelectorStyles.forEach(_ref23 => {
+        let [pseudoKey, pseudoStyle] = _ref23;
+        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 */
+
+  ruleset = ruleset + '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
+  ruleset = ruleset + '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
+  ruleset = ruleset + '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
+
+  if (hasBlockGapSupport) {
+    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 = 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}; }`;
+  }
+
+  nodesWithSettings.forEach(_ref24 => {
+    let {
+      selector,
+      presets
+    } = _ref24;
+
+    if (ROOT_BLOCK_SELECTOR === selector) {
+      // Do not add extra specificity for top-level classes.
+      selector = '';
+    }
+
+    const classes = getPresetsClasses(selector, presets);
+
+    if (!isEmpty(classes)) {
+      ruleset = ruleset + classes;
+    }
+  });
+  return ruleset;
+};
+export function toSvgFilters(tree, blockSelectors) {
+  const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
+  return nodesWithSettings.flatMap(_ref25 => {
+    let {
+      presets
+    } = _ref25;
+    return getPresetsSvgFilters(presets);
+  });
+}
+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;
+
+    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 blockStyleVariations = getBlockStyles(name);
+    const styleVariationSelectors = {};
+
+    if (blockStyleVariations !== null && blockStyleVariations !== void 0 && blockStyleVariations.length) {
+      blockStyleVariations.forEach(variation => {
+        const styleVariationSelector = `.is-style-${variation.name}${selector}`;
+        styleVariationSelectors[variation.name] = styleVariationSelector;
+      });
+    } // 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);
+      }
+    });
+    result[name] = {
+      duotoneSelector,
+      fallbackGapValue,
+      featureSelectors: Object.keys(featureSelectors).length ? featureSelectors : undefined,
+      hasLayoutSupport,
+      name,
+      selector,
+      styleVariationSelectors: Object.keys(styleVariationSelectors).length ? styleVariationSelectors : undefined
+    };
+  });
+  return result;
+};
+/**
+ * If there is a separator block whose color is defined in theme.json via background,
+ * update the separator color to the same value by using border color.
+ *
+ * @param {Object} config Theme.json configuration file object.
+ * @return {Object} configTheme.json configuration file object updated.
+ */
+
+function updateConfigWithSeparator(config) {
+  var _config$styles, _config$styles2, _config$styles2$block, _config$styles3, _config$styles3$block, _config$styles4, _config$styles4$block;
+
+  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);
+
+  if (needsSeparatorStyleUpdate) {
+    var _config$styles5;
+
+    return { ...config,
+      styles: { ...config.styles,
+        blocks: { ...config.styles.blocks,
+          'core/separator': { ...config.styles.blocks['core/separator'],
+            color: { ...config.styles.blocks['core/separator'].color,
+              text: (_config$styles5 = config.styles) === null || _config$styles5 === void 0 ? void 0 : _config$styles5.blocks['core/separator'].color.background
+            }
+          }
+        }
+      }
+    };
+  }
+
+  return config;
+}
+
+const processCSSNesting = (css, blockSelector) => {
+  let processedCSS = ''; // Split CSS nested rules.
+
+  const parts = css.split('&');
+  parts.forEach(part => {
+    processedCSS += !part.includes('{') ? blockSelector + '{' + part + '}' // If the part doesn't contain braces, it applies to the root level.
+    : blockSelector + part; // Prepend the selector, which effectively replaces the "&" character.
+  });
+  return processedCSS;
+};
+
+export function useGlobalStylesOutput() {
+  let {
+    merged: mergedConfig
+  } = useContext(GlobalStylesContext);
+  const [blockGap] = useGlobalSetting('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.
+
+  const disableLayoutStyles = useSelect(select => {
+    const {
+      getSettings
+    } = select(blockEditorStore);
+    return !!getSettings().disableLayoutStyles;
+  });
+  const getBlockStyles = useSelect(select => {
+    return select(blocksStore).getBlockStyles;
+  }, []);
+  return useMemo(() => {
+    var _mergedConfig, _mergedConfig2, _mergedConfig$styles$;
+
+    if (!((_mergedConfig = mergedConfig) !== null && _mergedConfig !== void 0 && _mergedConfig.styles) || !((_mergedConfig2 = mergedConfig) !== null && _mergedConfig2 !== void 0 && _mergedConfig2.settings)) {
+      return [];
+    }
+
+    mergedConfig = updateConfigWithSeparator(mergedConfig);
+    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 = [{
+      css: customProperties,
+      isGlobalStyles: true
+    }, {
+      css: globalStyles,
+      isGlobalStyles: true
+    }, // Load custom CSS in own stylesheet so that any invalid CSS entered in the input won't break all the global styles in the editor.
+    {
+      css: (_mergedConfig$styles$ = mergedConfig.styles.css) !== null && _mergedConfig$styles$ !== void 0 ? _mergedConfig$styles$ : '',
+      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.
+
+    getBlockTypes().forEach(blockType => {
+      var _mergedConfig$styles$2;
+
+      if ((_mergedConfig$styles$2 = mergedConfig.styles.blocks[blockType.name]) !== null && _mergedConfig$styles$2 !== void 0 && _mergedConfig$styles$2.css) {
+        var _mergedConfig$styles$3;
+
+        const selector = blockSelectors[blockType.name].selector;
+        stylesheets.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];
+  }, [hasBlockGapSupport, hasFallbackGapSupport, mergedConfig, disableLayoutStyles]);
+}
+//# sourceMappingURL=use-global-styles-output.js.map