@wordpress/block-editor 12.2.0 → 12.3.1

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

@@ -3,7 +3,7 @@ import { createElement } from "@wordpress/element";
 /**
  * External dependencies
  */
-import { get, isEmpty, kebabCase, set } from 'lodash';
+import { get, set } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -18,12 +18,14 @@ import { getCSSRules } from '@wordpress/style-engine';
 
 import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, scopeSelector } from './utils';
 import { getBlockCSSSelector } from './get-block-css-selector';
-import { getTypographyFontSizeValue } from './typography-utils';
+import { getTypographyFontSizeValue, getFluidTypographyOptionsFromSettings } from './typography-utils';
 import { GlobalStylesContext } from './context';
 import { useGlobalSetting } from './hooks';
 import { PresetDuotoneFilter } from '../duotone/components';
 import { getGapCSSValue } from '../../hooks/gap';
-import { store as blockEditorStore } from '../../store'; // List of block support features that can have their related styles
+import { store as blockEditorStore } from '../../store';
+import { LAYOUT_DEFINITIONS } from '../../layouts/definitions';
+import { kebabCase } 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 = {
@@ -34,13 +36,11 @@ const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
 };
 
 function compileStyleValue(uncompiledValue) {
-  var _uncompiledValue$star;
-
   const VARIABLE_REFERENCE_PREFIX = 'var:';
   const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
   const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
 
-  if (uncompiledValue !== null && uncompiledValue !== void 0 && (_uncompiledValue$star = uncompiledValue.startsWith) !== null && _uncompiledValue$star !== void 0 && _uncompiledValue$star.call(uncompiledValue, VARIABLE_REFERENCE_PREFIX)) {
+  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})`;
   }
@@ -57,16 +57,13 @@ function compileStyleValue(uncompiledValue) {
  */
 
 
-function getPresetsDeclarations() {
-  let blockPresets = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let mergedSettings = arguments.length > 1 ? arguments[1] : undefined;
-  return PRESET_METADATA.reduce((declarations, _ref) => {
-    let {
-      path,
-      valueKey,
-      valueFunc,
-      cssVarInfix
-    } = _ref;
+function getPresetsDeclarations(blockPresets = {}, mergedSettings) {
+  return PRESET_METADATA.reduce((declarations, {
+    path,
+    valueKey,
+    valueFunc,
+    cssVarInfix
+  }) => {
     const presetByOrigin = get(blockPresets, path, []);
     ['default', 'theme', 'custom'].forEach(origin => {
       if (presetByOrigin[origin]) {
@@ -91,16 +88,12 @@ function getPresetsDeclarations() {
  */
 
 
-function getPresetsClasses() {
-  let blockSelector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '*';
-  let blockPresets = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return PRESET_METADATA.reduce((declarations, _ref2) => {
-    let {
-      path,
-      cssVarInfix,
-      classes
-    } = _ref2;
-
+function getPresetsClasses(blockSelector = '*', blockPresets = {}) {
+  return PRESET_METADATA.reduce((declarations, {
+    path,
+    cssVarInfix,
+    classes
+  }) => {
     if (!classes) {
       return declarations;
     }
@@ -108,15 +101,13 @@ function getPresetsClasses() {
     const presetByOrigin = get(blockPresets, path, []);
     ['default', 'theme', 'custom'].forEach(origin => {
       if (presetByOrigin[origin]) {
-        presetByOrigin[origin].forEach(_ref3 => {
-          let {
-            slug
-          } = _ref3;
-          classes.forEach(_ref4 => {
-            let {
-              classSuffix,
-              propertyName
-            } = _ref4;
+        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(',');
@@ -130,8 +121,7 @@ function getPresetsClasses() {
   }, '');
 }
 
-function getPresetsSvgFilters() {
-  let blockPresets = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+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 = get(blockPresets, metadata.path, {});
@@ -142,10 +132,7 @@ function getPresetsSvgFilters() {
   });
 }
 
-function flattenTree() {
-  let input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let prefix = arguments.length > 1 ? arguments[1] : undefined;
-  let token = arguments.length > 2 ? arguments[2] : undefined;
+function flattenTree(input = {}, prefix, token) {
   let result = [];
   Object.keys(input).forEach(key => {
     const newKey = prefix + kebabCase(key.replace('/', '-'));
@@ -194,23 +181,19 @@ function concatFeatureVariationSelectorString(featureSelector, styleVariationSel
 
 const getFeatureDeclarations = (selectors, styles) => {
   const declarations = {};
-  Object.entries(selectors).forEach(_ref5 => {
-    let [feature, selector] = _ref5;
-
+  Object.entries(selectors).forEach(([feature, selector]) => {
     // We're only processing features/subfeatures that have styles.
-    if (feature === 'root' || !(styles !== null && styles !== void 0 && styles[feature])) {
+    if (feature === 'root' || !styles?.[feature]) {
       return;
     }
 
     const isShorthand = typeof selector === 'string'; // If we have a selector object instead of shorthand process it.
 
     if (!isShorthand) {
-      Object.entries(selector).forEach(_ref6 => {
-        let [subfeature, subfeatureSelector] = _ref6;
-
+      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 !== null && styles !== void 0 && styles[feature][subfeature])) {
+        if (subfeature === 'root' || !styles?.[feature][subfeature]) {
           return;
         } // Create a temporary styles object and build
         // declarations for subfeature.
@@ -264,20 +247,14 @@ const getFeatureDeclarations = (selectors, styles) => {
  */
 
 
-export function getStylesDeclarations() {
-  let blockStyles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let selector = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  let useRootPaddingAlign = arguments.length > 2 ? arguments[2] : undefined;
-  let tree = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+export function getStylesDeclarations(blockStyles = {}, selector = '', useRootPaddingAlign, tree = {}) {
   const isRoot = ROOT_BLOCK_SELECTOR === selector;
-  const output = Object.entries(STYLE_PROPERTY).reduce((declarations, _ref7) => {
-    let [key, {
-      value,
-      properties,
-      useEngine,
-      rootOnly
-    }] = _ref7;
-
+  const output = Object.entries(STYLE_PROPERTY).reduce((declarations, [key, {
+    value,
+    properties,
+    useEngine,
+    rootOnly
+  }]) => {
     if (rootOnly && !isRoot) {
       return declarations;
     }
@@ -319,8 +296,6 @@ export function getStylesDeclarations() {
 
   const extraRules = getCSSRules(blockStyles);
   extraRules.forEach(rule => {
-    var _ruleValue;
-
     // Don't output padding properties if padding variables are set.
     if (isRoot && useRootPaddingAlign && rule.key.startsWith('padding')) {
       return;
@@ -329,22 +304,18 @@ export function getStylesDeclarations() {
     const cssProperty = rule.key.startsWith('--') ? rule.key : kebabCase(rule.key);
     let ruleValue = rule.value;
 
-    if (typeof ruleValue !== 'string' && (_ruleValue = ruleValue) !== null && _ruleValue !== void 0 && _ruleValue.ref) {
-      var _ruleValue2;
-
+    if (typeof ruleValue !== 'string' && ruleValue?.ref) {
       const refPath = ruleValue.ref.split('.');
       ruleValue = get(tree, refPath); // Presence of another ref indicates a reference to another dynamic value.
       // Pointing to another dynamic value is not supported.
 
-      if (!ruleValue || (_ruleValue2 = ruleValue) !== null && _ruleValue2 !== void 0 && _ruleValue2.ref) {
+      if (!ruleValue || ruleValue?.ref) {
         return;
       }
     } // Calculate fluid typography rules where available.
 
 
     if (cssProperty === 'font-size') {
-      var _tree$settings;
-
       /*
        * getTypographyFontSizeValue() will check
        * if fluid typography has been activated and also
@@ -354,7 +325,7 @@ export function getStylesDeclarations() {
        */
       ruleValue = getTypographyFontSizeValue({
         size: ruleValue
-      }, tree === null || tree === void 0 ? void 0 : (_tree$settings = tree.settings) === null || _tree$settings === void 0 ? void 0 : _tree$settings.typography);
+      }, getFluidTypographyOptionsFromSettings(tree?.settings));
     }
 
     output.push(`${cssProperty}: ${ruleValue}`);
@@ -366,7 +337,7 @@ export function getStylesDeclarations() {
  * in theme.json, and outputting common layout styles, and specific blockGap values.
  *
  * @param {Object}  props
- * @param {Object}  props.tree                  A theme.json tree containing layout definitions.
+ * @param {Object}  props.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.
@@ -375,19 +346,16 @@ export function getStylesDeclarations() {
  * @return {string} Generated CSS rules for the layout styles.
  */
 
-export function getLayoutStyles(_ref8) {
-  var _style$spacing, _tree$settings2, _tree$settings2$layou, _tree$settings3, _tree$settings3$layou;
-
-  let {
-    tree,
-    style,
-    selector,
-    hasBlockGapSupport,
-    hasFallbackGapSupport,
-    fallbackGapValue
-  } = _ref8;
+export function getLayoutStyles({
+  layoutDefinitions = LAYOUT_DEFINITIONS,
+  style,
+  selector,
+  hasBlockGapSupport,
+  hasFallbackGapSupport,
+  fallbackGapValue
+}) {
   let ruleset = '';
-  let gapValue = hasBlockGapSupport ? getGapCSSValue(style === null || style === void 0 ? void 0 : (_style$spacing = style.spacing) === null || _style$spacing === void 0 ? void 0 : _style$spacing.blockGap) : ''; // Ensure a fallback gap value for the root layout definitions,
+  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) {
@@ -398,26 +366,23 @@ export function getLayoutStyles(_ref8) {
     }
   }
 
-  if (gapValue && tree !== null && tree !== void 0 && (_tree$settings2 = tree.settings) !== null && _tree$settings2 !== void 0 && (_tree$settings2$layou = _tree$settings2.layout) !== null && _tree$settings2$layou !== void 0 && _tree$settings2$layou.definitions) {
-    Object.values(tree.settings.layout.definitions).forEach(_ref9 => {
-      let {
-        className,
-        name,
-        spacingStyles
-      } = _ref9;
-
+  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) {
+      if (!hasBlockGapSupport && 'flex' !== name && 'grid' !== name) {
         return;
       }
 
-      if (spacingStyles !== null && spacingStyles !== void 0 && spacingStyles.length) {
+      if (spacingStyles?.length) {
         spacingStyles.forEach(spacingStyle => {
           const declarations = [];
 
           if (spacingStyle.rules) {
-            Object.entries(spacingStyle.rules).forEach(_ref10 => {
-              let [cssProperty, cssValue] = _ref10;
+            Object.entries(spacingStyle.rules).forEach(([cssProperty, cssValue]) => {
               declarations.push(`${cssProperty}: ${cssValue ? cssValue : gapValue}`);
             });
           }
@@ -427,9 +392,9 @@ export function getLayoutStyles(_ref8) {
 
             if (!hasBlockGapSupport) {
               // For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles.
-              combinedSelector = selector === ROOT_BLOCK_SELECTOR ? `:where(.${className}${(spacingStyle === null || spacingStyle === void 0 ? void 0 : spacingStyle.selector) || ''})` : `:where(${selector}.${className}${(spacingStyle === null || spacingStyle === void 0 ? void 0 : spacingStyle.selector) || ''})`;
+              combinedSelector = selector === ROOT_BLOCK_SELECTOR ? `:where(.${className}${spacingStyle?.selector || ''})` : `:where(${selector}.${className}${spacingStyle?.selector || ''})`;
             } else {
-              combinedSelector = selector === ROOT_BLOCK_SELECTOR ? `:where(${selector} .${className})${(spacingStyle === null || spacingStyle === void 0 ? void 0 : spacingStyle.selector) || ''}` : `${selector}-${className}${(spacingStyle === null || spacingStyle === void 0 ? void 0 : spacingStyle.selector) || ''}`;
+              combinedSelector = selector === ROOT_BLOCK_SELECTOR ? `:where(${selector} .${className})${spacingStyle?.selector || ''}` : `${selector}-${className}${spacingStyle?.selector || ''}`;
             }
 
             ruleset += `${combinedSelector} { ${declarations.join('; ')}; }`;
@@ -444,32 +409,29 @@ export function getLayoutStyles(_ref8) {
   } // Output base styles
 
 
-  if (selector === ROOT_BLOCK_SELECTOR && tree !== null && tree !== void 0 && (_tree$settings3 = tree.settings) !== null && _tree$settings3 !== void 0 && (_tree$settings3$layou = _tree$settings3.layout) !== null && _tree$settings3$layou !== void 0 && _tree$settings3$layou.definitions) {
+  if (selector === ROOT_BLOCK_SELECTOR && layoutDefinitions) {
     const validDisplayModes = ['block', 'flex', 'grid'];
-    Object.values(tree.settings.layout.definitions).forEach(_ref11 => {
-      let {
-        className,
-        displayMode,
-        baseStyles
-      } = _ref11;
-
+    Object.values(layoutDefinitions).forEach(({
+      className,
+      displayMode,
+      baseStyles
+    }) => {
       if (displayMode && validDisplayModes.includes(displayMode)) {
         ruleset += `${selector} .${className} { display:${displayMode}; }`;
       }
 
-      if (baseStyles !== null && baseStyles !== void 0 && baseStyles.length) {
+      if (baseStyles?.length) {
         baseStyles.forEach(baseStyle => {
           const declarations = [];
 
           if (baseStyle.rules) {
-            Object.entries(baseStyle.rules).forEach(_ref12 => {
-              let [cssProperty, cssValue] = _ref12;
+            Object.entries(baseStyle.rules).forEach(([cssProperty, cssValue]) => {
               declarations.push(`${cssProperty}: ${cssValue}`);
             });
           }
 
           if (declarations.length) {
-            const combinedSelector = `${selector} .${className}${(baseStyle === null || baseStyle === void 0 ? void 0 : baseStyle.selector) || ''}`;
+            const combinedSelector = `${selector} .${className}${baseStyle?.selector || ''}`;
             ruleset += `${combinedSelector} { ${declarations.join('; ')}; }`;
           }
         });
@@ -487,24 +449,18 @@ function pickStyleKeys(treeToPickFrom) {
   }
 
   const entries = Object.entries(treeToPickFrom);
-  const pickedEntries = entries.filter(_ref13 => {
-    let [key] = _ref13;
-    return STYLE_KEYS.includes(key);
-  }); // clone the style objects so that `getFeatureDeclarations` can remove consumed keys from it
-
-  const clonedEntries = pickedEntries.map(_ref14 => {
-    let [key, style] = _ref14;
-    return [key, JSON.parse(JSON.stringify(style))];
-  });
+  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, _tree$styles3;
+  var _tree$styles$blocks;
 
   const nodes = [];
 
-  if (!(tree !== null && tree !== void 0 && tree.styles)) {
+  if (!tree?.styles) {
     return nodes;
   } // Top-level.
 
@@ -518,28 +474,21 @@ export const getNodesWithStyles = (tree, blockSelectors) => {
     });
   }
 
-  Object.entries(ELEMENTS).forEach(_ref15 => {
-    var _tree$styles, _tree$styles$elements;
-
-    let [name, selector] = _ref15;
-
-    if ((_tree$styles = tree.styles) !== null && _tree$styles !== void 0 && (_tree$styles$elements = _tree$styles.elements) !== null && _tree$styles$elements !== void 0 && _tree$styles$elements[name]) {
-      var _tree$styles2, _tree$styles2$element;
-
+  Object.entries(ELEMENTS).forEach(([name, selector]) => {
+    if (tree.styles?.elements?.[name]) {
       nodes.push({
-        styles: (_tree$styles2 = tree.styles) === null || _tree$styles2 === void 0 ? void 0 : (_tree$styles2$element = _tree$styles2.elements) === null || _tree$styles2$element === void 0 ? void 0 : _tree$styles2$element[name],
+        styles: tree.styles?.elements?.[name],
         selector
       });
     }
   }); // Iterate over blocks: they can have styles & elements.
 
-  Object.entries((_tree$styles$blocks = (_tree$styles3 = tree.styles) === null || _tree$styles3 === void 0 ? void 0 : _tree$styles3.blocks) !== null && _tree$styles$blocks !== void 0 ? _tree$styles$blocks : {}).forEach(_ref16 => {
-    var _blockSelectors$block, _node$elements;
+  Object.entries((_tree$styles$blocks = tree.styles?.blocks) !== null && _tree$styles$blocks !== void 0 ? _tree$styles$blocks : {}).forEach(([blockName, node]) => {
+    var _node$elements;
 
-    let [blockName, node] = _ref16;
     const blockStyles = pickStyleKeys(node);
 
-    if (node !== null && node !== void 0 && node.variations) {
+    if (node?.variations) {
       const variations = {};
       Object.keys(node.variations).forEach(variation => {
         variations[variation] = pickStyleKeys(node.variations[variation]);
@@ -547,7 +496,7 @@ export const getNodesWithStyles = (tree, blockSelectors) => {
       blockStyles.variations = variations;
     }
 
-    if (blockStyles && blockSelectors !== null && blockSelectors !== void 0 && (_blockSelectors$block = blockSelectors[blockName]) !== null && _blockSelectors$block !== void 0 && _blockSelectors$block.selector) {
+    if (blockStyles && blockSelectors?.[blockName]?.selector) {
       nodes.push({
         duotoneSelector: blockSelectors[blockName].duotoneSelector,
         fallbackGapValue: blockSelectors[blockName].fallbackGapValue,
@@ -559,15 +508,11 @@ export const getNodesWithStyles = (tree, blockSelectors) => {
       });
     }
 
-    Object.entries((_node$elements = node === null || node === void 0 ? void 0 : node.elements) !== null && _node$elements !== void 0 ? _node$elements : {}).forEach(_ref17 => {
-      let [elementName, value] = _ref17;
-
-      if (value && blockSelectors !== null && blockSelectors !== void 0 && blockSelectors[blockName] && ELEMENTS[elementName]) {
-        var _blockSelectors$block2;
-
+    Object.entries((_node$elements = node?.elements) !== null && _node$elements !== void 0 ? _node$elements : {}).forEach(([elementName, value]) => {
+      if (value && blockSelectors?.[blockName] && ELEMENTS[elementName]) {
         nodes.push({
           styles: value,
-          selector: (_blockSelectors$block2 = blockSelectors[blockName]) === null || _blockSelectors$block2 === void 0 ? void 0 : _blockSelectors$block2.selector.split(',').map(sel => {
+          selector: blockSelectors[blockName]?.selector.split(',').map(sel => {
             const elementSelectors = ELEMENTS[elementName].split(',');
             return elementSelectors.map(elementSelector => sel + ' ' + elementSelector);
           }).join(',')
@@ -578,20 +523,19 @@ export const getNodesWithStyles = (tree, blockSelectors) => {
   return nodes;
 };
 export const getNodesWithSettings = (tree, blockSelectors) => {
-  var _tree$settings4, _tree$settings$blocks, _tree$settings5;
+  var _tree$settings$blocks;
 
   const nodes = [];
 
-  if (!(tree !== null && tree !== void 0 && tree.settings)) {
+  if (!tree?.settings) {
     return nodes;
   }
 
   const pickPresets = treeToPickFrom => {
     const presets = {};
-    PRESET_METADATA.forEach(_ref18 => {
-      let {
-        path
-      } = _ref18;
+    PRESET_METADATA.forEach(({
+      path
+    }) => {
       const value = get(treeToPickFrom, path, false);
 
       if (value !== false) {
@@ -603,9 +547,9 @@ export const getNodesWithSettings = (tree, blockSelectors) => {
 
 
   const presets = pickPresets(tree.settings);
-  const custom = (_tree$settings4 = tree.settings) === null || _tree$settings4 === void 0 ? void 0 : _tree$settings4.custom;
+  const custom = tree.settings?.custom;
 
-  if (!isEmpty(presets) || custom) {
+  if (Object.keys(presets).length > 0 || custom) {
     nodes.push({
       presets,
       custom,
@@ -614,18 +558,15 @@ export const getNodesWithSettings = (tree, blockSelectors) => {
   } // Blocks.
 
 
-  Object.entries((_tree$settings$blocks = (_tree$settings5 = tree.settings) === null || _tree$settings5 === void 0 ? void 0 : _tree$settings5.blocks) !== null && _tree$settings$blocks !== void 0 ? _tree$settings$blocks : {}).forEach(_ref19 => {
-    let [blockName, node] = _ref19;
+  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 (!isEmpty(blockPresets) || blockCustom) {
-      var _blockSelectors$block3;
-
+    if (Object.keys(blockPresets).length > 0 || blockCustom) {
       nodes.push({
         presets: blockPresets,
         custom: blockCustom,
-        selector: (_blockSelectors$block3 = blockSelectors[blockName]) === null || _blockSelectors$block3 === void 0 ? void 0 : _blockSelectors$block3.selector
+        selector: blockSelectors[blockName]?.selector
       });
     }
   });
@@ -634,13 +575,12 @@ export const getNodesWithSettings = (tree, blockSelectors) => {
 export const toCustomProperties = (tree, blockSelectors) => {
   const settings = getNodesWithSettings(tree, blockSelectors);
   let ruleset = '';
-  settings.forEach(_ref20 => {
-    let {
-      presets,
-      custom,
-      selector
-    } = _ref20;
-    const declarations = getPresetsDeclarations(presets, tree === null || tree === void 0 ? void 0 : tree.settings);
+  settings.forEach(({
+    presets,
+    custom,
+    selector
+  }) => {
+    const declarations = getPresetsDeclarations(presets, tree?.settings);
     const customProps = flattenTree(custom, '--wp--custom--', '--');
 
     if (customProps.length > 0) {
@@ -653,17 +593,14 @@ export const toCustomProperties = (tree, blockSelectors) => {
   });
   return ruleset;
 };
-export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport) {
-  var _tree$settings6, _tree$settings7;
-
-  let disableLayoutStyles = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+export const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles = false) => {
   const nodesWithStyles = getNodesWithStyles(tree, blockSelectors);
   const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
-  const useRootPaddingAlign = tree === null || tree === void 0 ? void 0 : (_tree$settings6 = tree.settings) === null || _tree$settings6 === void 0 ? void 0 : _tree$settings6.useRootPaddingAwareAlignments;
+  const useRootPaddingAlign = tree?.settings?.useRootPaddingAwareAlignments;
   const {
     contentSize,
     wideSize
-  } = (tree === null || tree === void 0 ? void 0 : (_tree$settings7 = tree.settings) === null || _tree$settings7 === void 0 ? void 0 : _tree$settings7.layout) || {};
+  } = tree?.settings?.layout || {};
   /*
    * Reset default browser margin on the root body element.
    * This is set on the root selector **before** generating the ruleset
@@ -698,24 +635,20 @@ export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasF
   }
 
   ruleset += '}';
-  nodesWithStyles.forEach(_ref21 => {
-    let {
-      selector,
-      duotoneSelector,
-      styles,
-      fallbackGapValue,
-      hasLayoutSupport,
-      featureSelectors,
-      styleVariationSelectors
-    } = _ref21;
-
+  nodesWithStyles.forEach(({
+    selector,
+    duotoneSelector,
+    styles,
+    fallbackGapValue,
+    hasLayoutSupport,
+    featureSelectors,
+    styleVariationSelectors
+  }) => {
     // Process styles for block support features with custom feature level
     // CSS selectors set.
     if (featureSelectors) {
       const featureDeclarations = getFeatureDeclarations(featureSelectors, styles);
-      Object.entries(featureDeclarations).forEach(_ref22 => {
-        let [cssSelector, declarations] = _ref22;
-
+      Object.entries(featureDeclarations).forEach(([cssSelector, declarations]) => {
         if (declarations.length) {
           const rules = declarations.join(';');
           ruleset += `${cssSelector}{${rules};}`;
@@ -724,19 +657,14 @@ export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasF
     }
 
     if (styleVariationSelectors) {
-      Object.entries(styleVariationSelectors).forEach(_ref23 => {
-        var _styles$variations;
-
-        let [styleVariationName, styleVariationSelector] = _ref23;
-        const styleVariations = styles === null || styles === void 0 ? void 0 : (_styles$variations = styles.variations) === null || _styles$variations === void 0 ? void 0 : _styles$variations[styleVariationName];
+      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(_ref24 => {
-              let [baseSelector, declarations] = _ref24;
-
+            Object.entries(featureDeclarations).forEach(([baseSelector, declarations]) => {
               if (declarations.length) {
                 const cssSelector = concatFeatureVariationSelectorString(baseSelector, styleVariationSelector);
                 const rules = declarations.join(';');
@@ -759,7 +687,7 @@ export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasF
     if (duotoneSelector) {
       const duotoneStyles = {};
 
-      if (styles !== null && styles !== void 0 && styles.filter) {
+      if (styles?.filter) {
         duotoneStyles.filter = styles.filter;
         delete styles.filter;
       }
@@ -774,7 +702,6 @@ export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasF
 
     if (!disableLayoutStyles && (ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport)) {
       ruleset += getLayoutStyles({
-        tree,
         style: styles,
         selector,
         hasBlockGapSupport,
@@ -786,22 +713,18 @@ export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasF
 
     const declarations = getStylesDeclarations(styles, selector, useRootPaddingAlign, tree);
 
-    if (declarations !== null && declarations !== void 0 && declarations.length) {
+    if (declarations?.length) {
       ruleset += `${selector}{${declarations.join(';')};}`;
     } // Check for pseudo selector in `styles` and handle separately.
 
 
-    const pseudoSelectorStyles = Object.entries(styles).filter(_ref25 => {
-      let [key] = _ref25;
-      return key.startsWith(':');
-    });
+    const pseudoSelectorStyles = Object.entries(styles).filter(([key]) => key.startsWith(':'));
 
-    if (pseudoSelectorStyles !== null && pseudoSelectorStyles !== void 0 && pseudoSelectorStyles.length) {
-      pseudoSelectorStyles.forEach(_ref26 => {
-        let [pseudoKey, pseudoStyle] = _ref26;
+    if (pseudoSelectorStyles?.length) {
+      pseudoSelectorStyles.forEach(([pseudoKey, pseudoStyle]) => {
         const pseudoDeclarations = getStylesDeclarations(pseudoStyle);
 
-        if (!(pseudoDeclarations !== null && pseudoDeclarations !== void 0 && pseudoDeclarations.length)) {
+        if (!pseudoDeclarations?.length) {
           return;
         } // `selector` maybe provided in a form
         // where block level selectors have sub element
@@ -826,21 +749,17 @@ export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasF
   ruleset = ruleset + '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
 
   if (hasBlockGapSupport) {
-    var _tree$styles4, _tree$styles4$spacing;
-
     // Use fallback of `0.5em` just in case, however if there is blockGap support, there should nearly always be a real value.
-    const gapValue = getGapCSSValue(tree === null || tree === void 0 ? void 0 : (_tree$styles4 = tree.styles) === null || _tree$styles4 === void 0 ? void 0 : (_tree$styles4$spacing = _tree$styles4.spacing) === null || _tree$styles4$spacing === void 0 ? void 0 : _tree$styles4$spacing.blockGap) || '0.5em';
+    const gapValue = getGapCSSValue(tree?.styles?.spacing?.blockGap) || '0.5em';
     ruleset = ruleset + `:where(.wp-site-blocks) > * { margin-block-start: ${gapValue}; margin-block-end: 0; }`;
     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(_ref27 => {
-    let {
-      selector,
-      presets
-    } = _ref27;
-
+  nodesWithSettings.forEach(({
+    selector,
+    presets
+  }) => {
     if (ROOT_BLOCK_SELECTOR === selector) {
       // Do not add extra specificity for top-level classes.
       selector = '';
@@ -848,7 +767,7 @@ export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasF
 
     const classes = getPresetsClasses(selector, presets);
 
-    if (!isEmpty(classes)) {
+    if (classes.length > 0) {
       ruleset += classes;
     }
   });
@@ -856,24 +775,22 @@ export const toStyles = function (tree, blockSelectors, hasBlockGapSupport, hasF
 };
 export function toSvgFilters(tree, blockSelectors) {
   const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
-  return nodesWithSettings.flatMap(_ref28 => {
-    let {
-      presets
-    } = _ref28;
+  return nodesWithSettings.flatMap(({
+    presets
+  }) => {
     return getPresetsSvgFilters(presets);
   });
 }
 
 const getSelectorsConfig = (blockType, rootSelector) => {
-  if (!isEmpty(blockType === null || blockType === void 0 ? void 0 : blockType.selectors)) {
+  if (blockType?.selectors && Object.keys(blockType.selectors).length > 0) {
     return blockType.selectors;
   }
 
   const config = {
     root: rootSelector
   };
-  Object.entries(BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS).forEach(_ref29 => {
-    let [featureKey, featureName] = _ref29;
+  Object.entries(BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS).forEach(([featureKey, featureName]) => {
     const featureSelector = getBlockCSSSelector(blockType, featureKey);
 
     if (featureSelector) {
@@ -886,8 +803,6 @@ const getSelectorsConfig = (blockType, rootSelector) => {
 export const getBlockSelectors = (blockTypes, getBlockStyles) => {
   const result = {};
   blockTypes.forEach(blockType => {
-    var _blockType$supports, _blockType$supports2, _blockType$supports2$, _blockType$supports2$2;
-
     const name = blockType.name;
     const selector = getBlockCSSSelector(blockType);
     let duotoneSelector = getBlockCSSSelector(blockType, 'filter.duotone'); // Keep backwards compatibility for support.color.__experimentalDuotone.
@@ -898,12 +813,12 @@ export const getBlockSelectors = (blockTypes, getBlockStyles) => {
       duotoneSelector = duotoneSupport && scopeSelector(rootSelector, duotoneSupport);
     }
 
-    const hasLayoutSupport = !!(blockType !== null && blockType !== void 0 && (_blockType$supports = blockType.supports) !== null && _blockType$supports !== void 0 && _blockType$supports.__experimentalLayout);
-    const fallbackGapValue = blockType === null || blockType === void 0 ? void 0 : (_blockType$supports2 = blockType.supports) === null || _blockType$supports2 === void 0 ? void 0 : (_blockType$supports2$ = _blockType$supports2.spacing) === null || _blockType$supports2$ === void 0 ? void 0 : (_blockType$supports2$2 = _blockType$supports2$.blockGap) === null || _blockType$supports2$2 === void 0 ? void 0 : _blockType$supports2$2.__experimentalDefault;
+    const hasLayoutSupport = !!blockType?.supports?.layout || !!blockType?.supports?.__experimentalLayout;
+    const fallbackGapValue = blockType?.supports?.spacing?.blockGap?.__experimentalDefault;
     const blockStyleVariations = getBlockStyles(name);
     const styleVariationSelectors = {};
 
-    if (blockStyleVariations !== null && blockStyleVariations !== void 0 && blockStyleVariations.length) {
+    if (blockStyleVariations?.length) {
       blockStyleVariations.forEach(variation => {
         const styleVariationSelector = `.is-style-${variation.name}${selector}`;
         styleVariationSelectors[variation.name] = styleVariationSelector;
@@ -933,19 +848,15 @@ export const getBlockSelectors = (blockTypes, getBlockStyles) => {
  */
 
 function updateConfigWithSeparator(config) {
-  var _config$styles, _config$styles$blocks, _config$styles2, _config$styles2$block, _config$styles2$block2, _config$styles3, _config$styles3$block, _config$styles3$block2, _config$styles4, _config$styles4$block, _config$styles4$block2;
-
-  const needsSeparatorStyleUpdate = ((_config$styles = config.styles) === null || _config$styles === void 0 ? void 0 : (_config$styles$blocks = _config$styles.blocks) === null || _config$styles$blocks === void 0 ? void 0 : _config$styles$blocks['core/separator']) && ((_config$styles2 = config.styles) === null || _config$styles2 === void 0 ? void 0 : (_config$styles2$block = _config$styles2.blocks) === null || _config$styles2$block === void 0 ? void 0 : (_config$styles2$block2 = _config$styles2$block['core/separator'].color) === null || _config$styles2$block2 === void 0 ? void 0 : _config$styles2$block2.background) && !((_config$styles3 = config.styles) !== null && _config$styles3 !== void 0 && (_config$styles3$block = _config$styles3.blocks) !== null && _config$styles3$block !== void 0 && (_config$styles3$block2 = _config$styles3$block['core/separator'].color) !== null && _config$styles3$block2 !== void 0 && _config$styles3$block2.text) && !((_config$styles4 = config.styles) !== null && _config$styles4 !== void 0 && (_config$styles4$block = _config$styles4.blocks) !== null && _config$styles4$block !== void 0 && (_config$styles4$block2 = _config$styles4$block['core/separator'].border) !== null && _config$styles4$block2 !== void 0 && _config$styles4$block2.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) {
-    var _config$styles5;
-
     return { ...config,
       styles: { ...config.styles,
         blocks: { ...config.styles.blocks,
           'core/separator': { ...config.styles.blocks['core/separator'],
             color: { ...config.styles.blocks['core/separator'].color,
-              text: (_config$styles5 = config.styles) === null || _config$styles5 === void 0 ? void 0 : _config$styles5.blocks['core/separator'].color.background
+              text: config.styles?.blocks['core/separator'].color.background
             }
           }
         }
@@ -978,8 +889,7 @@ const processCSSNesting = (css, blockSelector) => {
  */
 
 
-export function useGlobalStylesOutputWithConfig() {
-  let mergedConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+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.
@@ -994,9 +904,9 @@ export function useGlobalStylesOutputWithConfig() {
     return select(blocksStore).getBlockStyles;
   }, []);
   return useMemo(() => {
-    var _mergedConfig, _mergedConfig2, _mergedConfig$styles$;
+    var _mergedConfig$styles$;
 
-    if (!((_mergedConfig = mergedConfig) !== null && _mergedConfig !== void 0 && _mergedConfig.styles) || !((_mergedConfig2 = mergedConfig) !== null && _mergedConfig2 !== void 0 && _mergedConfig2.settings)) {
+    if (!mergedConfig?.styles || !mergedConfig?.settings) {
       return [];
     }
 
@@ -1024,14 +934,10 @@ export function useGlobalStylesOutputWithConfig() {
     // the CSS value to the 'stylesheets' array.
 
     getBlockTypes().forEach(blockType => {
-      var _mergedConfig$styles$2;
-
-      if ((_mergedConfig$styles$2 = mergedConfig.styles.blocks[blockType.name]) !== null && _mergedConfig$styles$2 !== void 0 && _mergedConfig$styles$2.css) {
-        var _mergedConfig$styles$3;
-
+      if (mergedConfig.styles.blocks[blockType.name]?.css) {
         const selector = blockSelectors[blockType.name].selector;
         styles.push({
-          css: processCSSNesting((_mergedConfig$styles$3 = mergedConfig.styles.blocks[blockType.name]) === null || _mergedConfig$styles$3 === void 0 ? void 0 : _mergedConfig$styles$3.css, selector),
+          css: processCSSNesting(mergedConfig.styles.blocks[blockType.name]?.css, selector),
           isGlobalStyles: true
         });
       }