@wordpress/block-editor 15.4.1-next.f56bd8138.0 → 15.5.1-next.47f435fc9.0

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

@@ -1,127 +1,136 @@
-/**
- * WordPress dependencies
- */
-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';
-
-/**
- * Internal dependencies
- */
-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';
-
-// Elements that rely on class names in their selectors.
+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'
+  button: "wp-element-button",
+  caption: "wp-element-caption"
 };
-
-// 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'
+  __experimentalBorder: "border",
+  color: "color",
+  spacing: "spacing",
+  typography: "typography"
 };
-const {
-  kebabCase
-} = unlock(componentsPrivateApis);
-
-/**
- * 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.
- */
+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;
-  }, []);
-}
-
-/**
- * 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 = '*', 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(',') // 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 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;
       }
-    });
-    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('');
+    // 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('/', '-'));
+  Object.keys(input).forEach((key) => {
+    const newKey = prefix + kebabCase(key.replace("/", "-"));
     const newLeaf = input[key];
     if (newLeaf instanceof Object) {
       const newPrefix = newKey + token;
@@ -132,169 +141,106 @@ function flattenTree(input = {}, prefix, token) {
   });
   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 featureSelectors = featureSelector.split(",");
   const combinedSelectors = [];
-  featureSelectors.forEach(selector => {
-    combinedSelectors.push(`${styleVariationSelector.trim()}${selector.trim()}`);
+  featureSelectors.forEach((selector) => {
+    combinedSelectors.push(
+      `${styleVariationSelector.trim()}${selector.trim()}`
+    );
   });
-  return combinedSelectors.join(', ');
+  return combinedSelectors.join(", ");
 }
-
-/**
- * Generate style declarations for a block's custom feature and subfeature
- * selectors.
- *
- * NOTE: The passed `styles` object will be mutated by this function.
- *
- * @param {Object} selectors Custom selectors object for a block.
- * @param {Object} styles    A block's styles object.
- *
- * @return {Object} Style declarations.
- */
 const getFeatureDeclarations = (selectors, styles) => {
   const declarations = {};
   Object.entries(selectors).forEach(([feature, selector]) => {
-    // We're only processing features/subfeatures that have styles.
-    if (feature === 'root' || !styles?.[feature]) {
+    if (feature === "root" || !styles?.[feature]) {
       return;
     }
-    const isShorthand = typeof selector === 'string';
-
-    // If we have a selector object instead of shorthand process it.
+    const isShorthand = typeof selector === "string";
     if (!isShorthand) {
-      Object.entries(selector).forEach(([subfeature, subfeatureSelector]) => {
-        // Don't process root feature selector yet or any
-        // subfeature that doesn't have a style.
-        if (subfeature === 'root' || !styles?.[feature][subfeature]) {
-          return;
-        }
-
-        // Create a temporary styles object and build
-        // declarations for subfeature.
-        const subfeatureStyles = {
-          [feature]: {
-            [subfeature]: styles[feature][subfeature]
+      Object.entries(selector).forEach(
+        ([subfeature, subfeatureSelector]) => {
+          if (subfeature === "root" || !styles?.[feature][subfeature]) {
+            return;
           }
-        };
-        const newDeclarations = getStylesDeclarations(subfeatureStyles);
-
-        // Merge new declarations in with any others that
-        // share the same selector.
-        declarations[subfeatureSelector] = [...(declarations[subfeatureSelector] || []), ...newDeclarations];
-
-        // Remove the subfeature's style now it will be
-        // included under its own selector not the block's.
-        delete styles[feature][subfeature];
-      });
+          const subfeatureStyles = {
+            [feature]: {
+              [subfeature]: styles[feature][subfeature]
+            }
+          };
+          const newDeclarations = getStylesDeclarations(subfeatureStyles);
+          declarations[subfeatureSelector] = [
+            ...declarations[subfeatureSelector] || [],
+            ...newDeclarations
+          ];
+          delete styles[feature][subfeature];
+        }
+      );
     }
-
-    // Now subfeatures have been processed and removed, we can
-    // process root, or shorthand, feature selectors.
     if (isShorthand || selector.root) {
       const featureSelector = isShorthand ? selector : selector.root;
-
-      // Create temporary style object and build declarations for feature.
-      const featureStyles = {
-        [feature]: styles[feature]
-      };
+      const featureStyles = { [feature]: styles[feature] };
       const newDeclarations = getStylesDeclarations(featureStyles);
-
-      // Merge new declarations with any others that share the selector.
-      declarations[featureSelector] = [...(declarations[featureSelector] || []), ...newDeclarations];
-
-      // Remove the feature from the block's styles now as it will be
-      // included under its own selector not the block's.
+      declarations[featureSelector] = [
+        ...declarations[featureSelector] || [],
+        ...newDeclarations
+      ];
       delete styles[feature];
     }
   });
   return declarations;
 };
-
-/**
- * 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.
- *
- * @param {boolean} disableRootPadding  Whether to force disable the root padding styles.
- * @return {Array} An array of style declarations.
- */
-export function getStylesDeclarations(blockStyles = {}, selector = '', useRootPaddingAlign, tree = {}, disableRootPadding = false) {
+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);
-
-    // 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)) {
+  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 (properties && typeof styleValue !== 'string') {
-      Object.entries(properties).forEach(entry => {
-        const [name, prop] = entry;
-        if (!getValueFromObjectPath(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}: ${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;
-  }, []);
-
-  /*
-   * Preprocess background image values.
-   *
-   * Note: As we absorb more and more styles into the engine, we could simplify this function.
-   * A refactor is for the style engine to handle ref resolution (and possibly defaults)
-   * via a public util used internally and externally. Theme.json tree and defaults could be passed
-   * as options.
-   */
+    },
+    []
+  );
   if (!!blockStyles.background) {
-    /*
-     * Resolve dynamic values before they are compiled by the style engine,
-     * which doesn't (yet) resolve dynamic values.
-     */
     if (blockStyles.background?.backgroundImage) {
-      blockStyles.background.backgroundImage = getResolvedValue(blockStyles.background.backgroundImage, tree);
+      blockStyles.background.backgroundImage = getResolvedValue(
+        blockStyles.background.backgroundImage,
+        tree
+      );
     }
-
-    /*
-     * Set default values for block background styles.
-     * Top-level styles are an exception as they are applied to the body.
-     */
     if (!isRoot && !!blockStyles.background?.backgroundImage?.id) {
       blockStyles = {
         ...blockStyles,
@@ -306,52 +252,26 @@ export function getStylesDeclarations(blockStyles = {}, selector = '', useRootPa
     }
   }
   const extraRules = getCSSRules(blockStyles);
-  extraRules.forEach(rule => {
-    // Don't output padding properties if padding variables are set or if we're not editing a full template.
-    if (isRoot && (useRootPaddingAlign || disableRootPadding) && rule.key.startsWith('padding')) {
+  extraRules.forEach((rule) => {
+    if (isRoot && (useRootPaddingAlign || disableRootPadding) && rule.key.startsWith("padding")) {
       return;
     }
-    const cssProperty = rule.key.startsWith('--') ? rule.key : kebabCase(rule.key);
+    const cssProperty = rule.key.startsWith("--") ? rule.key : kebabCase(rule.key);
     let ruleValue = getResolvedValue(rule.value, tree, null);
-
-    // Calculate fluid typography rules where available.
-    if (cssProperty === 'font-size') {
-      /*
-       * 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?.settings);
+    if (cssProperty === "font-size") {
+      ruleValue = getTypographyFontSizeValue(
+        { size: ruleValue },
+        tree?.settings
+      );
     }
-
-    // For aspect ratio to work, other dimensions rules (and Cover block defaults) must be unset.
-    // This ensures that a fixed height does not override the aspect ratio.
-    if (cssProperty === 'aspect-ratio') {
-      output.push('min-height: unset');
+    if (cssProperty === "aspect-ratio") {
+      output.push("min-height: unset");
     }
     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.layoutDefinitions     Layout definitions, keyed by layout type.
- * @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({
+function getLayoutStyles({
   layoutDefinitions = LAYOUT_DEFINITIONS,
   style,
   selector,
@@ -359,103 +279,114 @@ export function getLayoutStyles({
   hasFallbackGapSupport,
   fallbackGapValue
 }) {
-  let ruleset = '';
-  let gapValue = hasBlockGapSupport ? getGapCSSValue(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.
+  let ruleset = "";
+  let gapValue = hasBlockGapSupport ? getGapCSSValue(style?.spacing?.blockGap) : "";
   if (hasFallbackGapSupport) {
     if (selector === ROOT_BLOCK_SELECTOR) {
-      gapValue = !gapValue ? '0.5em' : gapValue;
+      gapValue = !gapValue ? "0.5em" : gapValue;
     } else if (!hasBlockGapSupport && fallbackGapValue) {
       gapValue = fallbackGapValue;
     }
   }
   if (gapValue && layoutDefinitions) {
-    Object.values(layoutDefinitions).forEach(({
-      className,
-      name,
-      spacingStyles
-    }) => {
-      // Allow outputting fallback gap styles for flex layout type when block gap support isn't available.
-      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) {
-              // For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles.
-              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 || ''}`;
+    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}`
+                  );
+                }
+              );
             }
-            ruleset += `${combinedSelector} { ${declarations.join('; ')}; }`;
-          }
-        });
+            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(
+                "; "
+              )}; }`;
+            }
+          });
+        }
       }
-    });
-    // For backwards compatibility, ensure the legacy block gap CSS variable is still available.
+    );
     if (selector === ROOT_BLOCK_SELECTOR && hasBlockGapSupport) {
       ruleset += `${ROOT_CSS_PROPERTIES_SELECTOR} { --wp--style--block-gap: ${gapValue}; }`;
     }
   }
-
-  // Output base styles
   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('; ')}; }`;
-          }
-        });
+    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'];
+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));
-  // clone the style objects so that `getFeatureDeclarations` can remove consumed keys from it
-  const clonedEntries = pickedEntries.map(([key, style]) => [key, JSON.parse(JSON.stringify(style))]);
+  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);
 }
-export const getNodesWithStyles = (tree, blockSelectors) => {
-  var _tree$styles$blocks;
+const getNodesWithStyles = (tree, blockSelectors) => {
   const nodes = [];
   if (!tree?.styles) {
     return nodes;
   }
-
-  // Top-level.
   const styles = pickStyleKeys(tree.styles);
   if (styles) {
     nodes.push({
@@ -477,112 +408,129 @@ export const getNodesWithStyles = (tree, blockSelectors) => {
       });
     }
   });
-
-  // Iterate over blocks: they can have styles & elements.
-  Object.entries((_tree$styles$blocks = tree.styles?.blocks) !== null && _tree$styles$blocks !== void 0 ? _tree$styles$blocks : {}).forEach(([blockName, node]) => {
-    var _node$elements;
-    const blockStyles = pickStyleKeys(node);
-    if (node?.variations) {
-      const variations = {};
-      Object.entries(node.variations).forEach(([variationName, variation]) => {
-        var _variation$elements, _variation$blocks;
-        variations[variationName] = pickStyleKeys(variation);
-        if (variation?.css) {
-          variations[variationName].css = variation.css;
-        }
-        const variationSelector = blockSelectors[blockName]?.styleVariationSelectors?.[variationName];
-
-        // Process the variation's inner element styles.
-        // This comes before the inner block styles so the
-        // element styles within the block type styles take
-        // precedence over these.
-        Object.entries((_variation$elements = variation?.elements) !== null && _variation$elements !== void 0 ? _variation$elements : {}).forEach(([element, elementStyles]) => {
-          if (elementStyles && ELEMENTS[element]) {
-            nodes.push({
-              styles: elementStyles,
-              selector: scopeSelector(variationSelector, ELEMENTS[element])
-            });
-          }
-        });
-
-        // Process the variations inner block type styles.
-        Object.entries((_variation$blocks = variation?.blocks) !== null && _variation$blocks !== void 0 ? _variation$blocks : {}).forEach(([variationBlockName, variationBlockStyles]) => {
-          var _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
-          });
-
-          // Process element styles for the inner blocks
-          // of the variation.
-          Object.entries((_variationBlockStyles = variationBlockStyles.elements) !== null && _variationBlockStyles !== void 0 ? _variationBlockStyles : {}).forEach(([variationBlockElement, variationBlockElementStyles]) => {
-            if (variationBlockElementStyles && ELEMENTS[variationBlockElement]) {
-              nodes.push({
-                styles: variationBlockElementStyles,
-                selector: scopeSelector(variationBlockSelector, ELEMENTS[variationBlockElement])
-              });
+  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;
             }
-          });
-        });
-      });
-      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 = node?.elements) !== null && _node$elements !== void 0 ? _node$elements : {}).forEach(([elementName, value]) => {
-      if (value && blockSelectors?.[blockName] && ELEMENTS[elementName]) {
+            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({
-          styles: value,
-          selector: blockSelectors[blockName]?.selector.split(',').map(sel => {
-            const elementSelectors = ELEMENTS[elementName].split(',');
-            return elementSelectors.map(elementSelector => sel + ' ' + elementSelector);
-          }).join(',')
+          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;
 };
-export const getNodesWithSettings = (tree, blockSelectors) => {
-  var _tree$settings$blocks;
+const getNodesWithSettings = (tree, blockSelectors) => {
   const nodes = [];
   if (!tree?.settings) {
     return nodes;
   }
-  const pickPresets = treeToPickFrom => {
-    let presets = {};
-    PRESET_METADATA.forEach(({
-      path
-    }) => {
+  const pickPresets = (treeToPickFrom) => {
+    let presets2 = {};
+    PRESET_METADATA.forEach(({ path }) => {
       const value = getValueFromObjectPath(treeToPickFrom, path, false);
       if (value !== false) {
-        presets = setImmutably(presets, path, value);
+        presets2 = setImmutably(presets2, path, value);
       }
     });
-    return presets;
+    return presets2;
   };
-
-  // Top-level.
   const presets = pickPresets(tree.settings);
   const custom = tree.settings?.custom;
   if (Object.keys(presets).length > 0 || custom) {
@@ -592,42 +540,37 @@ export const getNodesWithSettings = (tree, blockSelectors) => {
       selector: ROOT_CSS_PROPERTIES_SELECTOR
     });
   }
-
-  // Blocks.
-  Object.entries((_tree$settings$blocks = tree.settings?.blocks) !== null && _tree$settings$blocks !== void 0 ? _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
-      });
+  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;
 };
-export const toCustomProperties = (tree, blockSelectors) => {
+const toCustomProperties = (tree, blockSelectors) => {
   const settings = getNodesWithSettings(tree, blockSelectors);
-  let ruleset = '';
-  settings.forEach(({
-    presets,
-    custom,
-    selector
-  }) => {
+  let ruleset = "";
+  settings.forEach(({ presets, custom, selector }) => {
     const declarations = getPresetsDeclarations(presets, tree?.settings);
-    const customProps = flattenTree(custom, '--wp--custom--', '--');
+    const customProps = flattenTree(custom, "--wp--custom--", "--");
     if (customProps.length > 0) {
       declarations.push(...customProps);
     }
     if (declarations.length > 0) {
-      ruleset += `${selector}{${declarations.join(';')};}`;
+      ruleset += `${selector}{${declarations.join(";")};}`;
     }
   });
   return ruleset;
 };
-export const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles = false, disableRootPadding = false, styleOptions = undefined) => {
-  // These allow opting out of certain sets of styles.
+const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles = false, disableRootPadding = false, styleOptions = void 0) => {
   const options = {
     blockGap: true,
     blockStyles: true,
@@ -641,35 +584,18 @@ export const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGa
   const nodesWithStyles = getNodesWithStyles(tree, blockSelectors);
   const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
   const useRootPaddingAlign = tree?.settings?.useRootPaddingAwareAlignments;
-  const {
-    contentSize,
-    wideSize
-  } = tree?.settings?.layout || {};
+  const { contentSize, wideSize } = tree?.settings?.layout || {};
   const hasBodyStyles = options.marginReset || options.rootPadding || options.layoutStyles;
-  let ruleset = '';
+  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 += '}';
+    ruleset += "}";
   }
   if (hasBodyStyles) {
-    /*
-     * Reset default browser margin on the body element.
-     * This is set on the body 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.
-     */
-    ruleset += ':where(body) {margin: 0;';
-
-    // Root padding styles should be output for full templates, patterns and template parts.
+    ruleset += ":where(body) {margin: 0;";
     if (options.rootPadding && useRootPaddingAlign) {
-      /*
-       * These rules reproduce the ones from https://github.com/WordPress/gutenberg/blob/79103f124925d1f457f627e154f52a56228ed5ad/lib/class-wp-theme-json-gutenberg.php#L2508
-       * almost exactly, but for the selectors that target block wrappers in the front end. This code only runs in the editor, so it doesn't need those selectors.
-       */
       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); }
@@ -677,141 +603,157 @@ export const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGa
 				.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 += '}';
+    ruleset += "}";
   }
   if (options.blockStyles) {
-    nodesWithStyles.forEach(({
-      selector,
-      duotoneSelector,
-      styles,
-      fallbackGapValue,
-      hasLayoutSupport,
-      featureSelectors,
-      styleVariationSelectors,
-      skipSelectorWrapper
-    }) => {
-      // Process styles for block support features with custom feature level
-      // CSS selectors set.
-      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};}`;
+    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(
+              ";"
+            )};}`;
           }
-        });
-      }
-
-      // Process duotone styles.
-      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
+          });
         }
-      }
-
-      // Process blockGap and layout styles.
-      if (!disableLayoutStyles && (ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport)) {
-        ruleset += getLayoutStyles({
-          style: styles,
+        const styleDeclarations = getStylesDeclarations(
+          styles,
           selector,
-          hasBlockGapSupport,
-          hasFallbackGapSupport,
-          fallbackGapValue
-        });
-      }
-
-      // Process the remaining block styles (they use either normal block class or __experimentalSelector).
-      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 the block uses any custom selectors for block support, add those first.
-            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};}`;
+          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};}`;
+                      }
+                    }
+                  );
                 }
-              });
-            }
-
-            // Otherwise add regular selectors.
-            const styleVariationDeclarations = getStylesDeclarations(styleVariations, styleVariationSelector, useRootPaddingAlign, tree);
-            if (styleVariationDeclarations.length) {
-              ruleset += `:root :where(${styleVariationSelector}){${styleVariationDeclarations.join(';')};}`;
+                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})`
+                  );
+                }
+              }
             }
-            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;
             }
-          }
-        });
-      }
-
-      // Check for pseudo selector in `styles` and handle separately.
-      const pseudoSelectorStyles = Object.entries(styles).filter(([key]) => key.startsWith(':'));
-      if (pseudoSelectorStyles?.length) {
-        pseudoSelectorStyles.forEach(([pseudoKey, pseudoStyle]) => {
-          const pseudoDeclarations = getStylesDeclarations(pseudoStyle);
-          if (!pseudoDeclarations?.length) {
-            return;
-          }
-
-          // `selector` may be 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(',');
-
-          // As pseudo classes such as :hover, :focus etc. have class-level
-          // specificity, they must use the `:root :where()` wrapper. This.
-          // caps the specificity at `0-1-0` to allow proper nesting of variations
-          // and block type element styles.
-          const pseudoRule = `:root :where(${_selector}){${pseudoDeclarations.join(';')};}`;
-          ruleset += pseudoRule;
-        });
+          );
+        }
       }
-    });
+    );
   }
   if (options.layoutStyles) {
-    /* 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; }';
+    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) {
-    // 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?.styles?.spacing?.blockGap) || '0.5em';
+    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; }';
+    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
-    }) => {
+    nodesWithSettings.forEach(({ selector, presets }) => {
       if (ROOT_BLOCK_SELECTOR === selector || ROOT_CSS_PROPERTIES_SELECTOR === selector) {
-        // Do not add extra specificity for top-level classes.
-        selector = '';
+        selector = "";
       }
       const classes = getPresetsClasses(selector, presets);
       if (classes.length > 0) {
@@ -821,11 +763,9 @@ export const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGa
   }
   return ruleset;
 };
-export function toSvgFilters(tree, blockSelectors) {
+function toSvgFilters(tree, blockSelectors) {
   const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
-  return nodesWithSettings.flatMap(({
-    presets
-  }) => {
+  return nodesWithSettings.flatMap(({ presets }) => {
     return getPresetsSvgFilters(presets);
   });
 }
@@ -833,65 +773,66 @@ 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;
+  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;
 };
-export const getBlockSelectors = (blockTypes, getBlockStyles, variationInstanceId) => {
+const getBlockSelectors = (blockTypes, getBlockStyles, variationInstanceId) => {
   const result = {};
-  blockTypes.forEach(blockType => {
+  blockTypes.forEach((blockType) => {
     const name = blockType.name;
     const selector = getBlockCSSSelector(blockType);
-    let duotoneSelector = getBlockCSSSelector(blockType, 'filter.duotone');
-
-    // Keep backwards compatibility for support.color.__experimentalDuotone.
+    let duotoneSelector = getBlockCSSSelector(
+      blockType,
+      "filter.duotone"
+    );
     if (!duotoneSelector) {
       const rootSelector = getBlockCSSSelector(blockType);
-      const duotoneSupport = getBlockSupport(blockType, 'color.__experimentalDuotone', false);
+      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}` : '';
+    blockStyleVariations?.forEach((variation) => {
+      const variationSuffix = variationInstanceId ? `-${variationInstanceId}` : "";
       const variationName = `${variation.name}${variationSuffix}`;
-      const styleVariationSelector = getBlockStyleVariationSelector(variationName, selector);
+      const styleVariationSelector = getBlockStyleVariationSelector(
+        variationName,
+        selector
+      );
       styleVariationSelectors[variationName] = styleVariationSelector;
     });
-
-    // For each block support feature add any custom selectors.
     const featureSelectors = getSelectorsConfig(blockType, selector);
     result[name] = {
       duotoneSelector,
       fallbackGapValue,
-      featureSelectors: Object.keys(featureSelectors).length ? featureSelectors : undefined,
+      featureSelectors: Object.keys(featureSelectors).length ? featureSelectors : void 0,
       hasLayoutSupport,
       name,
       selector,
-      styleVariationSelectors: blockStyleVariations?.length ? styleVariationSelectors : undefined
+      styleVariationSelectors: blockStyleVariations?.length ? styleVariationSelectors : void 0
     };
   });
   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) {
-  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;
+  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,
@@ -899,11 +840,11 @@ function updateConfigWithSeparator(config) {
         ...config.styles,
         blocks: {
           ...config.styles.blocks,
-          'core/separator': {
-            ...config.styles.blocks['core/separator'],
+          "core/separator": {
+            ...config.styles.blocks["core/separator"],
             color: {
-              ...config.styles.blocks['core/separator'].color,
-              text: config.styles?.blocks['core/separator'].color.background
+              ...config.styles.blocks["core/separator"].color,
+              text: config.styles?.blocks["core/separator"].color.background
             }
           }
         }
@@ -912,134 +853,127 @@ function updateConfigWithSeparator(config) {
   }
   return config;
 }
-export function processCSSNesting(css, blockSelector) {
-  let processedCSS = '';
-  if (!css || css.trim() === '') {
+function processCSSNesting(css, blockSelector) {
+  let processedCSS = "";
+  if (!css || css.trim() === "") {
     return processedCSS;
   }
-
-  // Split CSS nested rules.
-  const parts = css.split('&');
-  parts.forEach(part => {
-    if (!part || part.trim() === '') {
+  const parts = css.split("&");
+  parts.forEach((part) => {
+    if (!part || part.trim() === "") {
       return;
     }
-    const isRootCss = !part.includes('{');
+    const isRootCss = !part.includes("{");
     if (isRootCss) {
-      // If the part doesn't contain braces, it applies to the root level.
       processedCSS += `:root :where(${blockSelector}){${part.trim()}}`;
     } else {
-      // If the part contains braces, it's a nested CSS rule.
-      const splitPart = part.replace('}', '').split('{');
+      const splitPart = part.replace("}", "").split("{");
       if (splitPart.length !== 2) {
         return;
       }
       const [nestedSelector, cssValue] = splitPart;
-
-      // Handle pseudo elements such as ::before, ::after, etc. Regex will also
-      // capture any leading combinator such as >, +, or ~, as well as spaces.
-      // This allows pseudo elements as descendants e.g. `.parent ::before`.
       const matches = nestedSelector.match(/([>+~\s]*::[a-zA-Z-]+)/);
-      const pseudoPart = matches ? matches[1] : '';
-      const withoutPseudoElement = matches ? nestedSelector.replace(pseudoPart, '').trim() : nestedSelector.trim();
+      const pseudoPart = matches ? matches[1] : "";
+      const withoutPseudoElement = matches ? nestedSelector.replace(pseudoPart, "").trim() : nestedSelector.trim();
       let combinedSelector;
-      if (withoutPseudoElement === '') {
-        // Only contained a pseudo element to use the block selector to form
-        // the final `:root :where()` selector.
+      if (withoutPseudoElement === "") {
         combinedSelector = blockSelector;
       } else {
-        // If the nested selector is a descendant of the block scope it with the
-        // block selector. Otherwise append it to the block selector.
-        combinedSelector = nestedSelector.startsWith(' ') ? scopeSelector(blockSelector, withoutPseudoElement) : appendToSelector(blockSelector, withoutPseudoElement);
+        combinedSelector = nestedSelector.startsWith(" ") ? scopeSelector(blockSelector, withoutPseudoElement) : appendToSelector(blockSelector, withoutPseudoElement);
       }
-
-      // Build final rule, re-adding any pseudo element outside the `:where()`
-      // to maintain valid CSS selector.
       processedCSS += `:root :where(${combinedSelector})${pseudoPart}{${cssValue.trim()}}`;
     }
   });
   return processedCSS;
 }
-
-/**
- * Returns the global styles output using a global styles configuration.
- * If wishing to generate global styles and settings based on the
- * global styles config loaded in the editor context, use `useGlobalStylesOutput()`.
- * The use case for a custom config is to generate bespoke styles
- * and settings for previews, or other out-of-editor experiences.
- *
- * @param {Object}  mergedConfig       Global styles configuration.
- * @param {boolean} disableRootPadding Disable root padding styles.
- *
- * @return {Array} Array of stylesheets and settings.
- */
-export function useGlobalStylesOutputWithConfig(mergedConfig = {}, disableRootPadding) {
-  const [blockGap] = useGlobalSetting('spacing.blockGap');
+function useGlobalStylesOutputWithConfig(mergedConfig = {}, disableRootPadding) {
+  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);
+  const hasFallbackGapSupport = !hasBlockGapSupport;
+  const disableLayoutStyles = useSelect((select) => {
+    const { getSettings } = select(blockEditorStore);
     return !!getSettings().disableLayoutStyles;
   });
-  const {
-    getBlockStyles
-  } = useSelect(blocksStore);
+  const { getBlockStyles } = useSelect(blocksStore);
   return useMemo(() => {
-    var _updatedConfig$styles;
     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 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 = updatedConfig.styles.css) !== null && _updatedConfig$styles !== void 0 ? _updatedConfig$styles : '',
-      isGlobalStyles: true
-    }, {
-      assets: svgs,
-      __unstableType: 'svg',
-      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 => {
+    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),
+          css: processCSSNesting(
+            updatedConfig.styles.blocks[blockType.name]?.css,
+            selector
+          ),
           isGlobalStyles: true
         });
       }
     });
     return [styles, updatedConfig.settings];
-  }, [hasBlockGapSupport, hasFallbackGapSupport, mergedConfig, disableLayoutStyles, disableRootPadding, getBlockStyles]);
+  }, [
+    hasBlockGapSupport,
+    hasFallbackGapSupport,
+    mergedConfig,
+    disableLayoutStyles,
+    disableRootPadding,
+    getBlockStyles
+  ]);
 }
-
-/**
- * Returns the global styles output based on the current state of global styles config loaded in the editor context.
- *
- * @param {boolean} disableRootPadding Disable root padding styles.
- *
- * @return {Array} Array of stylesheets and settings.
- */
-export function useGlobalStylesOutput(disableRootPadding = false) {
-  const {
-    merged: mergedConfig
-  } = useContext(GlobalStylesContext);
+function useGlobalStylesOutput(disableRootPadding = false) {
+  const { merged: mergedConfig } = useContext(GlobalStylesContext);
   return useGlobalStylesOutputWithConfig(mergedConfig, disableRootPadding);
 }
-//# sourceMappingURL=use-global-styles-output.js.map
+export {
+  getBlockSelectors,
+  getLayoutStyles,
+  getNodesWithSettings,
+  getNodesWithStyles,
+  getStylesDeclarations,
+  processCSSNesting,
+  toCustomProperties,
+  toStyles,
+  toSvgFilters,
+  useGlobalStylesOutput,
+  useGlobalStylesOutputWithConfig
+};
+//# sourceMappingURL=use-global-styles-output.js.map