@wordpress/block-editor 15.6.1-next.36001005c.0 → 15.6.1

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

@@ -0,0 +1,979 @@
+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 { useContext, useMemo } from "@wordpress/element";
+import { getCSSRules, getCSSValueFromRawStyle } from "@wordpress/style-engine";
+import { privateApis as componentsPrivateApis } from "@wordpress/components";
+import {
+  PRESET_METADATA,
+  ROOT_BLOCK_SELECTOR,
+  ROOT_CSS_PROPERTIES_SELECTOR,
+  scopeSelector,
+  scopeFeatureSelectors,
+  appendToSelector,
+  getBlockStyleVariationSelector,
+  getResolvedValue
+} from "./utils";
+import { getBlockCSSSelector } from "./get-block-css-selector";
+import { getTypographyFontSizeValue } from "./typography-utils";
+import { GlobalStylesContext } from "./context";
+import { useGlobalSetting } from "./hooks";
+import { getDuotoneFilter } from "../duotone/utils";
+import { getGapCSSValue } from "../../hooks/gap";
+import { setBackgroundStyleDefaults } from "../../hooks/background";
+import { store as blockEditorStore } from "../../store";
+import { LAYOUT_DEFINITIONS } from "../../layouts/definitions";
+import { getValueFromObjectPath, setImmutably } from "../../utils/object";
+import { unlock } from "../../lock-unlock";
+const ELEMENT_CLASS_NAMES = {
+  button: "wp-element-button",
+  caption: "wp-element-caption"
+};
+const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
+  __experimentalBorder: "border",
+  color: "color",
+  spacing: "spacing",
+  typography: "typography"
+};
+const { kebabCase } = unlock(componentsPrivateApis);
+function getPresetsDeclarations(blockPresets = {}, mergedSettings) {
+  return PRESET_METADATA.reduce(
+    (declarations, { path, valueKey, valueFunc, cssVarInfix }) => {
+      const presetByOrigin = getValueFromObjectPath(
+        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;
+    },
+    []
+  );
+}
+function getPresetsClasses(blockSelector = "*", blockPresets = {}) {
+  return PRESET_METADATA.reduce(
+    (declarations, { path, cssVarInfix, classes }) => {
+      if (!classes) {
+        return declarations;
+      }
+      const presetByOrigin = getValueFromObjectPath(
+        blockPresets,
+        path,
+        []
+      );
+      ["default", "theme", "custom"].forEach((origin) => {
+        if (presetByOrigin[origin]) {
+          presetByOrigin[origin].forEach(({ slug }) => {
+            classes.forEach(({ classSuffix, propertyName }) => {
+              const classSelectorToUse = `.has-${kebabCase(
+                slug
+              )}-${classSuffix}`;
+              const selectorToUse = blockSelector.split(",").map(
+                (selector) => `${selector}${classSelectorToUse}`
+              ).join(",");
+              const value = `var(--wp--preset--${cssVarInfix}--${kebabCase(
+                slug
+              )})`;
+              declarations += `${selectorToUse}{${propertyName}: ${value} !important;}`;
+            });
+          });
+        }
+      });
+      return declarations;
+    },
+    ""
+  );
+}
+function getPresetsSvgFilters(blockPresets = {}) {
+  return PRESET_METADATA.filter(
+    // Duotone are the only type of filters for now.
+    (metadata) => metadata.path.at(-1) === "duotone"
+  ).flatMap((metadata) => {
+    const presetByOrigin = getValueFromObjectPath(
+      blockPresets,
+      metadata.path,
+      {}
+    );
+    return ["default", "theme"].filter((origin) => presetByOrigin[origin]).flatMap(
+      (origin) => presetByOrigin[origin].map(
+        (preset) => getDuotoneFilter(
+          `wp-duotone-${preset.slug}`,
+          preset.colors
+        )
+      )
+    ).join("");
+  });
+}
+function flattenTree(input = {}, prefix, token) {
+  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;
+}
+function concatFeatureVariationSelectorString(featureSelector, styleVariationSelector) {
+  const featureSelectors = featureSelector.split(",");
+  const combinedSelectors = [];
+  featureSelectors.forEach((selector) => {
+    combinedSelectors.push(
+      `${styleVariationSelector.trim()}${selector.trim()}`
+    );
+  });
+  return combinedSelectors.join(", ");
+}
+const getFeatureDeclarations = (selectors, styles) => {
+  const declarations = {};
+  Object.entries(selectors).forEach(([feature, selector]) => {
+    if (feature === "root" || !styles?.[feature]) {
+      return;
+    }
+    const isShorthand = typeof selector === "string";
+    if (!isShorthand) {
+      Object.entries(selector).forEach(
+        ([subfeature, subfeatureSelector]) => {
+          if (subfeature === "root" || !styles?.[feature][subfeature]) {
+            return;
+          }
+          const subfeatureStyles = {
+            [feature]: {
+              [subfeature]: styles[feature][subfeature]
+            }
+          };
+          const newDeclarations = getStylesDeclarations(subfeatureStyles);
+          declarations[subfeatureSelector] = [
+            ...declarations[subfeatureSelector] || [],
+            ...newDeclarations
+          ];
+          delete styles[feature][subfeature];
+        }
+      );
+    }
+    if (isShorthand || selector.root) {
+      const featureSelector = isShorthand ? selector : selector.root;
+      const featureStyles = { [feature]: styles[feature] };
+      const newDeclarations = getStylesDeclarations(featureStyles);
+      declarations[featureSelector] = [
+        ...declarations[featureSelector] || [],
+        ...newDeclarations
+      ];
+      delete styles[feature];
+    }
+  });
+  return declarations;
+};
+function getStylesDeclarations(blockStyles = {}, selector = "", useRootPaddingAlign, tree = {}, disableRootPadding = false) {
+  const isRoot = ROOT_BLOCK_SELECTOR === selector;
+  const output = Object.entries(STYLE_PROPERTY).reduce(
+    (declarations, [key, { value, properties, useEngine, rootOnly }]) => {
+      if (rootOnly && !isRoot) {
+        return declarations;
+      }
+      const pathToValue = value;
+      if (pathToValue[0] === "elements" || useEngine) {
+        return declarations;
+      }
+      const styleValue = getValueFromObjectPath(
+        blockStyles,
+        pathToValue
+      );
+      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 (!getValueFromObjectPath(styleValue, [prop], false)) {
+            return;
+          }
+          const cssProperty = name.startsWith("--") ? name : kebabCase(name);
+          declarations.push(
+            `${cssProperty}: ${getCSSValueFromRawStyle(
+              getValueFromObjectPath(styleValue, [prop])
+            )}`
+          );
+        });
+      } else if (getValueFromObjectPath(blockStyles, pathToValue, false)) {
+        const cssProperty = key.startsWith("--") ? key : kebabCase(key);
+        declarations.push(
+          `${cssProperty}: ${getCSSValueFromRawStyle(
+            getValueFromObjectPath(blockStyles, pathToValue)
+          )}`
+        );
+      }
+      return declarations;
+    },
+    []
+  );
+  if (!!blockStyles.background) {
+    if (blockStyles.background?.backgroundImage) {
+      blockStyles.background.backgroundImage = getResolvedValue(
+        blockStyles.background.backgroundImage,
+        tree
+      );
+    }
+    if (!isRoot && !!blockStyles.background?.backgroundImage?.id) {
+      blockStyles = {
+        ...blockStyles,
+        background: {
+          ...blockStyles.background,
+          ...setBackgroundStyleDefaults(blockStyles.background)
+        }
+      };
+    }
+  }
+  const extraRules = getCSSRules(blockStyles);
+  extraRules.forEach((rule) => {
+    if (isRoot && (useRootPaddingAlign || disableRootPadding) && rule.key.startsWith("padding")) {
+      return;
+    }
+    const cssProperty = rule.key.startsWith("--") ? rule.key : kebabCase(rule.key);
+    let ruleValue = getResolvedValue(rule.value, tree, null);
+    if (cssProperty === "font-size") {
+      ruleValue = getTypographyFontSizeValue(
+        { size: ruleValue },
+        tree?.settings
+      );
+    }
+    if (cssProperty === "aspect-ratio") {
+      output.push("min-height: unset");
+    }
+    output.push(`${cssProperty}: ${ruleValue}`);
+  });
+  return output;
+}
+function getLayoutStyles({
+  layoutDefinitions = LAYOUT_DEFINITIONS,
+  style,
+  selector,
+  hasBlockGapSupport,
+  hasFallbackGapSupport,
+  fallbackGapValue
+}) {
+  let ruleset = "";
+  let gapValue = hasBlockGapSupport ? getGapCSSValue(style?.spacing?.blockGap) : "";
+  if (hasFallbackGapSupport) {
+    if (selector === ROOT_BLOCK_SELECTOR) {
+      gapValue = !gapValue ? "0.5em" : gapValue;
+    } else if (!hasBlockGapSupport && fallbackGapValue) {
+      gapValue = fallbackGapValue;
+    }
+  }
+  if (gapValue && layoutDefinitions) {
+    Object.values(layoutDefinitions).forEach(
+      ({ className, name, spacingStyles }) => {
+        if (!hasBlockGapSupport && "flex" !== name && "grid" !== name) {
+          return;
+        }
+        if (spacingStyles?.length) {
+          spacingStyles.forEach((spacingStyle) => {
+            const declarations = [];
+            if (spacingStyle.rules) {
+              Object.entries(spacingStyle.rules).forEach(
+                ([cssProperty, cssValue]) => {
+                  declarations.push(
+                    `${cssProperty}: ${cssValue ? cssValue : gapValue}`
+                  );
+                }
+              );
+            }
+            if (declarations.length) {
+              let combinedSelector = "";
+              if (!hasBlockGapSupport) {
+                combinedSelector = selector === ROOT_BLOCK_SELECTOR ? `:where(.${className}${spacingStyle?.selector || ""})` : `:where(${selector}.${className}${spacingStyle?.selector || ""})`;
+              } else {
+                combinedSelector = selector === ROOT_BLOCK_SELECTOR ? `:root :where(.${className})${spacingStyle?.selector || ""}` : `:root :where(${selector}-${className})${spacingStyle?.selector || ""}`;
+              }
+              ruleset += `${combinedSelector} { ${declarations.join(
+                "; "
+              )}; }`;
+            }
+          });
+        }
+      }
+    );
+    if (selector === ROOT_BLOCK_SELECTOR && hasBlockGapSupport) {
+      ruleset += `${ROOT_CSS_PROPERTIES_SELECTOR} { --wp--style--block-gap: ${gapValue}; }`;
+    }
+  }
+  if (selector === ROOT_BLOCK_SELECTOR && layoutDefinitions) {
+    const validDisplayModes = ["block", "flex", "grid"];
+    Object.values(layoutDefinitions).forEach(
+      ({ className, displayMode, baseStyles }) => {
+        if (displayMode && validDisplayModes.includes(displayMode)) {
+          ruleset += `${selector} .${className} { display:${displayMode}; }`;
+        }
+        if (baseStyles?.length) {
+          baseStyles.forEach((baseStyle) => {
+            const declarations = [];
+            if (baseStyle.rules) {
+              Object.entries(baseStyle.rules).forEach(
+                ([cssProperty, cssValue]) => {
+                  declarations.push(
+                    `${cssProperty}: ${cssValue}`
+                  );
+                }
+              );
+            }
+            if (declarations.length) {
+              const combinedSelector = `.${className}${baseStyle?.selector || ""}`;
+              ruleset += `${combinedSelector} { ${declarations.join(
+                "; "
+              )}; }`;
+            }
+          });
+        }
+      }
+    );
+  }
+  return ruleset;
+}
+const STYLE_KEYS = [
+  "border",
+  "color",
+  "dimensions",
+  "spacing",
+  "typography",
+  "filter",
+  "outline",
+  "shadow",
+  "background"
+];
+function pickStyleKeys(treeToPickFrom) {
+  if (!treeToPickFrom) {
+    return {};
+  }
+  const entries = Object.entries(treeToPickFrom);
+  const pickedEntries = entries.filter(
+    ([key]) => STYLE_KEYS.includes(key)
+  );
+  const clonedEntries = pickedEntries.map(([key, style]) => [
+    key,
+    JSON.parse(JSON.stringify(style))
+  ]);
+  return Object.fromEntries(clonedEntries);
+}
+const getNodesWithStyles = (tree, blockSelectors) => {
+  const nodes = [];
+  if (!tree?.styles) {
+    return nodes;
+  }
+  const styles = pickStyleKeys(tree.styles);
+  if (styles) {
+    nodes.push({
+      styles,
+      selector: ROOT_BLOCK_SELECTOR,
+      // Root selector (body) styles should not be wrapped in `:root where()` to keep
+      // specificity at (0,0,1) and maintain backwards compatibility.
+      skipSelectorWrapper: true
+    });
+  }
+  Object.entries(ELEMENTS).forEach(([name, selector]) => {
+    if (tree.styles?.elements?.[name]) {
+      nodes.push({
+        styles: tree.styles?.elements?.[name],
+        selector,
+        // Top level elements that don't use a class name should not receive the
+        // `:root :where()` wrapper to maintain backwards compatibility.
+        skipSelectorWrapper: !ELEMENT_CLASS_NAMES[name]
+      });
+    }
+  });
+  Object.entries(tree.styles?.blocks ?? {}).forEach(
+    ([blockName, node]) => {
+      const blockStyles = pickStyleKeys(node);
+      if (node?.variations) {
+        const variations = {};
+        Object.entries(node.variations).forEach(
+          ([variationName, variation]) => {
+            variations[variationName] = pickStyleKeys(variation);
+            if (variation?.css) {
+              variations[variationName].css = variation.css;
+            }
+            const variationSelector = blockSelectors[blockName]?.styleVariationSelectors?.[variationName];
+            Object.entries(variation?.elements ?? {}).forEach(
+              ([element, elementStyles]) => {
+                if (elementStyles && ELEMENTS[element]) {
+                  nodes.push({
+                    styles: elementStyles,
+                    selector: scopeSelector(
+                      variationSelector,
+                      ELEMENTS[element]
+                    )
+                  });
+                }
+              }
+            );
+            Object.entries(variation?.blocks ?? {}).forEach(
+              ([
+                variationBlockName,
+                variationBlockStyles
+              ]) => {
+                const variationBlockSelector = scopeSelector(
+                  variationSelector,
+                  blockSelectors[variationBlockName]?.selector
+                );
+                const variationDuotoneSelector = scopeSelector(
+                  variationSelector,
+                  blockSelectors[variationBlockName]?.duotoneSelector
+                );
+                const variationFeatureSelectors = scopeFeatureSelectors(
+                  variationSelector,
+                  blockSelectors[variationBlockName]?.featureSelectors
+                );
+                const variationBlockStyleNodes = pickStyleKeys(variationBlockStyles);
+                if (variationBlockStyles?.css) {
+                  variationBlockStyleNodes.css = variationBlockStyles.css;
+                }
+                nodes.push({
+                  selector: variationBlockSelector,
+                  duotoneSelector: variationDuotoneSelector,
+                  featureSelectors: variationFeatureSelectors,
+                  fallbackGapValue: blockSelectors[variationBlockName]?.fallbackGapValue,
+                  hasLayoutSupport: blockSelectors[variationBlockName]?.hasLayoutSupport,
+                  styles: variationBlockStyleNodes
+                });
+                Object.entries(
+                  variationBlockStyles.elements ?? {}
+                ).forEach(
+                  ([
+                    variationBlockElement,
+                    variationBlockElementStyles
+                  ]) => {
+                    if (variationBlockElementStyles && ELEMENTS[variationBlockElement]) {
+                      nodes.push({
+                        styles: variationBlockElementStyles,
+                        selector: scopeSelector(
+                          variationBlockSelector,
+                          ELEMENTS[variationBlockElement]
+                        )
+                      });
+                    }
+                  }
+                );
+              }
+            );
+          }
+        );
+        blockStyles.variations = variations;
+      }
+      if (blockSelectors?.[blockName]?.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 ?? {}).forEach(
+        ([elementName, value]) => {
+          if (value && blockSelectors?.[blockName] && 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;
+};
+const getNodesWithSettings = (tree, blockSelectors) => {
+  const nodes = [];
+  if (!tree?.settings) {
+    return nodes;
+  }
+  const pickPresets = (treeToPickFrom) => {
+    let presets2 = {};
+    PRESET_METADATA.forEach(({ path }) => {
+      const value = getValueFromObjectPath(treeToPickFrom, path, false);
+      if (value !== false) {
+        presets2 = setImmutably(presets2, path, value);
+      }
+    });
+    return presets2;
+  };
+  const presets = pickPresets(tree.settings);
+  const custom = tree.settings?.custom;
+  if (Object.keys(presets).length > 0 || custom) {
+    nodes.push({
+      presets,
+      custom,
+      selector: ROOT_CSS_PROPERTIES_SELECTOR
+    });
+  }
+  Object.entries(tree.settings?.blocks ?? {}).forEach(
+    ([blockName, node]) => {
+      const blockPresets = pickPresets(node);
+      const blockCustom = node.custom;
+      if (Object.keys(blockPresets).length > 0 || blockCustom) {
+        nodes.push({
+          presets: blockPresets,
+          custom: blockCustom,
+          selector: blockSelectors[blockName]?.selector
+        });
+      }
+    }
+  );
+  return nodes;
+};
+const toCustomProperties = (tree, blockSelectors) => {
+  const settings = getNodesWithSettings(tree, blockSelectors);
+  let ruleset = "";
+  settings.forEach(({ presets, custom, selector }) => {
+    const declarations = getPresetsDeclarations(presets, tree?.settings);
+    const customProps = flattenTree(custom, "--wp--custom--", "--");
+    if (customProps.length > 0) {
+      declarations.push(...customProps);
+    }
+    if (declarations.length > 0) {
+      ruleset += `${selector}{${declarations.join(";")};}`;
+    }
+  });
+  return ruleset;
+};
+const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles = false, disableRootPadding = false, styleOptions = void 0) => {
+  const options = {
+    blockGap: true,
+    blockStyles: true,
+    layoutStyles: true,
+    marginReset: true,
+    presets: true,
+    rootPadding: true,
+    variationStyles: false,
+    ...styleOptions
+  };
+  const nodesWithStyles = getNodesWithStyles(tree, blockSelectors);
+  const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
+  const useRootPaddingAlign = tree?.settings?.useRootPaddingAwareAlignments;
+  const { contentSize, wideSize } = tree?.settings?.layout || {};
+  const hasBodyStyles = options.marginReset || options.rootPadding || options.layoutStyles;
+  let ruleset = "";
+  if (options.presets && (contentSize || wideSize)) {
+    ruleset += `${ROOT_CSS_PROPERTIES_SELECTOR} {`;
+    ruleset = contentSize ? ruleset + ` --wp--style--global--content-size: ${contentSize};` : ruleset;
+    ruleset = wideSize ? ruleset + ` --wp--style--global--wide-size: ${wideSize};` : ruleset;
+    ruleset += "}";
+  }
+  if (hasBodyStyles) {
+    ruleset += ":where(body) {margin: 0;";
+    if (options.rootPadding && 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 :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }
+				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0;
+				`;
+    }
+    ruleset += "}";
+  }
+  if (options.blockStyles) {
+    nodesWithStyles.forEach(
+      ({
+        selector,
+        duotoneSelector,
+        styles,
+        fallbackGapValue,
+        hasLayoutSupport,
+        featureSelectors,
+        styleVariationSelectors,
+        skipSelectorWrapper
+      }) => {
+        if (featureSelectors) {
+          const featureDeclarations = getFeatureDeclarations(
+            featureSelectors,
+            styles
+          );
+          Object.entries(featureDeclarations).forEach(
+            ([cssSelector, declarations]) => {
+              if (declarations.length) {
+                const rules = declarations.join(";");
+                ruleset += `:root :where(${cssSelector}){${rules};}`;
+              }
+            }
+          );
+        }
+        if (duotoneSelector) {
+          const duotoneStyles = {};
+          if (styles?.filter) {
+            duotoneStyles.filter = styles.filter;
+            delete styles.filter;
+          }
+          const duotoneDeclarations = getStylesDeclarations(duotoneStyles);
+          if (duotoneDeclarations.length) {
+            ruleset += `${duotoneSelector}{${duotoneDeclarations.join(
+              ";"
+            )};}`;
+          }
+        }
+        if (!disableLayoutStyles && (ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport)) {
+          ruleset += getLayoutStyles({
+            style: styles,
+            selector,
+            hasBlockGapSupport,
+            hasFallbackGapSupport,
+            fallbackGapValue
+          });
+        }
+        const styleDeclarations = getStylesDeclarations(
+          styles,
+          selector,
+          useRootPaddingAlign,
+          tree,
+          disableRootPadding
+        );
+        if (styleDeclarations?.length) {
+          const generalSelector = skipSelectorWrapper ? selector : `:root :where(${selector})`;
+          ruleset += `${generalSelector}{${styleDeclarations.join(
+            ";"
+          )};}`;
+        }
+        if (styles?.css) {
+          ruleset += processCSSNesting(
+            styles.css,
+            `:root :where(${selector})`
+          );
+        }
+        if (options.variationStyles && styleVariationSelectors) {
+          Object.entries(styleVariationSelectors).forEach(
+            ([styleVariationName, styleVariationSelector]) => {
+              const styleVariations = styles?.variations?.[styleVariationName];
+              if (styleVariations) {
+                if (featureSelectors) {
+                  const featureDeclarations = getFeatureDeclarations(
+                    featureSelectors,
+                    styleVariations
+                  );
+                  Object.entries(
+                    featureDeclarations
+                  ).forEach(
+                    ([baseSelector, declarations]) => {
+                      if (declarations.length) {
+                        const cssSelector = concatFeatureVariationSelectorString(
+                          baseSelector,
+                          styleVariationSelector
+                        );
+                        const rules = declarations.join(";");
+                        ruleset += `:root :where(${cssSelector}){${rules};}`;
+                      }
+                    }
+                  );
+                }
+                const styleVariationDeclarations = getStylesDeclarations(
+                  styleVariations,
+                  styleVariationSelector,
+                  useRootPaddingAlign,
+                  tree
+                );
+                if (styleVariationDeclarations.length) {
+                  ruleset += `:root :where(${styleVariationSelector}){${styleVariationDeclarations.join(
+                    ";"
+                  )};}`;
+                }
+                if (styleVariations?.css) {
+                  ruleset += processCSSNesting(
+                    styleVariations.css,
+                    `:root :where(${styleVariationSelector})`
+                  );
+                }
+              }
+            }
+          );
+        }
+        const pseudoSelectorStyles = Object.entries(styles).filter(
+          ([key]) => key.startsWith(":")
+        );
+        if (pseudoSelectorStyles?.length) {
+          pseudoSelectorStyles.forEach(
+            ([pseudoKey, pseudoStyle]) => {
+              const pseudoDeclarations = getStylesDeclarations(pseudoStyle);
+              if (!pseudoDeclarations?.length) {
+                return;
+              }
+              const _selector = selector.split(",").map((sel) => sel + pseudoKey).join(",");
+              const pseudoRule = `:root :where(${_selector}){${pseudoDeclarations.join(
+                ";"
+              )};}`;
+              ruleset += pseudoRule;
+            }
+          );
+        }
+      }
+    );
+  }
+  if (options.layoutStyles) {
+    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 (options.blockGap && hasBlockGapSupport) {
+    const gapValue = getGapCSSValue(tree?.styles?.spacing?.blockGap) || "0.5em";
+    ruleset = ruleset + `:root :where(.wp-site-blocks) > * { margin-block-start: ${gapValue}; margin-block-end: 0; }`;
+    ruleset = ruleset + ":root :where(.wp-site-blocks) > :first-child { margin-block-start: 0; }";
+    ruleset = ruleset + ":root :where(.wp-site-blocks) > :last-child { margin-block-end: 0; }";
+  }
+  if (options.presets) {
+    nodesWithSettings.forEach(({ selector, presets }) => {
+      if (ROOT_BLOCK_SELECTOR === selector || ROOT_CSS_PROPERTIES_SELECTOR === selector) {
+        selector = "";
+      }
+      const classes = getPresetsClasses(selector, presets);
+      if (classes.length > 0) {
+        ruleset += classes;
+      }
+    });
+  }
+  return ruleset;
+};
+function toSvgFilters(tree, blockSelectors) {
+  const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
+  return nodesWithSettings.flatMap(({ presets }) => {
+    return getPresetsSvgFilters(presets);
+  });
+}
+const getSelectorsConfig = (blockType, rootSelector) => {
+  if (blockType?.selectors && Object.keys(blockType.selectors).length > 0) {
+    return blockType.selectors;
+  }
+  const config = { root: rootSelector };
+  Object.entries(BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS).forEach(
+    ([featureKey, featureName]) => {
+      const featureSelector = getBlockCSSSelector(
+        blockType,
+        featureKey
+      );
+      if (featureSelector) {
+        config[featureName] = featureSelector;
+      }
+    }
+  );
+  return config;
+};
+const getBlockSelectors = (blockTypes, getBlockStyles, variationInstanceId) => {
+  const result = {};
+  blockTypes.forEach((blockType) => {
+    const name = blockType.name;
+    const selector = getBlockCSSSelector(blockType);
+    let duotoneSelector = getBlockCSSSelector(
+      blockType,
+      "filter.duotone"
+    );
+    if (!duotoneSelector) {
+      const rootSelector = getBlockCSSSelector(blockType);
+      const duotoneSupport = getBlockSupport(
+        blockType,
+        "color.__experimentalDuotone",
+        false
+      );
+      duotoneSelector = duotoneSupport && scopeSelector(rootSelector, duotoneSupport);
+    }
+    const hasLayoutSupport = !!blockType?.supports?.layout || !!blockType?.supports?.__experimentalLayout;
+    const fallbackGapValue = blockType?.supports?.spacing?.blockGap?.__experimentalDefault;
+    const blockStyleVariations = getBlockStyles(name);
+    const styleVariationSelectors = {};
+    blockStyleVariations?.forEach((variation) => {
+      const variationSuffix = variationInstanceId ? `-${variationInstanceId}` : "";
+      const variationName = `${variation.name}${variationSuffix}`;
+      const styleVariationSelector = getBlockStyleVariationSelector(
+        variationName,
+        selector
+      );
+      styleVariationSelectors[variationName] = styleVariationSelector;
+    });
+    const featureSelectors = getSelectorsConfig(blockType, selector);
+    result[name] = {
+      duotoneSelector,
+      fallbackGapValue,
+      featureSelectors: Object.keys(featureSelectors).length ? featureSelectors : void 0,
+      hasLayoutSupport,
+      name,
+      selector,
+      styleVariationSelectors: blockStyleVariations?.length ? styleVariationSelectors : void 0
+    };
+  });
+  return result;
+};
+function updateConfigWithSeparator(config) {
+  const needsSeparatorStyleUpdate = config.styles?.blocks?.["core/separator"] && config.styles?.blocks?.["core/separator"].color?.background && !config.styles?.blocks?.["core/separator"].color?.text && !config.styles?.blocks?.["core/separator"].border?.color;
+  if (needsSeparatorStyleUpdate) {
+    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.styles?.blocks["core/separator"].color.background
+            }
+          }
+        }
+      }
+    };
+  }
+  return config;
+}
+function processCSSNesting(css, blockSelector) {
+  let processedCSS = "";
+  if (!css || css.trim() === "") {
+    return processedCSS;
+  }
+  const parts = css.split("&");
+  parts.forEach((part) => {
+    if (!part || part.trim() === "") {
+      return;
+    }
+    const isRootCss = !part.includes("{");
+    if (isRootCss) {
+      processedCSS += `:root :where(${blockSelector}){${part.trim()}}`;
+    } else {
+      const splitPart = part.replace("}", "").split("{");
+      if (splitPart.length !== 2) {
+        return;
+      }
+      const [nestedSelector, cssValue] = splitPart;
+      const matches = nestedSelector.match(/([>+~\s]*::[a-zA-Z-]+)/);
+      const pseudoPart = matches ? matches[1] : "";
+      const withoutPseudoElement = matches ? nestedSelector.replace(pseudoPart, "").trim() : nestedSelector.trim();
+      let combinedSelector;
+      if (withoutPseudoElement === "") {
+        combinedSelector = blockSelector;
+      } else {
+        combinedSelector = nestedSelector.startsWith(" ") ? scopeSelector(blockSelector, withoutPseudoElement) : appendToSelector(blockSelector, withoutPseudoElement);
+      }
+      processedCSS += `:root :where(${combinedSelector})${pseudoPart}{${cssValue.trim()}}`;
+    }
+  });
+  return processedCSS;
+}
+function useGlobalStylesOutputWithConfig(mergedConfig = {}, disableRootPadding) {
+  const [blockGap] = useGlobalSetting("spacing.blockGap");
+  const hasBlockGapSupport = blockGap !== null;
+  const hasFallbackGapSupport = !hasBlockGapSupport;
+  const disableLayoutStyles = useSelect((select) => {
+    const { getSettings } = select(blockEditorStore);
+    return !!getSettings().disableLayoutStyles;
+  });
+  const { getBlockStyles } = useSelect(blocksStore);
+  return useMemo(() => {
+    if (!mergedConfig?.styles || !mergedConfig?.settings) {
+      return [];
+    }
+    const updatedConfig = updateConfigWithSeparator(mergedConfig);
+    const blockSelectors = getBlockSelectors(
+      getBlockTypes(),
+      getBlockStyles
+    );
+    const customProperties = toCustomProperties(
+      updatedConfig,
+      blockSelectors
+    );
+    const globalStyles = toStyles(
+      updatedConfig,
+      blockSelectors,
+      hasBlockGapSupport,
+      hasFallbackGapSupport,
+      disableLayoutStyles,
+      disableRootPadding
+    );
+    const svgs = toSvgFilters(updatedConfig, blockSelectors);
+    const styles = [
+      {
+        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: updatedConfig.styles.css ?? "",
+        isGlobalStyles: true
+      },
+      {
+        assets: svgs,
+        __unstableType: "svg",
+        isGlobalStyles: true
+      }
+    ];
+    getBlockTypes().forEach((blockType) => {
+      if (updatedConfig.styles.blocks[blockType.name]?.css) {
+        const selector = blockSelectors[blockType.name].selector;
+        styles.push({
+          css: processCSSNesting(
+            updatedConfig.styles.blocks[blockType.name]?.css,
+            selector
+          ),
+          isGlobalStyles: true
+        });
+      }
+    });
+    return [styles, updatedConfig.settings];
+  }, [
+    hasBlockGapSupport,
+    hasFallbackGapSupport,
+    mergedConfig,
+    disableLayoutStyles,
+    disableRootPadding,
+    getBlockStyles
+  ]);
+}
+function useGlobalStylesOutput(disableRootPadding = false) {
+  const { merged: mergedConfig } = useContext(GlobalStylesContext);
+  return useGlobalStylesOutputWithConfig(mergedConfig, disableRootPadding);
+}
+export {
+  getBlockSelectors,
+  getLayoutStyles,
+  getNodesWithSettings,
+  getNodesWithStyles,
+  getStylesDeclarations,
+  processCSSNesting,
+  toCustomProperties,
+  toStyles,
+  toSvgFilters,
+  useGlobalStylesOutput,
+  useGlobalStylesOutputWithConfig
+};
+//# sourceMappingURL=use-global-styles-output.js.map