@wordpress/block-editor 12.7.0 → 12.8.1

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

@@ -1,5 +1,4 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * WordPress dependencies
  */
@@ -7,10 +6,10 @@ import { __EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY, __EXPERIMENTAL_ELEMENT
 import { useSelect } from '@wordpress/data';
 import { renderToString, useContext, useMemo } from '@wordpress/element';
 import { getCSSRules } from '@wordpress/style-engine';
+
 /**
  * Internal dependencies
  */
-
 import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, scopeSelector } from './utils';
 import { getBlockCSSSelector } from './get-block-css-selector';
 import { getTypographyFontSizeValue, getFluidTypographyOptionsFromSettings } from './typography-utils';
@@ -20,28 +19,27 @@ import { PresetDuotoneFilter } from '../duotone/components';
 import { getGapCSSValue } from '../../hooks/gap';
 import { store as blockEditorStore } from '../../store';
 import { LAYOUT_DEFINITIONS } from '../../layouts/definitions';
-import { getValueFromObjectPath, kebabCase, setImmutably } from '../../utils/object'; // List of block support features that can have their related styles
-// generated under their own feature level selector rather than the block's.
+import { getValueFromObjectPath, kebabCase, setImmutably } from '../../utils/object';
 
+// List of block support features that can have their related styles
+// generated under their own feature level selector rather than the block's.
 const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
   __experimentalBorder: 'border',
   color: 'color',
   spacing: 'spacing',
   typography: 'typography'
 };
-
 function compileStyleValue(uncompiledValue) {
   const VARIABLE_REFERENCE_PREFIX = 'var:';
   const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
   const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
-
   if (uncompiledValue?.startsWith?.(VARIABLE_REFERENCE_PREFIX)) {
     const variable = uncompiledValue.slice(VARIABLE_REFERENCE_PREFIX.length).split(VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE).join(VARIABLE_PATH_SEPARATOR_TOKEN_STYLE);
     return `var(--wp--${variable})`;
   }
-
   return uncompiledValue;
 }
+
 /**
  * Transform given preset tree into a set of style declarations.
  *
@@ -50,8 +48,6 @@ function compileStyleValue(uncompiledValue) {
  *
  * @return {Array<Object>} An array of style declarations.
  */
-
-
 function getPresetsDeclarations(blockPresets = {}, mergedSettings) {
   return PRESET_METADATA.reduce((declarations, {
     path,
@@ -74,6 +70,7 @@ function getPresetsDeclarations(blockPresets = {}, mergedSettings) {
     return declarations;
   }, []);
 }
+
 /**
  * Transform given preset tree into a set of preset class declarations.
  *
@@ -81,8 +78,6 @@ function getPresetsDeclarations(blockPresets = {}, mergedSettings) {
  * @param {Object}  blockPresets
  * @return {string} CSS declarations for the preset classes.
  */
-
-
 function getPresetsClasses(blockSelector = '*', blockPresets = {}) {
   return PRESET_METADATA.reduce((declarations, {
     path,
@@ -92,7 +87,6 @@ function getPresetsClasses(blockSelector = '*', blockPresets = {}) {
     if (!classes) {
       return declarations;
     }
-
     const presetByOrigin = getValueFromObjectPath(blockPresets, path, []);
     ['default', 'theme', 'custom'].forEach(origin => {
       if (presetByOrigin[origin]) {
@@ -115,9 +109,9 @@ function getPresetsClasses(blockSelector = '*', blockPresets = {}) {
     return declarations;
   }, '');
 }
-
 function getPresetsSvgFilters(blockPresets = {}) {
-  return PRESET_METADATA.filter( // Duotone are the only type of filters for now.
+  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 => renderToString(createElement(PresetDuotoneFilter, {
@@ -126,13 +120,11 @@ function getPresetsSvgFilters(blockPresets = {}) {
     })))).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)];
@@ -142,6 +134,7 @@ function flattenTree(input = {}, prefix, token) {
   });
   return result;
 }
+
 /**
  * Gets variation selector string from feature selector.
  *
@@ -149,10 +142,7 @@ function flattenTree(input = {}, prefix, token) {
  *
  * @param {string} styleVariationSelector The style variation selector.
  * @return {string} Combined selector string.
- *
  */
-
-
 function concatFeatureVariationSelectorString(featureSelector, styleVariationSelector) {
   const featureSelectors = featureSelector.split(',');
   const combinedSelectors = [];
@@ -161,6 +151,7 @@ function concatFeatureVariationSelectorString(featureSelector, styleVariationSel
   });
   return combinedSelectors.join(', ');
 }
+
 /**
  * Generate style declarations for a block's custom feature and subfeature
  * selectors.
@@ -172,8 +163,6 @@ function concatFeatureVariationSelectorString(featureSelector, styleVariationSel
  *
  * @return {Object} Style declarations.
  */
-
-
 const getFeatureDeclarations = (selectors, styles) => {
   const declarations = {};
   Object.entries(selectors).forEach(([feature, selector]) => {
@@ -181,52 +170,58 @@ const getFeatureDeclarations = (selectors, styles) => {
     if (feature === 'root' || !styles?.[feature]) {
       return;
     }
+    const isShorthand = typeof selector === 'string';
 
-    const isShorthand = typeof selector === 'string'; // If we have a selector object instead of shorthand process it.
-
+    // If we have a selector object instead of shorthand process it.
     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.
-
+        }
 
+        // Create a temporary styles object and build
+        // declarations for subfeature.
         const subfeatureStyles = {
           [feature]: {
             [subfeature]: styles[feature][subfeature]
           }
         };
-        const newDeclarations = getStylesDeclarations(subfeatureStyles); // Merge new declarations in with any others that
+        const newDeclarations = getStylesDeclarations(subfeatureStyles);
+
+        // Merge new declarations in with any others that
         // share the same selector.
+        declarations[subfeatureSelector] = [...(declarations[subfeatureSelector] || []), ...newDeclarations];
 
-        declarations[subfeatureSelector] = [...(declarations[subfeatureSelector] || []), ...newDeclarations]; // Remove the subfeature's style now it will be
+        // Remove the subfeature's style now it will be
         // included under its own selector not the block's.
-
         delete styles[feature][subfeature];
       });
-    } // Now subfeatures have been processed and removed, we can
-    // process root, or shorthand, feature selectors.
-
+    }
 
+    // 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 featureSelector = isShorthand ? selector : selector.root;
 
+      // Create temporary style object and build declarations for feature.
       const featureStyles = {
         [feature]: styles[feature]
       };
-      const newDeclarations = getStylesDeclarations(featureStyles); // Merge new declarations with any others that share the selector.
+      const newDeclarations = getStylesDeclarations(featureStyles);
 
-      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.
+      // 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.
       delete styles[feature];
     }
   });
   return declarations;
 };
+
 /**
  * Transform given style tree into a set of style declarations.
  *
@@ -240,8 +235,6 @@ const getFeatureDeclarations = (selectors, styles) => {
  *
  * @return {Array} An array of style declarations.
  */
-
-
 export function getStylesDeclarations(blockStyles = {}, selector = '', useRootPaddingAlign, tree = {}) {
   const isRoot = ROOT_BLOCK_SELECTOR === selector;
   const output = Object.entries(STYLE_PROPERTY).reduce((declarations, [key, {
@@ -253,30 +246,25 @@ export function getStylesDeclarations(blockStyles = {}, selector = '', useRootPa
     if (rootOnly && !isRoot) {
       return declarations;
     }
-
     const pathToValue = value;
-
     if (pathToValue[0] === 'elements' || useEngine) {
       return declarations;
     }
+    const styleValue = getValueFromObjectPath(blockStyles, pathToValue);
 
-    const styleValue = getValueFromObjectPath(blockStyles, pathToValue); // Root-level padding styles don't currently support strings with CSS shorthand values.
+    // Root-level padding styles don't currently support strings with CSS shorthand values.
     // This may change: https://github.com/WordPress/gutenberg/issues/40132.
-
     if (key === '--wp--style--root--padding' && (typeof styleValue === 'string' || !useRootPaddingAlign)) {
       return declarations;
     }
-
     if (properties && typeof styleValue !== 'string') {
       Object.entries(properties).forEach(entry => {
         const [name, prop] = entry;
-
         if (!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}: ${compileStyleValue(getValueFromObjectPath(styleValue, [prop]))}`);
       });
@@ -284,32 +272,30 @@ export function getStylesDeclarations(blockStyles = {}, selector = '', useRootPa
       const cssProperty = key.startsWith('--') ? key : kebabCase(key);
       declarations.push(`${cssProperty}: ${compileStyleValue(getValueFromObjectPath(blockStyles, pathToValue))}`);
     }
-
     return declarations;
-  }, []); // The goal is to move everything to server side generated engine styles
-  // This is temporary as we absorb more and more styles into the engine.
+  }, []);
 
+  // The goal is to move everything to server side generated engine styles
+  // This is temporary as we absorb more and more styles into the engine.
   const extraRules = getCSSRules(blockStyles);
   extraRules.forEach(rule => {
     // Don't output padding properties if padding variables are set.
     if (isRoot && useRootPaddingAlign && rule.key.startsWith('padding')) {
       return;
     }
-
     const cssProperty = rule.key.startsWith('--') ? rule.key : kebabCase(rule.key);
     let ruleValue = rule.value;
-
     if (typeof ruleValue !== 'string' && ruleValue?.ref) {
       const refPath = ruleValue.ref.split('.');
-      ruleValue = getValueFromObjectPath(tree, refPath); // Presence of another ref indicates a reference to another dynamic value.
+      ruleValue = getValueFromObjectPath(tree, refPath);
+      // Presence of another ref indicates a reference to another dynamic value.
       // Pointing to another dynamic value is not supported.
-
       if (!ruleValue || ruleValue?.ref) {
         return;
       }
-    } // Calculate fluid typography rules where available.
-
+    }
 
+    // Calculate fluid typography rules where available.
     if (cssProperty === 'font-size') {
       /*
        * getTypographyFontSizeValue() will check
@@ -322,11 +308,11 @@ export function getStylesDeclarations(blockStyles = {}, selector = '', useRootPa
         size: ruleValue
       }, getFluidTypographyOptionsFromSettings(tree?.settings));
     }
-
     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.
@@ -340,7 +326,6 @@ export function getStylesDeclarations(blockStyles = {}, selector = '', useRootPa
  * @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({
   layoutDefinitions = LAYOUT_DEFINITIONS,
   style,
@@ -350,9 +335,10 @@ export function getLayoutStyles({
   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 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.
   if (hasFallbackGapSupport) {
     if (selector === ROOT_BLOCK_SELECTOR) {
       gapValue = !gapValue ? '0.5em' : gapValue;
@@ -360,7 +346,6 @@ export function getLayoutStyles({
       gapValue = fallbackGapValue;
     }
   }
-
   if (gapValue && layoutDefinitions) {
     Object.values(layoutDefinitions).forEach(({
       className,
@@ -371,39 +356,34 @@ export function getLayoutStyles({
       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 ? `:where(${selector} .${className})${spacingStyle?.selector || ''}` : `${selector}-${className}${spacingStyle?.selector || ''}`;
             }
-
             ruleset += `${combinedSelector} { ${declarations.join('; ')}; }`;
           }
         });
       }
-    }); // For backwards compatibility, ensure the legacy block gap CSS variable is still available.
-
+    });
+    // For backwards compatibility, ensure the legacy block gap CSS variable is still available.
     if (selector === ROOT_BLOCK_SELECTOR && hasBlockGapSupport) {
       ruleset += `${selector} { --wp--style--block-gap: ${gapValue}; }`;
     }
-  } // Output base styles
-
+  }
 
+  // Output base styles
   if (selector === ROOT_BLOCK_SELECTOR && layoutDefinitions) {
     const validDisplayModes = ['block', 'flex', 'grid'];
     Object.values(layoutDefinitions).forEach(({
@@ -414,17 +394,14 @@ export function getLayoutStyles({
       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 = `${selector} .${className}${baseStyle?.selector || ''}`;
             ruleset += `${combinedSelector} { ${declarations.join('; ')}; }`;
@@ -433,42 +410,34 @@ export function getLayoutStyles({
       }
     });
   }
-
   return ruleset;
 }
 const STYLE_KEYS = ['border', 'color', 'dimensions', 'spacing', 'typography', 'filter', 'outline', 'shadow'];
-
 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 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))]);
   return Object.fromEntries(clonedEntries);
 }
-
 export const getNodesWithStyles = (tree, blockSelectors) => {
   var _tree$styles$blocks;
-
   const nodes = [];
-
   if (!tree?.styles) {
     return nodes;
-  } // Top-level.
-
+  }
 
+  // Top-level.
   const styles = pickStyleKeys(tree.styles);
-
   if (styles) {
     nodes.push({
       styles,
       selector: ROOT_BLOCK_SELECTOR
     });
   }
-
   Object.entries(ELEMENTS).forEach(([name, selector]) => {
     if (tree.styles?.elements?.[name]) {
       nodes.push({
@@ -476,13 +445,12 @@ export const getNodesWithStyles = (tree, blockSelectors) => {
         selector
       });
     }
-  }); // Iterate over blocks: they can have styles & elements.
+  });
 
+  // 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.keys(node.variations).forEach(variation => {
@@ -490,7 +458,6 @@ export const getNodesWithStyles = (tree, blockSelectors) => {
       });
       blockStyles.variations = variations;
     }
-
     if (blockStyles && blockSelectors?.[blockName]?.selector) {
       nodes.push({
         duotoneSelector: blockSelectors[blockName].duotoneSelector,
@@ -502,7 +469,6 @@ export const getNodesWithStyles = (tree, blockSelectors) => {
         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]) {
         nodes.push({
@@ -519,44 +485,38 @@ export const getNodesWithStyles = (tree, blockSelectors) => {
 };
 export const getNodesWithSettings = (tree, blockSelectors) => {
   var _tree$settings$blocks;
-
   const nodes = [];
-
   if (!tree?.settings) {
     return nodes;
   }
-
   const pickPresets = treeToPickFrom => {
     let presets = {};
     PRESET_METADATA.forEach(({
       path
     }) => {
       const value = getValueFromObjectPath(treeToPickFrom, path, false);
-
       if (value !== false) {
         presets = setImmutably(presets, path, value);
       }
     });
     return presets;
-  }; // Top-level.
-
+  };
 
+  // Top-level.
   const presets = pickPresets(tree.settings);
   const custom = tree.settings?.custom;
-
   if (Object.keys(presets).length > 0 || custom) {
     nodes.push({
       presets,
       custom,
       selector: ROOT_BLOCK_SELECTOR
     });
-  } // Blocks.
-
+  }
 
+  // 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,
@@ -577,11 +537,9 @@ export const toCustomProperties = (tree, blockSelectors) => {
   }) => {
     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(';')};}`;
     }
@@ -596,6 +554,7 @@ export const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGa
     contentSize,
     wideSize
   } = tree?.settings?.layout || {};
+
   /*
    * Reset default browser margin on the root body element.
    * This is set on the root selector **before** generating the ruleset
@@ -604,17 +563,13 @@ export const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGa
    * user-generated values take precedence in the CSS cascade.
    * @link https://github.com/WordPress/gutenberg/issues/36147.
    */
-
   let ruleset = 'body {margin: 0;';
-
   if (contentSize) {
     ruleset += ` --wp--style--global--content-size: ${contentSize};`;
   }
-
   if (wideSize) {
     ruleset += ` --wp--style--global--wide-size: ${wideSize};`;
   }
-
   if (useRootPaddingAlign) {
     /*
      * These rules reproduce the ones from https://github.com/WordPress/gutenberg/blob/79103f124925d1f457f627e154f52a56228ed5ad/lib/class-wp-theme-json-gutenberg.php#L2508
@@ -625,10 +580,9 @@ export const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGa
 			.has-global-padding :where(.has-global-padding) { padding-right: 0; padding-left: 0; }
 			.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }
 			.has-global-padding :where(.has-global-padding) > .alignfull { margin-right: 0; margin-left: 0; }
-			.has-global-padding > .alignfull:where(:not(.has-global-padding)) > :where(.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
+			.has-global-padding > .alignfull:where(:not(.has-global-padding):not(.is-layout-flex):not(.is-layout-grid)) > :where(.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
 			.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where(.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 0;`;
   }
-
   ruleset += '}';
   nodesWithStyles.forEach(({
     selector,
@@ -650,11 +604,9 @@ export const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGa
         }
       });
     }
-
     if (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) {
@@ -666,35 +618,31 @@ export const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGa
                 ruleset += `${cssSelector}{${rules};}`;
               }
             });
-          } // Otherwise add regular selectors.
-
+          }
 
+          // Otherwise add regular selectors.
           const styleVariationDeclarations = getStylesDeclarations(styleVariations, styleVariationSelector, useRootPaddingAlign, tree);
-
           if (styleVariationDeclarations.length) {
             ruleset += `${styleVariationSelector}{${styleVariationDeclarations.join(';')};}`;
           }
         }
       });
-    } // Process duotone styles.
-
+    }
 
+    // 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(';')};}`;
       }
-    } // Process blockGap and layout styles.
-
+    }
 
+    // Process blockGap and layout styles.
     if (!disableLayoutStyles && (ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport)) {
       ruleset += getLayoutStyles({
         style: styles,
@@ -703,46 +651,41 @@ export const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGa
         hasFallbackGapSupport,
         fallbackGapValue
       });
-    } // Process the remaining block styles (they use either normal block class or __experimentalSelector).
-
+    }
 
+    // Process the remaining block styles (they use either normal block class or __experimentalSelector).
     const declarations = getStylesDeclarations(styles, selector, useRootPaddingAlign, tree);
-
     if (declarations?.length) {
       ruleset += `${selector}{${declarations.join(';')};}`;
-    } // Check for pseudo selector in `styles` and handle separately.
-
+    }
 
+    // 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` maybe provided in a form
+        }
+
+        // `selector` maybe provided in a form
         // where block level selectors have sub element
         // selectors appended to them as a comma separated
         // string.
         // e.g. `h1 a,h2 a,h3 a,h4 a,h5 a,h6 a`;
         // Split and append pseudo selector to create
         // the proper rules to target the elements.
-
-
         const _selector = selector.split(',').map(sel => sel + pseudoKey).join(',');
-
         const pseudoRule = `${_selector}{${pseudoDeclarations.join(';')};}`;
         ruleset += pseudoRule;
       });
     }
   });
-  /* Add alignment / layout styles */
 
+  /* Add alignment / layout styles */
   ruleset = ruleset + '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
   ruleset = ruleset + '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
   ruleset = ruleset + '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
-
   if (hasBlockGapSupport) {
     // 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';
@@ -750,7 +693,6 @@ export const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGa
     ruleset = ruleset + ':where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }';
     ruleset = ruleset + ':where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }';
   }
-
   nodesWithSettings.forEach(({
     selector,
     presets
@@ -759,9 +701,7 @@ export const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGa
       // Do not add extra specificity for top-level classes.
       selector = '';
     }
-
     const classes = getPresetsClasses(selector, presets);
-
     if (classes.length > 0) {
       ruleset += classes;
     }
@@ -776,51 +716,45 @@ export function toSvgFilters(tree, blockSelectors) {
     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;
 };
-
 export const getBlockSelectors = (blockTypes, getBlockStyles) => {
   const result = {};
   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');
 
+    // Keep backwards compatibility for support.color.__experimentalDuotone.
     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 = {};
-
     if (blockStyleVariations?.length) {
       blockStyleVariations.forEach(variation => {
         const styleVariationSelector = `.is-style-${variation.name}${selector}`;
         styleVariationSelectors[variation.name] = styleVariationSelector;
       });
-    } // For each block support feature add any custom selectors.
-
-
+    }
+    // For each block support feature add any custom selectors.
     const featureSelectors = getSelectorsConfig(blockType, selector);
     result[name] = {
       duotoneSelector,
@@ -834,6 +768,7 @@ export const getBlockSelectors = (blockTypes, getBlockStyles) => {
   });
   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.
@@ -841,16 +776,19 @@ export const getBlockSelectors = (blockTypes, getBlockStyles) => {
  * @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;
-
   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,
+    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
             }
           }
@@ -858,20 +796,21 @@ function updateConfigWithSeparator(config) {
       }
     };
   }
-
   return config;
 }
-
 const processCSSNesting = (css, blockSelector) => {
-  let processedCSS = ''; // Split CSS nested rules.
+  let processedCSS = '';
 
+  // Split CSS nested rules.
   const parts = css.split('&');
   parts.forEach(part => {
     processedCSS += !part.includes('{') ? blockSelector + '{' + part + '}' // If the part doesn't contain braces, it applies to the root level.
     : blockSelector + part; // Prepend the selector, which effectively replaces the "&" character.
   });
+
   return processedCSS;
 };
+
 /**
  * Returns the global styles output using a global styles configuration.
  * If wishing to generate global styles and settings based on the
@@ -882,13 +821,10 @@ const processCSSNesting = (css, blockSelector) => {
  * @param {Object} mergedConfig Global styles configuration.
  * @return {Array} Array of stylesheets and settings.
  */
-
-
 export function useGlobalStylesOutputWithConfig(mergedConfig = {}) {
   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
@@ -900,11 +836,9 @@ export function useGlobalStylesOutputWithConfig(mergedConfig = {}) {
   }, []);
   return useMemo(() => {
     var _mergedConfig$styles$;
-
     if (!mergedConfig?.styles || !mergedConfig?.settings) {
       return [];
     }
-
     mergedConfig = updateConfigWithSeparator(mergedConfig);
     const blockSelectors = getBlockSelectors(getBlockTypes(), getBlockStyles);
     const customProperties = toCustomProperties(mergedConfig, blockSelectors);
@@ -916,7 +850,8 @@ export function useGlobalStylesOutputWithConfig(mergedConfig = {}) {
     }, {
       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.
+    },
+    // Load custom CSS in own stylesheet so that any invalid CSS entered in the input won't break all the global styles in the editor.
     {
       css: (_mergedConfig$styles$ = mergedConfig.styles.css) !== null && _mergedConfig$styles$ !== void 0 ? _mergedConfig$styles$ : '',
       isGlobalStyles: true
@@ -924,10 +859,11 @@ export function useGlobalStylesOutputWithConfig(mergedConfig = {}) {
       assets: svgs,
       __unstableType: 'svg',
       isGlobalStyles: true
-    }]; // Loop through the blocks to check if there are custom CSS values.
+    }];
+
+    // 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 => {
       if (mergedConfig.styles.blocks[blockType.name]?.css) {
         const selector = blockSelectors[blockType.name].selector;
@@ -940,12 +876,12 @@ export function useGlobalStylesOutputWithConfig(mergedConfig = {}) {
     return [styles, mergedConfig.settings];
   }, [hasBlockGapSupport, hasFallbackGapSupport, mergedConfig, disableLayoutStyles]);
 }
+
 /**
  * Returns the global styles output based on the current state of global styles config loaded in the editor context.
  *
  * @return {Array} Array of stylesheets and settings.
  */
-
 export function useGlobalStylesOutput() {
   const {
     merged: mergedConfig