@wordpress/block-editor 12.26.0 → 13.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, appendToSelector, getBlockStyleVariationSelector } from './utils';
+import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, ROOT_CSS_PROPERTIES_SELECTOR, scopeSelector, scopeFeatureSelectors, appendToSelector, getBlockStyleVariationSelector } from './utils';
 import { getBlockCSSSelector } from './get-block-css-selector';
 import { getTypographyFontSizeValue } from './typography-utils';
 import { GlobalStylesContext } from './context';
@@ -20,8 +20,8 @@ import { getGapCSSValue } from '../../hooks/gap';
 import { store as blockEditorStore } from '../../store';
 import { LAYOUT_DEFINITIONS } from '../../layouts/definitions';
 import { getValueFromObjectPath, setImmutably } from '../../utils/object';
-import BlockContext from '../block-context';
 import { unlock } from '../../lock-unlock';
+import { setThemeFileUris } from './theme-file-uri-utils';
 
 // List of block support features that can have their related styles
 // generated under their own feature level selector rather than the block's.
@@ -31,6 +31,9 @@ const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
   spacing: 'spacing',
   typography: 'typography'
 };
+const {
+  kebabCase
+} = unlock(componentsPrivateApis);
 function compileStyleValue(uncompiledValue) {
   const VARIABLE_REFERENCE_PREFIX = 'var:';
   const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
@@ -51,9 +54,6 @@ function compileStyleValue(uncompiledValue) {
  * @return {Array<Object>} An array of style declarations.
  */
 function getPresetsDeclarations(blockPresets = {}, mergedSettings) {
-  const {
-    kebabCase
-  } = unlock(componentsPrivateApis);
   return PRESET_METADATA.reduce((declarations, {
     path,
     valueKey,
@@ -84,9 +84,6 @@ function getPresetsDeclarations(blockPresets = {}, mergedSettings) {
  * @return {string} CSS declarations for the preset classes.
  */
 function getPresetsClasses(blockSelector = '*', blockPresets = {}) {
-  const {
-    kebabCase
-  } = unlock(componentsPrivateApis);
   return PRESET_METADATA.reduce((declarations, {
     path,
     cssVarInfix,
@@ -126,9 +123,6 @@ function getPresetsSvgFilters(blockPresets = {}) {
   });
 }
 function flattenTree(input = {}, prefix, token) {
-  const {
-    kebabCase
-  } = unlock(componentsPrivateApis);
   let result = [];
   Object.keys(input).forEach(key => {
     const newKey = prefix + kebabCase(key.replace('/', '-'));
@@ -241,13 +235,10 @@ const getFeatureDeclarations = (selectors, styles) => {
  *
  * @param {Object}  tree                A theme.json tree containing layout definitions.
  *
- * @param {boolean} isTemplate          Whether the entity being edited is a full template or a pattern.
+ * @param {boolean} disableRootPadding  Whether to force disable the root padding styles.
  * @return {Array} An array of style declarations.
  */
-export function getStylesDeclarations(blockStyles = {}, selector = '', useRootPaddingAlign, tree = {}, isTemplate = true) {
-  const {
-    kebabCase
-  } = unlock(componentsPrivateApis);
+export function getStylesDeclarations(blockStyles = {}, selector = '', useRootPaddingAlign, tree = {}, disableRootPadding = false) {
   const isRoot = ROOT_BLOCK_SELECTOR === selector;
   const output = Object.entries(STYLE_PROPERTY).reduce((declarations, [key, {
     value,
@@ -292,7 +283,7 @@ export function getStylesDeclarations(blockStyles = {}, selector = '', useRootPa
   const extraRules = getCSSRules(blockStyles);
   extraRules.forEach(rule => {
     // Don't output padding properties if padding variables are set or if we're not editing a full template.
-    if (isRoot && (useRootPaddingAlign || !isTemplate) && rule.key.startsWith('padding')) {
+    if (isRoot && (useRootPaddingAlign || disableRootPadding) && rule.key.startsWith('padding')) {
       return;
     }
     const cssProperty = rule.key.startsWith('--') ? rule.key : kebabCase(rule.key);
@@ -388,7 +379,7 @@ export function getLayoutStyles({
               // 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(.${className})${spacingStyle?.selector || ''}` : `:where(${selector}-${className})${spacingStyle?.selector || ''}`;
+              combinedSelector = selector === ROOT_BLOCK_SELECTOR ? `.${className}${spacingStyle?.selector || ''}` : `${selector}-${className}${spacingStyle?.selector || ''}`;
             }
             ruleset += `${combinedSelector} { ${declarations.join('; ')}; }`;
           }
@@ -471,12 +462,54 @@ export const getNodesWithStyles = (tree, blockSelectors) => {
     const blockStyles = pickStyleKeys(node);
     if (node?.variations) {
       const variations = {};
-      Object.keys(node.variations).forEach(variation => {
-        variations[variation] = pickStyleKeys(node.variations[variation]);
+      Object.entries(node.variations).forEach(([variationName, variation]) => {
+        var _variation$elements, _variation$blocks;
+        variations[variationName] = pickStyleKeys(variation);
+        const variationSelector = blockSelectors[blockName].styleVariationSelectors?.[variationName];
+
+        // Process the variation's inner element styles.
+        // This comes before the inner block styles so the
+        // element styles within the block type styles take
+        // precedence over these.
+        Object.entries((_variation$elements = variation?.elements) !== null && _variation$elements !== void 0 ? _variation$elements : {}).forEach(([element, elementStyles]) => {
+          if (elementStyles && ELEMENTS[element]) {
+            nodes.push({
+              styles: elementStyles,
+              selector: scopeSelector(variationSelector, ELEMENTS[element])
+            });
+          }
+        });
+
+        // Process the variations inner block type styles.
+        Object.entries((_variation$blocks = variation?.blocks) !== null && _variation$blocks !== void 0 ? _variation$blocks : {}).forEach(([variationBlockName, variationBlockStyles]) => {
+          var _variationBlockStyles;
+          const variationBlockSelector = scopeSelector(variationSelector, blockSelectors[variationBlockName].selector);
+          const variationDuotoneSelector = scopeSelector(variationSelector, blockSelectors[variationBlockName].duotoneSelector);
+          const variationFeatureSelectors = scopeFeatureSelectors(variationSelector, blockSelectors[variationBlockName].featureSelectors);
+          nodes.push({
+            selector: variationBlockSelector,
+            duotoneSelector: variationDuotoneSelector,
+            featureSelectors: variationFeatureSelectors,
+            fallbackGapValue: blockSelectors[variationBlockName].fallbackGapValue,
+            hasLayoutSupport: blockSelectors[variationBlockName].hasLayoutSupport,
+            styles: pickStyleKeys(variationBlockStyles)
+          });
+
+          // Process element styles for the inner blocks
+          // of the variation.
+          Object.entries((_variationBlockStyles = variationBlockStyles.elements) !== null && _variationBlockStyles !== void 0 ? _variationBlockStyles : {}).forEach(([variationBlockElement, variationBlockElementStyles]) => {
+            if (variationBlockElementStyles && ELEMENTS[variationBlockElement]) {
+              nodes.push({
+                styles: variationBlockElementStyles,
+                selector: scopeSelector(variationBlockSelector, ELEMENTS[variationBlockElement])
+              });
+            }
+          });
+        });
       });
       blockStyles.variations = variations;
     }
-    if (blockStyles && blockSelectors?.[blockName]?.selector) {
+    if (blockSelectors?.[blockName]?.selector) {
       nodes.push({
         duotoneSelector: blockSelectors[blockName].duotoneSelector,
         fallbackGapValue: blockSelectors[blockName].fallbackGapValue,
@@ -564,7 +597,7 @@ export const toCustomProperties = (tree, blockSelectors) => {
   });
   return ruleset;
 };
-export const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles = false, isTemplate = true, styleOptions = undefined) => {
+export const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles = false, disableRootPadding = false, styleOptions = undefined) => {
   // These allow opting out of certain sets of styles.
   const options = {
     blockGap: true,
@@ -601,19 +634,18 @@ export const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGa
      */
     ruleset += ':where(body) {margin: 0;';
 
-    // Root padding styles should only be output for full templates, not patterns or template parts.
-    if (options.rootPadding && useRootPaddingAlign && isTemplate) {
+    // Root padding styles should be output for full templates, patterns and template parts.
+    if (options.rootPadding && useRootPaddingAlign) {
       /*
        * These rules reproduce the ones from https://github.com/WordPress/gutenberg/blob/79103f124925d1f457f627e154f52a56228ed5ad/lib/class-wp-theme-json-gutenberg.php#L2508
        * almost exactly, but for the selectors that target block wrappers in the front end. This code only runs in the editor, so it doesn't need those selectors.
        */
       ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) }
 				.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
-				.has-global-padding :where(.has-global-padding:not(.wp-block-block)) { 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:not(.wp-block-block)) > .alignfull { margin-right: 0; margin-left: 0; }
-				.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;`;
+				.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) { padding-right: 0; padding-left: 0; }
+				.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) > .alignfull { margin-left: 0; margin-right: 0;
+				`;
     }
     ruleset += '}';
   }
@@ -634,31 +666,7 @@ export const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGa
         Object.entries(featureDeclarations).forEach(([cssSelector, declarations]) => {
           if (declarations.length) {
             const rules = declarations.join(';');
-            ruleset += `:where(${cssSelector}){${rules};}`;
-          }
-        });
-      }
-      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) {
-              const featureDeclarations = getFeatureDeclarations(featureSelectors, styleVariations);
-              Object.entries(featureDeclarations).forEach(([baseSelector, declarations]) => {
-                if (declarations.length) {
-                  const cssSelector = concatFeatureVariationSelectorString(baseSelector, styleVariationSelector);
-                  const rules = declarations.join(';');
-                  ruleset += `${cssSelector}{${rules};}`;
-                }
-              });
-            }
-
-            // Otherwise add regular selectors.
-            const styleVariationDeclarations = getStylesDeclarations(styleVariations, styleVariationSelector, useRootPaddingAlign, tree);
-            if (styleVariationDeclarations.length) {
-              ruleset += `${styleVariationSelector}{${styleVariationDeclarations.join(';')};}`;
-            }
+            ruleset += `:root :where(${cssSelector}){${rules};}`;
           }
         });
       }
@@ -688,9 +696,33 @@ export const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGa
       }
 
       // Process the remaining block styles (they use either normal block class or __experimentalSelector).
-      const declarations = getStylesDeclarations(styles, selector, useRootPaddingAlign, tree, isTemplate);
-      if (declarations?.length) {
-        ruleset += `:where(${selector}){${declarations.join(';')};}`;
+      const styleDeclarations = getStylesDeclarations(styles, selector, useRootPaddingAlign, tree, disableRootPadding);
+      if (styleDeclarations?.length) {
+        ruleset += `:root :where(${selector}){${styleDeclarations.join(';')};}`;
+      }
+      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) {
+              const featureDeclarations = getFeatureDeclarations(featureSelectors, styleVariations);
+              Object.entries(featureDeclarations).forEach(([baseSelector, declarations]) => {
+                if (declarations.length) {
+                  const cssSelector = concatFeatureVariationSelectorString(baseSelector, styleVariationSelector);
+                  const rules = declarations.join(';');
+                  ruleset += `:root :where(${cssSelector}){${rules};}`;
+                }
+              });
+            }
+
+            // Otherwise add regular selectors.
+            const styleVariationDeclarations = getStylesDeclarations(styleVariations, styleVariationSelector, useRootPaddingAlign, tree);
+            if (styleVariationDeclarations.length) {
+              ruleset += `:root :where(${styleVariationSelector}){${styleVariationDeclarations.join(';')};}`;
+            }
+          }
+        });
       }
 
       // Check for pseudo selector in `styles` and handle separately.
@@ -702,7 +734,7 @@ export const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGa
             return;
           }
 
-          // `selector` maybe provided in a form
+          // `selector` may be provided in a form
           // where block level selectors have sub element
           // selectors appended to them as a comma separated
           // string.
@@ -725,9 +757,9 @@ export const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGa
   if (options.blockGap && hasBlockGapSupport) {
     // Use fallback of `0.5em` just in case, however if there is blockGap support, there should nearly always be a real value.
     const gapValue = getGapCSSValue(tree?.styles?.spacing?.blockGap) || '0.5em';
-    ruleset = ruleset + `:where(.wp-site-blocks) > * { margin-block-start: ${gapValue}; margin-block-end: 0; }`;
-    ruleset = ruleset + ':where(.wp-site-blocks) > :first-child { margin-block-start: 0; }';
-    ruleset = ruleset + ':where(.wp-site-blocks) > :last-child { margin-block-end: 0; }';
+    ruleset = ruleset + `:root :where(.wp-site-blocks) > * { margin-block-start: ${gapValue}; margin-block-end: 0; }`;
+    ruleset = ruleset + ':root :where(.wp-site-blocks) > :first-child { margin-block-start: 0; }';
+    ruleset = ruleset + ':root :where(.wp-site-blocks) > :last-child { margin-block-end: 0; }';
   }
   if (options.presets) {
     nodesWithSettings.forEach(({
@@ -769,7 +801,7 @@ const getSelectorsConfig = (blockType, rootSelector) => {
   });
   return config;
 };
-export const getBlockSelectors = (blockTypes, getBlockStyles) => {
+export const getBlockSelectors = (blockTypes, getBlockStyles, variationInstanceId) => {
   const result = {};
   blockTypes.forEach(blockType => {
     const name = blockType.name;
@@ -786,12 +818,13 @@ export const getBlockSelectors = (blockTypes, getBlockStyles) => {
     const fallbackGapValue = blockType?.supports?.spacing?.blockGap?.__experimentalDefault;
     const blockStyleVariations = getBlockStyles(name);
     const styleVariationSelectors = {};
-    if (blockStyleVariations?.length) {
-      blockStyleVariations.forEach(variation => {
-        const styleVariationSelector = getBlockStyleVariationSelector(variation.name, selector);
-        styleVariationSelectors[variation.name] = styleVariationSelector;
-      });
-    }
+    blockStyleVariations?.forEach(variation => {
+      const variationSuffix = variationInstanceId ? `-${variationInstanceId}` : '';
+      const variationName = `${variation.name}${variationSuffix}`;
+      const styleVariationSelector = getBlockStyleVariationSelector(variationName, selector);
+      styleVariationSelectors[variationName] = styleVariationSelector;
+    });
+
     // For each block support feature add any custom selectors.
     const featureSelectors = getSelectorsConfig(blockType, selector);
     result[name] = {
@@ -801,7 +834,7 @@ export const getBlockSelectors = (blockTypes, getBlockStyles) => {
       hasLayoutSupport,
       name,
       selector,
-      styleVariationSelectors: Object.keys(styleVariationSelectors).length ? styleVariationSelectors : undefined
+      styleVariationSelectors: blockStyleVariations?.length ? styleVariationSelectors : undefined
     };
   });
   return result;
@@ -845,7 +878,7 @@ export function processCSSNesting(css, blockSelector) {
     const isRootCss = !part.includes('{');
     if (isRootCss) {
       // If the part doesn't contain braces, it applies to the root level.
-      processedCSS += `${blockSelector}{${part.trim()}}`;
+      processedCSS += `:root :where(${blockSelector}){${part.trim()}}`;
     } else {
       // If the part contains braces, it's a nested CSS rule.
       const splittedPart = part.replace('}', '').split('{');
@@ -854,7 +887,7 @@ export function processCSSNesting(css, blockSelector) {
       }
       const [nestedSelector, cssValue] = splittedPart;
       const combinedSelector = nestedSelector.startsWith(' ') ? scopeSelector(blockSelector, nestedSelector) : appendToSelector(blockSelector, nestedSelector);
-      processedCSS += `${combinedSelector}{${cssValue.trim()}}`;
+      processedCSS += `:root :where(${combinedSelector}){${cssValue.trim()}}`;
     }
   });
   return processedCSS;
@@ -867,11 +900,14 @@ export function processCSSNesting(css, blockSelector) {
  * The use case for a custom config is to generate bespoke styles
  * and settings for previews, or other out-of-editor experiences.
  *
- * @param {Object} mergedConfig Global styles configuration.
+ * @param {Object}  mergedConfig       Global styles configuration.
+ * @param {boolean} disableRootPadding Disable root padding styles.
+ *
  * @return {Array} Array of stylesheets and settings.
  */
-export function useGlobalStylesOutputWithConfig(mergedConfig = {}) {
+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 => {
@@ -880,8 +916,6 @@ export function useGlobalStylesOutputWithConfig(mergedConfig = {}) {
     } = select(blockEditorStore);
     return !!getSettings().disableLayoutStyles;
   });
-  const blockContext = useContext(BlockContext);
-  const isTemplate = blockContext?.templateSlug !== undefined;
   const {
     getBlockStyles
   } = useSelect(blocksStore);
@@ -893,7 +927,7 @@ export function useGlobalStylesOutputWithConfig(mergedConfig = {}) {
     const updatedConfig = updateConfigWithSeparator(mergedConfig);
     const blockSelectors = getBlockSelectors(getBlockTypes(), getBlockStyles);
     const customProperties = toCustomProperties(updatedConfig, blockSelectors);
-    const globalStyles = toStyles(updatedConfig, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles, isTemplate);
+    const globalStyles = toStyles(updatedConfig, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles, disableRootPadding);
     const svgs = toSvgFilters(updatedConfig, blockSelectors);
     const styles = [{
       css: customProperties,
@@ -925,18 +959,20 @@ export function useGlobalStylesOutputWithConfig(mergedConfig = {}) {
       }
     });
     return [styles, updatedConfig.settings];
-  }, [hasBlockGapSupport, hasFallbackGapSupport, mergedConfig, disableLayoutStyles, isTemplate, getBlockStyles]);
+  }, [hasBlockGapSupport, hasFallbackGapSupport, mergedConfig, disableLayoutStyles, disableRootPadding, getBlockStyles]);
 }
 
 /**
  * Returns the global styles output based on the current state of global styles config loaded in the editor context.
  *
+ * @param {boolean} disableRootPadding Disable root padding styles.
+ *
  * @return {Array} Array of stylesheets and settings.
  */
-export function useGlobalStylesOutput() {
+export function useGlobalStylesOutput(disableRootPadding = false) {
   const {
     merged: mergedConfig
   } = useContext(GlobalStylesContext);
-  return useGlobalStylesOutputWithConfig(mergedConfig);
+  return useGlobalStylesOutputWithConfig(mergedConfig, disableRootPadding);
 }
 //# sourceMappingURL=use-global-styles-output.js.map