@wordpress/block-editor 12.26.0 → 13.0.0

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

@@ -1,6 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -28,8 +27,8 @@ var _gap = require("../../hooks/gap");
 var _store = require("../../store");
 var _definitions = require("../../layouts/definitions");
 var _object = require("../../utils/object");
-var _blockContext = _interopRequireDefault(require("../block-context"));
 var _lockUnlock = require("../../lock-unlock");
+var _themeFileUriUtils = require("./theme-file-uri-utils");
 /**
  * WordPress dependencies
  */
@@ -46,6 +45,9 @@ const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
   spacing: 'spacing',
   typography: 'typography'
 };
+const {
+  kebabCase
+} = (0, _lockUnlock.unlock)(_components.privateApis);
 function compileStyleValue(uncompiledValue) {
   const VARIABLE_REFERENCE_PREFIX = 'var:';
   const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
@@ -66,9 +68,6 @@ function compileStyleValue(uncompiledValue) {
  * @return {Array<Object>} An array of style declarations.
  */
 function getPresetsDeclarations(blockPresets = {}, mergedSettings) {
-  const {
-    kebabCase
-  } = (0, _lockUnlock.unlock)(_components.privateApis);
   return _utils.PRESET_METADATA.reduce((declarations, {
     path,
     valueKey,
@@ -99,9 +98,6 @@ function getPresetsDeclarations(blockPresets = {}, mergedSettings) {
  * @return {string} CSS declarations for the preset classes.
  */
 function getPresetsClasses(blockSelector = '*', blockPresets = {}) {
-  const {
-    kebabCase
-  } = (0, _lockUnlock.unlock)(_components.privateApis);
   return _utils.PRESET_METADATA.reduce((declarations, {
     path,
     cssVarInfix,
@@ -141,9 +137,6 @@ function getPresetsSvgFilters(blockPresets = {}) {
   });
 }
 function flattenTree(input = {}, prefix, token) {
-  const {
-    kebabCase
-  } = (0, _lockUnlock.unlock)(_components.privateApis);
   let result = [];
   Object.keys(input).forEach(key => {
     const newKey = prefix + kebabCase(key.replace('/', '-'));
@@ -256,13 +249,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.
  */
-function getStylesDeclarations(blockStyles = {}, selector = '', useRootPaddingAlign, tree = {}, isTemplate = true) {
-  const {
-    kebabCase
-  } = (0, _lockUnlock.unlock)(_components.privateApis);
+function getStylesDeclarations(blockStyles = {}, selector = '', useRootPaddingAlign, tree = {}, disableRootPadding = false) {
   const isRoot = _utils.ROOT_BLOCK_SELECTOR === selector;
   const output = Object.entries(_blocks.__EXPERIMENTAL_STYLE_PROPERTY).reduce((declarations, [key, {
     value,
@@ -307,7 +297,7 @@ function getStylesDeclarations(blockStyles = {}, selector = '', useRootPaddingAl
   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.
-    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);
@@ -403,7 +393,7 @@ function getLayoutStyles({
               // For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles.
               combinedSelector = selector === _utils.ROOT_BLOCK_SELECTOR ? `:where(.${className}${spacingStyle?.selector || ''})` : `:where(${selector}.${className}${spacingStyle?.selector || ''})`;
             } else {
-              combinedSelector = selector === _utils.ROOT_BLOCK_SELECTOR ? `:where(.${className})${spacingStyle?.selector || ''}` : `:where(${selector}-${className})${spacingStyle?.selector || ''}`;
+              combinedSelector = selector === _utils.ROOT_BLOCK_SELECTOR ? `.${className}${spacingStyle?.selector || ''}` : `${selector}-${className}${spacingStyle?.selector || ''}`;
             }
             ruleset += `${combinedSelector} { ${declarations.join('; ')}; }`;
           }
@@ -486,12 +476,54 @@ 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 && _blocks.__EXPERIMENTAL_ELEMENTS[element]) {
+            nodes.push({
+              styles: elementStyles,
+              selector: (0, _utils.scopeSelector)(variationSelector, _blocks.__EXPERIMENTAL_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 = (0, _utils.scopeSelector)(variationSelector, blockSelectors[variationBlockName].selector);
+          const variationDuotoneSelector = (0, _utils.scopeSelector)(variationSelector, blockSelectors[variationBlockName].duotoneSelector);
+          const variationFeatureSelectors = (0, _utils.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 && _blocks.__EXPERIMENTAL_ELEMENTS[variationBlockElement]) {
+              nodes.push({
+                styles: variationBlockElementStyles,
+                selector: (0, _utils.scopeSelector)(variationBlockSelector, _blocks.__EXPERIMENTAL_ELEMENTS[variationBlockElement])
+              });
+            }
+          });
+        });
       });
       blockStyles.variations = variations;
     }
-    if (blockStyles && blockSelectors?.[blockName]?.selector) {
+    if (blockSelectors?.[blockName]?.selector) {
       nodes.push({
         duotoneSelector: blockSelectors[blockName].duotoneSelector,
         fallbackGapValue: blockSelectors[blockName].fallbackGapValue,
@@ -582,7 +614,7 @@ const toCustomProperties = (tree, blockSelectors) => {
   return ruleset;
 };
 exports.toCustomProperties = toCustomProperties;
-const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles = false, isTemplate = true, styleOptions = undefined) => {
+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,
@@ -619,19 +651,18 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSuppor
      */
     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 += '}';
   }
@@ -652,31 +683,7 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSuppor
         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};}`;
           }
         });
       }
@@ -706,9 +713,33 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSuppor
       }
 
       // 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.
@@ -720,7 +751,7 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSuppor
             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.
@@ -743,9 +774,9 @@ const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSuppor
   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 = (0, _gap.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(({
@@ -788,7 +819,7 @@ const getSelectorsConfig = (blockType, rootSelector) => {
   });
   return config;
 };
-const getBlockSelectors = (blockTypes, getBlockStyles) => {
+const getBlockSelectors = (blockTypes, getBlockStyles, variationInstanceId) => {
   const result = {};
   blockTypes.forEach(blockType => {
     const name = blockType.name;
@@ -805,12 +836,13 @@ 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 = (0, _utils.getBlockStyleVariationSelector)(variation.name, selector);
-        styleVariationSelectors[variation.name] = styleVariationSelector;
-      });
-    }
+    blockStyleVariations?.forEach(variation => {
+      const variationSuffix = variationInstanceId ? `-${variationInstanceId}` : '';
+      const variationName = `${variation.name}${variationSuffix}`;
+      const styleVariationSelector = (0, _utils.getBlockStyleVariationSelector)(variationName, selector);
+      styleVariationSelectors[variationName] = styleVariationSelector;
+    });
+
     // For each block support feature add any custom selectors.
     const featureSelectors = getSelectorsConfig(blockType, selector);
     result[name] = {
@@ -820,7 +852,7 @@ const getBlockSelectors = (blockTypes, getBlockStyles) => {
       hasLayoutSupport,
       name,
       selector,
-      styleVariationSelectors: Object.keys(styleVariationSelectors).length ? styleVariationSelectors : undefined
+      styleVariationSelectors: blockStyleVariations?.length ? styleVariationSelectors : undefined
     };
   });
   return result;
@@ -865,7 +897,7 @@ 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('{');
@@ -874,7 +906,7 @@ function processCSSNesting(css, blockSelector) {
       }
       const [nestedSelector, cssValue] = splittedPart;
       const combinedSelector = nestedSelector.startsWith(' ') ? (0, _utils.scopeSelector)(blockSelector, nestedSelector) : (0, _utils.appendToSelector)(blockSelector, nestedSelector);
-      processedCSS += `${combinedSelector}{${cssValue.trim()}}`;
+      processedCSS += `:root :where(${combinedSelector}){${cssValue.trim()}}`;
     }
   });
   return processedCSS;
@@ -887,11 +919,14 @@ 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.
  */
-function useGlobalStylesOutputWithConfig(mergedConfig = {}) {
+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 => {
@@ -900,8 +935,6 @@ function useGlobalStylesOutputWithConfig(mergedConfig = {}) {
     } = select(_store.store);
     return !!getSettings().disableLayoutStyles;
   });
-  const blockContext = (0, _element.useContext)(_blockContext.default);
-  const isTemplate = blockContext?.templateSlug !== undefined;
   const {
     getBlockStyles
   } = (0, _data.useSelect)(_blocks.store);
@@ -913,7 +946,7 @@ function useGlobalStylesOutputWithConfig(mergedConfig = {}) {
     const updatedConfig = updateConfigWithSeparator(mergedConfig);
     const blockSelectors = getBlockSelectors((0, _blocks.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,
@@ -945,18 +978,20 @@ 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.
  */
-function useGlobalStylesOutput() {
+function useGlobalStylesOutput(disableRootPadding = false) {
   const {
     merged: mergedConfig
   } = (0, _element.useContext)(_context.GlobalStylesContext);
-  return useGlobalStylesOutputWithConfig(mergedConfig);
+  return useGlobalStylesOutputWithConfig(mergedConfig, disableRootPadding);
 }
 //# sourceMappingURL=use-global-styles-output.js.map