@wordpress/block-editor 13.3.0 → 14.0.0

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

@@ -29,7 +29,6 @@ var _store = require("../../store");
 var _definitions = require("../../layouts/definitions");
 var _object = require("../../utils/object");
 var _lockUnlock = require("../../lock-unlock");
-var _themeFileUriUtils = require("./theme-file-uri-utils");
 /**
  * WordPress dependencies
  */
@@ -38,6 +37,12 @@ var _themeFileUriUtils = require("./theme-file-uri-utils");
  * Internal dependencies
  */
 
+// Elements that rely on class names in their selectors.
+const ELEMENT_CLASS_NAMES = {
+  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 = {
@@ -49,16 +54,6 @@ const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
 const {
   kebabCase
 } = (0, _lockUnlock.unlock)(_components.privateApis);
-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.
@@ -284,31 +279,46 @@ function getStylesDeclarations(blockStyles = {}, selector = '', useRootPaddingAl
           return;
         }
         const cssProperty = name.startsWith('--') ? name : kebabCase(name);
-        declarations.push(`${cssProperty}: ${compileStyleValue((0, _object.getValueFromObjectPath)(styleValue, [prop]))}`);
+        declarations.push(`${cssProperty}: ${(0, _utils.compileStyleValue)((0, _object.getValueFromObjectPath)(styleValue, [prop]))}`);
       });
     } else if ((0, _object.getValueFromObjectPath)(blockStyles, pathToValue, false)) {
       const cssProperty = key.startsWith('--') ? key : kebabCase(key);
-      declarations.push(`${cssProperty}: ${compileStyleValue((0, _object.getValueFromObjectPath)(blockStyles, pathToValue))}`);
+      declarations.push(`${cssProperty}: ${(0, _utils.compileStyleValue)((0, _object.getValueFromObjectPath)(blockStyles, pathToValue))}`);
     }
     return declarations;
   }, []);
 
   /*
-   * Set background defaults.
-   * Applies to all background styles except the top-level site background.
+   * 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 (!isRoot && !!blockStyles.background) {
-    blockStyles = {
-      ...blockStyles,
-      background: {
-        ...blockStyles.background,
-        ...(0, _background.setBackgroundStyleDefaults)(blockStyles.background)
-      }
-    };
-  }
+  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 = (0, _utils.getResolvedValue)(blockStyles.background.backgroundImage, tree);
+    }
 
-  // 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.
+    /*
+     * 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,
+        background: {
+          ...blockStyles.background,
+          ...(0, _background.setBackgroundStyleDefaults)(blockStyles.background)
+        }
+      };
+    }
+  }
   const extraRules = (0, _styleEngine.getCSSRules)(blockStyles);
   extraRules.forEach(rule => {
     // Don't output padding properties if padding variables are set or if we're not editing a full template.
@@ -316,16 +326,7 @@ function getStylesDeclarations(blockStyles = {}, selector = '', useRootPaddingAl
       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 = compileStyleValue((0, _object.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;
-      }
-    }
+    let ruleValue = (0, _utils.getResolvedValue)(rule.value, tree, null);
 
     // Calculate fluid typography rules where available.
     if (cssProperty === 'font-size') {
@@ -473,14 +474,20 @@ const getNodesWithStyles = (tree, blockSelectors) => {
   if (styles) {
     nodes.push({
       styles,
-      selector: _utils.ROOT_BLOCK_SELECTOR
+      selector: _utils.ROOT_BLOCK_SELECTOR,
+      // Root selector (body) styles should not be wrapped in `:root where()` to keep
+      // specificity at (0,0,1) and maintain backwards compatibility.
+      skipSelectorWrapper: true
     });
   }
   Object.entries(_blocks.__EXPERIMENTAL_ELEMENTS).forEach(([name, selector]) => {
     if (tree.styles?.elements?.[name]) {
       nodes.push({
         styles: tree.styles?.elements?.[name],
-        selector
+        selector,
+        // Top level elements that don't use a class name should not receive the
+        // `:root :where()` wrapper to maintain backwards compatibility.
+        skipSelectorWrapper: !ELEMENT_CLASS_NAMES[name]
       });
     }
   });
@@ -697,7 +704,8 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSuppor
       fallbackGapValue,
       hasLayoutSupport,
       featureSelectors,
-      styleVariationSelectors
+      styleVariationSelectors,
+      skipSelectorWrapper
     }) => {
       // Process styles for block support features with custom feature level
       // CSS selectors set.
@@ -738,7 +746,8 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSuppor
       // Process the remaining block styles (they use either normal block class or __experimentalSelector).
       const styleDeclarations = getStylesDeclarations(styles, selector, useRootPaddingAlign, tree, disableRootPadding);
       if (styleDeclarations?.length) {
-        ruleset += `:root :where(${selector}){${styleDeclarations.join(';')};}`;
+        const generalSelector = skipSelectorWrapper ? selector : `:root :where(${selector})`;
+        ruleset += `${generalSelector}{${styleDeclarations.join(';')};}`;
       }
       if (styles?.css) {
         ruleset += processCSSNesting(styles.css, `:root :where(${selector})`);
@@ -788,7 +797,12 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSuppor
           // 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(';')};}`;
+
+          // 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;
         });
       }
@@ -919,10 +933,16 @@ function updateConfigWithSeparator(config) {
 }
 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() === '') {
+      return;
+    }
     const isRootCss = !part.includes('{');
     if (isRootCss) {
       // If the part doesn't contain braces, it applies to the root level.
@@ -934,8 +954,27 @@ function processCSSNesting(css, blockSelector) {
         return;
       }
       const [nestedSelector, cssValue] = splittedPart;
-      const combinedSelector = nestedSelector.startsWith(' ') ? (0, _utils.scopeSelector)(blockSelector, nestedSelector) : (0, _utils.appendToSelector)(blockSelector, nestedSelector);
-      processedCSS += `:root :where(${combinedSelector}){${cssValue.trim()}}`;
+
+      // 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();
+      let combinedSelector;
+      if (withoutPseudoElement === '') {
+        // Only contained a pseudo element to use the block selector to form
+        // the final `:root :where()` selector.
+        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(' ') ? (0, _utils.scopeSelector)(blockSelector, withoutPseudoElement) : (0, _utils.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;
@@ -955,7 +994,6 @@ function processCSSNesting(css, blockSelector) {
  */
 function useGlobalStylesOutputWithConfig(mergedConfig = {}, disableRootPadding) {
   const [blockGap] = (0, _hooks.useGlobalSetting)('spacing.blockGap');
-  mergedConfig = (0, _themeFileUriUtils.setThemeFileUris)(mergedConfig, mergedConfig?._links?.['wp:theme-file']);
   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 = (0, _data.useSelect)(select => {