@wordpress/block-editor 13.3.0 → 14.0.0

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

@@ -10,7 +10,7 @@ import { privateApis as componentsPrivateApis } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, ROOT_CSS_PROPERTIES_SELECTOR, scopeSelector, scopeFeatureSelectors, appendToSelector, getBlockStyleVariationSelector } from './utils';
+import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, ROOT_CSS_PROPERTIES_SELECTOR, scopeSelector, scopeFeatureSelectors, appendToSelector, getBlockStyleVariationSelector, compileStyleValue, getResolvedValue } from './utils';
 import { getBlockCSSSelector } from './get-block-css-selector';
 import { getTypographyFontSizeValue } from './typography-utils';
 import { GlobalStylesContext } from './context';
@@ -22,7 +22,12 @@ import { store as blockEditorStore } from '../../store';
 import { LAYOUT_DEFINITIONS } from '../../layouts/definitions';
 import { getValueFromObjectPath, setImmutably } from '../../utils/object';
 import { unlock } from '../../lock-unlock';
-import { setThemeFileUris } from './theme-file-uri-utils';
+
+// 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.
@@ -35,16 +40,6 @@ const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
 const {
   kebabCase
 } = unlock(componentsPrivateApis);
-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.
@@ -280,21 +275,36 @@ export function getStylesDeclarations(blockStyles = {}, selector = '', useRootPa
   }, []);
 
   /*
-   * 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,
-        ...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 = 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,
+          ...setBackgroundStyleDefaults(blockStyles.background)
+        }
+      };
+    }
+  }
   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.
@@ -302,16 +312,7 @@ export function getStylesDeclarations(blockStyles = {}, selector = '', useRootPa
       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(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 = getResolvedValue(rule.value, tree, null);
 
     // Calculate fluid typography rules where available.
     if (cssProperty === 'font-size') {
@@ -459,14 +460,20 @@ export const getNodesWithStyles = (tree, blockSelectors) => {
   if (styles) {
     nodes.push({
       styles,
-      selector: ROOT_BLOCK_SELECTOR
+      selector: ROOT_BLOCK_SELECTOR,
+      // Root selector (body) styles should not be wrapped in `:root where()` to keep
+      // specificity at (0,0,1) and maintain backwards compatibility.
+      skipSelectorWrapper: true
     });
   }
   Object.entries(ELEMENTS).forEach(([name, selector]) => {
     if (tree.styles?.elements?.[name]) {
       nodes.push({
         styles: tree.styles?.elements?.[name],
-        selector
+        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]
       });
     }
   });
@@ -680,7 +687,8 @@ export const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGa
       fallbackGapValue,
       hasLayoutSupport,
       featureSelectors,
-      styleVariationSelectors
+      styleVariationSelectors,
+      skipSelectorWrapper
     }) => {
       // Process styles for block support features with custom feature level
       // CSS selectors set.
@@ -721,7 +729,8 @@ export const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGa
       // 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})`);
@@ -771,7 +780,12 @@ export const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGa
           // 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;
         });
       }
@@ -900,10 +914,16 @@ function updateConfigWithSeparator(config) {
 }
 export 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.
@@ -915,8 +935,27 @@ export function processCSSNesting(css, blockSelector) {
         return;
       }
       const [nestedSelector, cssValue] = splittedPart;
-      const combinedSelector = nestedSelector.startsWith(' ') ? scopeSelector(blockSelector, nestedSelector) : 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(' ') ? 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;
@@ -936,7 +975,6 @@ export function processCSSNesting(css, blockSelector) {
  */
 export function useGlobalStylesOutputWithConfig(mergedConfig = {}, disableRootPadding) {
   const [blockGap] = useGlobalSetting('spacing.blockGap');
-  mergedConfig = 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 = useSelect(select => {