@wordpress/global-styles-engine 1.11.0 → 1.12.0

package/build/settings/get-setting.cjs

@@ -58,6 +58,7 @@ var VALID_SETTINGS = [
   "dimensions.aspectRatio",
   "dimensions.height",
   "dimensions.minHeight",
+  "dimensions.minWidth",
   "dimensions.width",
   "dimensions.dimensionSizes",
   "layout.contentSize",

package/build/settings/get-setting.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/settings/get-setting.ts"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { getValueFromObjectPath, setImmutably } from '../utils/object';\nimport type { GlobalStylesConfig } from '../types';\n\nconst VALID_SETTINGS = [\n\t'appearanceTools',\n\t'useRootPaddingAwareAlignments',\n\t'background.backgroundImage',\n\t'background.backgroundRepeat',\n\t'background.backgroundSize',\n\t'background.backgroundPosition',\n\t'background.gradient',\n\t'border.color',\n\t'border.radius',\n\t'border.radiusSizes',\n\t'border.style',\n\t'border.width',\n\t'shadow.presets',\n\t'shadow.defaultPresets',\n\t'color.background',\n\t'color.button',\n\t'color.caption',\n\t'color.custom',\n\t'color.customDuotone',\n\t'color.customGradient',\n\t'color.defaultDuotone',\n\t'color.defaultGradients',\n\t'color.defaultPalette',\n\t'color.duotone',\n\t'color.gradients',\n\t'color.heading',\n\t'color.link',\n\t'color.palette',\n\t'color.text',\n\t'custom',\n\t'dimensions.aspectRatio',\n\t'dimensions.height',\n\t'dimensions.minHeight',\n\t'dimensions.width',\n\t'dimensions.dimensionSizes',\n\t'layout.contentSize',\n\t'layout.definitions',\n\t'layout.wideSize',\n\t'lightbox.enabled',\n\t'lightbox.allowEditing',\n\t'position.fixed',\n\t'position.sticky',\n\t'spacing.customSpacingSize',\n\t'spacing.defaultSpacingSizes',\n\t'spacing.spacingSizes',\n\t'spacing.spacingScale',\n\t'spacing.blockGap',\n\t'spacing.margin',\n\t'spacing.padding',\n\t'spacing.units',\n\t'typography.fluid',\n\t'typography.customFontSize',\n\t'typography.defaultFontSizes',\n\t'typography.dropCap',\n\t'typography.fontFamilies',\n\t'typography.fontSizes',\n\t'typography.fontStyle',\n\t'typography.fontWeight',\n\t'typography.letterSpacing',\n\t'typography.lineHeight',\n\t'typography.textAlign',\n\t'typography.textColumns',\n\t'typography.textDecoration',\n\t'typography.textIndent',\n\t'typography.textTransform',\n\t'typography.writingMode',\n];\n\nexport function getSetting< T = any >(\n\tglobalStyles: GlobalStylesConfig,\n\tpath: string,\n\tblockName?: string\n): T {\n\tconst appendedBlockPath = blockName ? '.blocks.' + blockName : '';\n\tconst appendedPropertyPath = path ? '.' + path : '';\n\tconst contextualPath = `settings${ appendedBlockPath }${ appendedPropertyPath }`;\n\tconst globalPath = `settings${ appendedPropertyPath }`;\n\n\tif ( path ) {\n\t\treturn ( getValueFromObjectPath( globalStyles, contextualPath ) ??\n\t\t\tgetValueFromObjectPath( globalStyles, globalPath ) ) as T;\n\t}\n\n\tlet result = {};\n\tVALID_SETTINGS.forEach( ( setting ) => {\n\t\tconst value =\n\t\t\tgetValueFromObjectPath(\n\t\t\t\tglobalStyles,\n\t\t\t\t`settings${ appendedBlockPath }.${ setting }`\n\t\t\t) ??\n\t\t\tgetValueFromObjectPath( globalStyles, `settings.${ setting }` );\n\t\tif ( value !== undefined ) {\n\t\t\tresult = setImmutably( result, setting.split( '.' ), value );\n\t\t}\n\t} );\n\treturn result as T;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAAqD;AAGrD,IAAM,iBAAiB;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;AAEO,SAAS,WACf,cACA,MACA,WACI;AACJ,QAAM,oBAAoB,YAAY,aAAa,YAAY;AAC/D,QAAM,uBAAuB,OAAO,MAAM,OAAO;AACjD,QAAM,iBAAiB,WAAY,iBAAkB,GAAI,oBAAqB;AAC9E,QAAM,aAAa,WAAY,oBAAqB;AAEpD,MAAK,MAAO;AACX,eAAS,sCAAwB,cAAc,cAAe,SAC7D,sCAAwB,cAAc,UAAW;AAAA,EACnD;AAEA,MAAI,SAAS,CAAC;AACd,iBAAe,QAAS,CAAE,YAAa;AACtC,UAAM,YACL;AAAA,MACC;AAAA,MACA,WAAY,iBAAkB,IAAK,OAAQ;AAAA,IAC5C,SACA,sCAAwB,cAAc,YAAa,OAAQ,EAAG;AAC/D,QAAK,UAAU,QAAY;AAC1B,mBAAS,4BAAc,QAAQ,QAAQ,MAAO,GAAI,GAAG,KAAM;AAAA,IAC5D;AAAA,EACD,CAAE;AACF,SAAO;AACR;",
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { getValueFromObjectPath, setImmutably } from '../utils/object';\nimport type { GlobalStylesConfig } from '../types';\n\nconst VALID_SETTINGS = [\n\t'appearanceTools',\n\t'useRootPaddingAwareAlignments',\n\t'background.backgroundImage',\n\t'background.backgroundRepeat',\n\t'background.backgroundSize',\n\t'background.backgroundPosition',\n\t'background.gradient',\n\t'border.color',\n\t'border.radius',\n\t'border.radiusSizes',\n\t'border.style',\n\t'border.width',\n\t'shadow.presets',\n\t'shadow.defaultPresets',\n\t'color.background',\n\t'color.button',\n\t'color.caption',\n\t'color.custom',\n\t'color.customDuotone',\n\t'color.customGradient',\n\t'color.defaultDuotone',\n\t'color.defaultGradients',\n\t'color.defaultPalette',\n\t'color.duotone',\n\t'color.gradients',\n\t'color.heading',\n\t'color.link',\n\t'color.palette',\n\t'color.text',\n\t'custom',\n\t'dimensions.aspectRatio',\n\t'dimensions.height',\n\t'dimensions.minHeight',\n\t'dimensions.minWidth',\n\t'dimensions.width',\n\t'dimensions.dimensionSizes',\n\t'layout.contentSize',\n\t'layout.definitions',\n\t'layout.wideSize',\n\t'lightbox.enabled',\n\t'lightbox.allowEditing',\n\t'position.fixed',\n\t'position.sticky',\n\t'spacing.customSpacingSize',\n\t'spacing.defaultSpacingSizes',\n\t'spacing.spacingSizes',\n\t'spacing.spacingScale',\n\t'spacing.blockGap',\n\t'spacing.margin',\n\t'spacing.padding',\n\t'spacing.units',\n\t'typography.fluid',\n\t'typography.customFontSize',\n\t'typography.defaultFontSizes',\n\t'typography.dropCap',\n\t'typography.fontFamilies',\n\t'typography.fontSizes',\n\t'typography.fontStyle',\n\t'typography.fontWeight',\n\t'typography.letterSpacing',\n\t'typography.lineHeight',\n\t'typography.textAlign',\n\t'typography.textColumns',\n\t'typography.textDecoration',\n\t'typography.textIndent',\n\t'typography.textTransform',\n\t'typography.writingMode',\n];\n\nexport function getSetting< T = any >(\n\tglobalStyles: GlobalStylesConfig,\n\tpath: string,\n\tblockName?: string\n): T {\n\tconst appendedBlockPath = blockName ? '.blocks.' + blockName : '';\n\tconst appendedPropertyPath = path ? '.' + path : '';\n\tconst contextualPath = `settings${ appendedBlockPath }${ appendedPropertyPath }`;\n\tconst globalPath = `settings${ appendedPropertyPath }`;\n\n\tif ( path ) {\n\t\treturn ( getValueFromObjectPath( globalStyles, contextualPath ) ??\n\t\t\tgetValueFromObjectPath( globalStyles, globalPath ) ) as T;\n\t}\n\n\tlet result = {};\n\tVALID_SETTINGS.forEach( ( setting ) => {\n\t\tconst value =\n\t\t\tgetValueFromObjectPath(\n\t\t\t\tglobalStyles,\n\t\t\t\t`settings${ appendedBlockPath }.${ setting }`\n\t\t\t) ??\n\t\t\tgetValueFromObjectPath( globalStyles, `settings.${ setting }` );\n\t\tif ( value !== undefined ) {\n\t\t\tresult = setImmutably( result, setting.split( '.' ), value );\n\t\t}\n\t} );\n\treturn result as T;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAAqD;AAGrD,IAAM,iBAAiB;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;AAEO,SAAS,WACf,cACA,MACA,WACI;AACJ,QAAM,oBAAoB,YAAY,aAAa,YAAY;AAC/D,QAAM,uBAAuB,OAAO,MAAM,OAAO;AACjD,QAAM,iBAAiB,WAAY,iBAAkB,GAAI,oBAAqB;AAC9E,QAAM,aAAa,WAAY,oBAAqB;AAEpD,MAAK,MAAO;AACX,eAAS,sCAAwB,cAAc,cAAe,SAC7D,sCAAwB,cAAc,UAAW;AAAA,EACnD;AAEA,MAAI,SAAS,CAAC;AACd,iBAAe,QAAS,CAAE,YAAa;AACtC,UAAM,YACL;AAAA,MACC;AAAA,MACA,WAAY,iBAAkB,IAAK,OAAQ;AAAA,IAC5C,SACA,sCAAwB,cAAc,YAAa,OAAQ,EAAG;AAC/D,QAAK,UAAU,QAAY;AAC1B,mBAAS,4BAAc,QAAQ,QAAQ,MAAO,GAAI,GAAG,KAAM;AAAA,IAC5D;AAAA,EACD,CAAE;AACF,SAAO;AACR;",
   "names": []
 }

package/build-module/core/render.mjs

@@ -38,6 +38,10 @@ var BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
   spacing: "spacing",
   typography: "typography"
 };
+var VALID_BLOCK_PSEUDO_SELECTORS = {
+  "core/button": [":hover", ":focus", ":focus-visible", ":active"],
+  "core/navigation-link": [":hover", ":focus", ":focus-visible", ":active"]
+};
 function getPresetsClasses(blockSelector = "*", blockPresets = {}) {
   return PRESET_METADATA.reduce(
     (declarations, { path, cssVarInfix, classes }) => {
@@ -410,12 +414,16 @@ var STYLE_KEYS = [
   "background"
 ];
 function pickStyleKeys(treeToPickFrom) {
+  return pickStyleAndPseudoKeys(treeToPickFrom);
+}
+function pickStyleAndPseudoKeys(treeToPickFrom, blockName) {
   if (!treeToPickFrom) {
     return {};
   }
   const entries = Object.entries(treeToPickFrom);
+  const allowedPseudoSelectors = blockName ? VALID_BLOCK_PSEUDO_SELECTORS[blockName] ?? [] : [];
   const pickedEntries = entries.filter(
-    ([key]) => STYLE_KEYS.includes(key)
+    ([key]) => STYLE_KEYS.includes(key) || allowedPseudoSelectors.includes(key)
   );
   const clonedEntries = pickedEntries.map(([key, style]) => [
     key,
@@ -423,6 +431,66 @@ function pickStyleKeys(treeToPickFrom) {
   ]);
   return Object.fromEntries(clonedEntries);
 }
+function appendPseudoSelectorStyles(styles, selector, ruleset, featureSelectors, treeSettings, blockName, styleVariationSelector) {
+  const pseudoSelectorStyles = Object.entries(styles).filter(
+    ([key]) => key.startsWith(":")
+  );
+  if (!pseudoSelectorStyles.length) {
+    return ruleset;
+  }
+  pseudoSelectorStyles.forEach(([pseudoKey, pseudoStyle]) => {
+    if (!pseudoStyle || typeof pseudoStyle !== "object") {
+      return;
+    }
+    const remainingPseudoStyles = JSON.parse(
+      JSON.stringify(pseudoStyle)
+    );
+    if (featureSelectors && typeof featureSelectors !== "string") {
+      let pseudoFeatureDeclarations = getFeatureDeclarations(
+        featureSelectors,
+        remainingPseudoStyles
+      );
+      pseudoFeatureDeclarations = updateParagraphTextIndentSelector(
+        pseudoFeatureDeclarations,
+        treeSettings,
+        blockName
+      );
+      pseudoFeatureDeclarations = updateButtonWidthDeclarations(
+        pseudoFeatureDeclarations,
+        treeSettings
+      );
+      Object.entries(pseudoFeatureDeclarations).forEach(
+        ([baseSelector, declarations]) => {
+          if (!declarations.length) {
+            return;
+          }
+          const pseudoFeatureSelector = appendToSelector(
+            baseSelector,
+            pseudoKey
+          );
+          const cssSelector = styleVariationSelector ? concatFeatureVariationSelectorString(
+            pseudoFeatureSelector,
+            styleVariationSelector
+          ) : pseudoFeatureSelector;
+          const rules = declarations.join(";");
+          ruleset += `:root :where(${cssSelector}){${rules};}`;
+        }
+      );
+    }
+    const pseudoDeclarations = getStylesDeclarations(
+      remainingPseudoStyles
+    );
+    if (!pseudoDeclarations.length) {
+      return;
+    }
+    const pseudoSelector = appendToSelector(selector, pseudoKey);
+    const pseudoRule = `:root :where(${pseudoSelector}){${pseudoDeclarations.join(
+      ";"
+    )};}`;
+    ruleset += pseudoRule;
+  });
+  return ruleset;
+}
 var getNodesWithStyles = (tree, blockSelectors) => {
   const nodes = [];
   if (!tree?.styles) {
@@ -451,7 +519,7 @@ var getNodesWithStyles = (tree, blockSelectors) => {
   });
   Object.entries(tree.styles?.blocks ?? {}).forEach(
     ([blockName, node]) => {
-      const blockStyles = pickStyleKeys(node);
+      const blockStyles = pickStyleAndPseudoKeys(node, blockName);
       const typedNode = node;
       const variationNodesToAdd = [];
       if (typedNode?.variations) {
@@ -459,7 +527,10 @@ var getNodesWithStyles = (tree, blockSelectors) => {
         Object.entries(typedNode.variations).forEach(
           ([variationName, variation]) => {
             const typedVariation = variation;
-            variations[variationName] = pickStyleKeys(typedVariation);
+            variations[variationName] = pickStyleAndPseudoKeys(
+              typedVariation,
+              blockName
+            );
             if (typedVariation?.css) {
               variations[variationName].css = typedVariation.css;
             }
@@ -494,7 +565,10 @@ var getNodesWithStyles = (tree, blockSelectors) => {
                   variationSelector,
                   blockSelectors[variationBlockName]?.featureSelectors ?? {}
                 ) : void 0;
-                const variationBlockStyleNodes = pickStyleKeys(variationBlockStyles);
+                const variationBlockStyleNodes = pickStyleAndPseudoKeys(
+                  variationBlockStyles,
+                  variationBlockName
+                );
                 if (variationBlockStyles?.css) {
                   variationBlockStyleNodes.css = variationBlockStyles.css;
                 }
@@ -856,6 +930,15 @@ var transformToStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGa
                     `:root :where(${styleVariationSelector})`
                   );
                 }
+                ruleset = appendPseudoSelectorStyles(
+                  styleVariations,
+                  styleVariationSelector,
+                  ruleset,
+                  featureSelectors,
+                  tree.settings,
+                  name,
+                  styleVariationSelector
+                );
                 if (hasLayoutSupport && styleVariations?.spacing?.blockGap) {
                   const variationSelectorWithBlock = styleVariationSelector + selector;
                   ruleset += getLayoutStyles({
@@ -870,24 +953,14 @@ var transformToStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGa
             }
           );
         }
-        const pseudoSelectorStyles = Object.entries(styles).filter(
-          ([key]) => key.startsWith(":")
+        ruleset = appendPseudoSelectorStyles(
+          styles,
+          selector,
+          ruleset,
+          featureSelectors,
+          tree.settings,
+          name
         );
-        if (pseudoSelectorStyles?.length) {
-          pseudoSelectorStyles.forEach(
-            ([pseudoKey, pseudoStyle]) => {
-              const pseudoDeclarations = getStylesDeclarations(pseudoStyle);
-              if (!pseudoDeclarations?.length) {
-                return;
-              }
-              const _selector = selector.split(",").map((sel) => sel + pseudoKey).join(",");
-              const pseudoRule = `:root :where(${_selector}){${pseudoDeclarations.join(
-                ";"
-              )};}`;
-              ruleset += pseudoRule;
-            }
-          );
-        }
       }
     );
   }