@wordpress/global-styles-engine 1.15.2-next.v.202606191442.0 → 1.16.0

package/build/settings/get-style.cjs

@@ -25,13 +25,29 @@ __export(get_style_exports, {
 module.exports = __toCommonJS(get_style_exports);
 var import_object = require("../utils/object.cjs");
 var import_common = require("../utils/common.cjs");
+var import_style_state_back_compat = require("../style-state-back-compat.cjs");
 function getStyle(globalStyles, path, blockName, shouldDecodeEncode = true) {
   const appendedPath = path ? "." + path : "";
   const finalPath = !blockName ? `styles${appendedPath}` : `styles.blocks.${blockName}${appendedPath}`;
   if (!globalStyles) {
     return void 0;
   }
-  const rawResult = (0, import_object.getValueFromObjectPath)(globalStyles, finalPath);
+  let rawResult = (0, import_object.getValueFromObjectPath)(globalStyles, finalPath);
+  const legacyPath = (0, import_style_state_back_compat.getLegacyStyleStatePath)(finalPath);
+  if (rawResult === void 0 && legacyPath) {
+    let hasCanonicalPath = true;
+    let currentValue = globalStyles;
+    for (const pathPart of finalPath.split(".")) {
+      if (!currentValue || typeof currentValue !== "object" || !Object.hasOwn(currentValue, pathPart)) {
+        hasCanonicalPath = false;
+        break;
+      }
+      currentValue = currentValue[pathPart];
+    }
+    if (!hasCanonicalPath) {
+      rawResult = (0, import_object.getValueFromObjectPath)(globalStyles, legacyPath);
+    }
+  }
   const result = shouldDecodeEncode ? (0, import_common.getValueFromVariable)(globalStyles, blockName, rawResult) : rawResult;
   return result;
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/settings/get-style.ts"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { getValueFromObjectPath } from '../utils/object';\nimport { getValueFromVariable } from '../utils/common';\nimport type { GlobalStylesConfig, UnresolvedValue } from '../types';\n\nexport function getStyle< T = any >(\n\tglobalStyles?: GlobalStylesConfig,\n\tpath?: string,\n\tblockName?: string,\n\tshouldDecodeEncode = true\n): T | undefined {\n\tconst appendedPath = path ? '.' + path : '';\n\tconst finalPath = ! blockName\n\t\t? `styles${ appendedPath }`\n\t\t: `styles.blocks.${ blockName }${ appendedPath }`;\n\tif ( ! globalStyles ) {\n\t\treturn undefined;\n\t}\n\n\tconst rawResult = getValueFromObjectPath( globalStyles, finalPath ) as\n\t\t| string\n\t\t| UnresolvedValue;\n\tconst result = shouldDecodeEncode\n\t\t? getValueFromVariable( globalStyles, blockName, rawResult )\n\t\t: rawResult;\n\treturn result as T | undefined;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAAuC;AACvC,oBAAqC;AAG9B,SAAS,SACf,cACA,MACA,WACA,qBAAqB,MACL;AAChB,QAAM,eAAe,OAAO,MAAM,OAAO;AACzC,QAAM,YAAY,CAAE,YACjB,SAAU,YAAa,KACvB,iBAAkB,SAAU,GAAI,YAAa;AAChD,MAAK,CAAE,cAAe;AACrB,WAAO;AAAA,EACR;AAEA,QAAM,gBAAY,sCAAwB,cAAc,SAAU;AAGlE,QAAM,SAAS,yBACZ,oCAAsB,cAAc,WAAW,SAAU,IACzD;AACH,SAAO;AACR;",
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { getValueFromObjectPath } from '../utils/object';\nimport { getValueFromVariable } from '../utils/common';\nimport type { GlobalStylesConfig, UnresolvedValue } from '../types';\nimport { getLegacyStyleStatePath } from '../style-state-back-compat';\n\nexport function getStyle< T = any >(\n\tglobalStyles?: GlobalStylesConfig,\n\tpath?: string,\n\tblockName?: string,\n\tshouldDecodeEncode = true\n): T | undefined {\n\tconst appendedPath = path ? '.' + path : '';\n\tconst finalPath = ! blockName\n\t\t? `styles${ appendedPath }`\n\t\t: `styles.blocks.${ blockName }${ appendedPath }`;\n\tif ( ! globalStyles ) {\n\t\treturn undefined;\n\t}\n\n\tlet rawResult = getValueFromObjectPath( globalStyles, finalPath ) as\n\t\t| string\n\t\t| UnresolvedValue;\n\tconst legacyPath = getLegacyStyleStatePath( finalPath );\n\tif ( rawResult === undefined && legacyPath ) {\n\t\tlet hasCanonicalPath = true;\n\t\tlet currentValue: any = globalStyles;\n\t\tfor ( const pathPart of finalPath.split( '.' ) ) {\n\t\t\tif (\n\t\t\t\t! currentValue ||\n\t\t\t\ttypeof currentValue !== 'object' ||\n\t\t\t\t! Object.hasOwn( currentValue, pathPart )\n\t\t\t) {\n\t\t\t\thasCanonicalPath = false;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcurrentValue = currentValue[ pathPart ];\n\t\t}\n\t\tif ( ! hasCanonicalPath ) {\n\t\t\trawResult = getValueFromObjectPath( globalStyles, legacyPath ) as\n\t\t\t\t| string\n\t\t\t\t| UnresolvedValue;\n\t\t}\n\t}\n\tconst result = shouldDecodeEncode\n\t\t? getValueFromVariable( globalStyles, blockName, rawResult )\n\t\t: rawResult;\n\treturn result as T | undefined;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAAuC;AACvC,oBAAqC;AAErC,qCAAwC;AAEjC,SAAS,SACf,cACA,MACA,WACA,qBAAqB,MACL;AAChB,QAAM,eAAe,OAAO,MAAM,OAAO;AACzC,QAAM,YAAY,CAAE,YACjB,SAAU,YAAa,KACvB,iBAAkB,SAAU,GAAI,YAAa;AAChD,MAAK,CAAE,cAAe;AACrB,WAAO;AAAA,EACR;AAEA,MAAI,gBAAY,sCAAwB,cAAc,SAAU;AAGhE,QAAM,iBAAa,wDAAyB,SAAU;AACtD,MAAK,cAAc,UAAa,YAAa;AAC5C,QAAI,mBAAmB;AACvB,QAAI,eAAoB;AACxB,eAAY,YAAY,UAAU,MAAO,GAAI,GAAI;AAChD,UACC,CAAE,gBACF,OAAO,iBAAiB,YACxB,CAAE,OAAO,OAAQ,cAAc,QAAS,GACvC;AACD,2BAAmB;AACnB;AAAA,MACD;AACA,qBAAe,aAAc,QAAS;AAAA,IACvC;AACA,QAAK,CAAE,kBAAmB;AACzB,sBAAY,sCAAwB,cAAc,UAAW;AAAA,IAG9D;AAAA,EACD;AACA,QAAM,SAAS,yBACZ,oCAAsB,cAAc,WAAW,SAAU,IACzD;AACH,SAAO;AACR;",
   "names": []
 }

package/build/settings/set-style.cjs

@@ -24,11 +24,12 @@ __export(set_style_exports, {
 });
 module.exports = __toCommonJS(set_style_exports);
 var import_object = require("../utils/object.cjs");
+var import_style_state_back_compat = require("../style-state-back-compat.cjs");
 function setStyle(globalStyles, path, newValue, blockName) {
   const appendedPath = path ? "." + path : "";
   const finalPath = !blockName ? `styles${appendedPath}` : `styles.blocks.${blockName}${appendedPath}`;
   return (0, import_object.setImmutably)(
-    globalStyles,
+    (0, import_style_state_back_compat.normalizeStyleStateAliases)(globalStyles),
     finalPath.split("."),
     newValue
   );

package/build/settings/set-style.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/settings/set-style.ts"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { setImmutably } from '../utils/object';\nimport type { GlobalStylesConfig } from '../types';\n\nexport function setStyle< T = any >(\n\tglobalStyles: GlobalStylesConfig,\n\tpath: string,\n\tnewValue: T | undefined,\n\tblockName?: string\n): GlobalStylesConfig {\n\tconst appendedPath = path ? '.' + path : '';\n\tconst finalPath = ! blockName\n\t\t? `styles${ appendedPath }`\n\t\t: `styles.blocks.${ blockName }${ appendedPath }`;\n\n\treturn setImmutably(\n\t\tglobalStyles,\n\t\tfinalPath.split( '.' ),\n\t\tnewValue\n\t) as GlobalStylesConfig;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAA6B;AAGtB,SAAS,SACf,cACA,MACA,UACA,WACqB;AACrB,QAAM,eAAe,OAAO,MAAM,OAAO;AACzC,QAAM,YAAY,CAAE,YACjB,SAAU,YAAa,KACvB,iBAAkB,SAAU,GAAI,YAAa;AAEhD,aAAO;AAAA,IACN;AAAA,IACA,UAAU,MAAO,GAAI;AAAA,IACrB;AAAA,EACD;AACD;",
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { setImmutably } from '../utils/object';\nimport type { GlobalStylesConfig } from '../types';\nimport { normalizeStyleStateAliases } from '../style-state-back-compat';\n\nexport function setStyle< T = any >(\n\tglobalStyles: GlobalStylesConfig,\n\tpath: string,\n\tnewValue: T | undefined,\n\tblockName?: string\n): GlobalStylesConfig {\n\tconst appendedPath = path ? '.' + path : '';\n\tconst finalPath = ! blockName\n\t\t? `styles${ appendedPath }`\n\t\t: `styles.blocks.${ blockName }${ appendedPath }`;\n\n\treturn setImmutably(\n\t\tnormalizeStyleStateAliases( globalStyles ),\n\t\tfinalPath.split( '.' ),\n\t\tnewValue\n\t) as GlobalStylesConfig;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAA6B;AAE7B,qCAA2C;AAEpC,SAAS,SACf,cACA,MACA,UACA,WACqB;AACrB,QAAM,eAAe,OAAO,MAAM,OAAO;AACzC,QAAM,YAAY,CAAE,YACjB,SAAU,YAAa,KACvB,iBAAkB,SAAU,GAAI,YAAa;AAEhD,aAAO;AAAA,QACN,2DAA4B,YAAa;AAAA,IACzC,UAAU,MAAO,GAAI;AAAA,IACrB;AAAA,EACD;AACD;",
   "names": []
 }

package/build/style-state-back-compat.cjs

@@ -0,0 +1,94 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/global-styles-engine/src/style-state-back-compat.ts
+var style_state_back_compat_exports = {};
+__export(style_state_back_compat_exports, {
+  getLegacyStyleStatePath: () => getLegacyStyleStatePath,
+  normalizeStyleStateAliases: () => normalizeStyleStateAliases
+});
+module.exports = __toCommonJS(style_state_back_compat_exports);
+var LEGACY_STYLE_STATE_ALIASES = {
+  "@mobile": "mobile",
+  "@tablet": "tablet",
+  "-current": "@current"
+};
+function isObjectRecord(value) {
+  return !!value && typeof value === "object" && !Array.isArray(value);
+}
+function normalizeStyleStateNode(node) {
+  if (!isObjectRecord(node)) {
+    return node;
+  }
+  let normalized = node;
+  Object.entries(LEGACY_STYLE_STATE_ALIASES).forEach(
+    ([state, legacyState]) => {
+      if (Object.hasOwn(node, legacyState)) {
+        if (normalized === node) {
+          normalized = { ...node };
+        }
+        if (!Object.hasOwn(node, state)) {
+          normalized[state] = node[legacyState];
+        }
+        delete normalized[legacyState];
+      }
+    }
+  );
+  Object.entries(normalized).forEach(([key, value]) => {
+    if (!isObjectRecord(value)) {
+      return;
+    }
+    const normalizedValue = normalizeStyleStateNode(value);
+    if (normalizedValue !== value) {
+      if (normalized === node) {
+        normalized = { ...node };
+      }
+      normalized[key] = normalizedValue;
+    }
+  });
+  return normalized;
+}
+function normalizeStyleStateAliases(globalStyles) {
+  if (!globalThis.IS_GUTENBERG_PLUGIN) {
+    return globalStyles;
+  }
+  if (!globalStyles?.styles) {
+    return globalStyles;
+  }
+  const styles = normalizeStyleStateNode(globalStyles.styles);
+  return styles === globalStyles.styles ? globalStyles : { ...globalStyles, styles };
+}
+function getLegacyStyleStatePath(path) {
+  if (!globalThis.IS_GUTENBERG_PLUGIN) {
+    return void 0;
+  }
+  const pathParts = path.split(".");
+  const legacyPathParts = pathParts.map(
+    (part) => LEGACY_STYLE_STATE_ALIASES[part] ?? part
+  );
+  return legacyPathParts.some(
+    (part, index) => part !== pathParts[index]
+  ) ? legacyPathParts.join(".") : void 0;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getLegacyStyleStatePath,
+  normalizeStyleStateAliases
+});
+//# sourceMappingURL=style-state-back-compat.cjs.map

package/build/style-state-back-compat.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/style-state-back-compat.ts"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { GlobalStylesConfig } from './types';\n\n/**\n * Temporary aliases for persisted style state keys shipped before breakpoint\n * states used the `@` prefix and custom states used the `-` prefix.\n *\n * Gutenberg plugin back compat for data saved before state keys were prefixed.\n * Guarded by `IS_GUTENBERG_PLUGIN` so synced Core package code does not apply it.\n */\nconst LEGACY_STYLE_STATE_ALIASES: Record< string, string > = {\n\t'@mobile': 'mobile',\n\t'@tablet': 'tablet',\n\t'-current': '@current',\n};\n\n/* eslint-disable @wordpress/wp-global-usage */\ndeclare global {\n\tvar IS_GUTENBERG_PLUGIN: boolean | undefined;\n}\n/* eslint-enable @wordpress/wp-global-usage */\n\n/**\n * Returns whether a value is a non-array object.\n *\n * @param value Value to check.\n * @return Whether the value is a non-array object.\n */\nfunction isObjectRecord( value: unknown ): value is Record< string, any > {\n\treturn !! value && typeof value === 'object' && ! Array.isArray( value );\n}\n\n/**\n * Normalizes legacy persisted style state aliases within a style node.\n *\n * For example, `{ mobile: { color: ... } }` becomes\n * `{ '@mobile': { color: ... } }`, and `{ '@current': { color: ... } }`\n * becomes `{ '-current': { color: ... } }`.\n *\n * @param node Style node or nested value.\n * @return Normalized style node or original value.\n */\nfunction normalizeStyleStateNode( node: any ): any {\n\tif ( ! isObjectRecord( node ) ) {\n\t\treturn node;\n\t}\n\n\tlet normalized = node;\n\n\t// Normalize legacy keys at the current style node before walking children.\n\tObject.entries( LEGACY_STYLE_STATE_ALIASES ).forEach(\n\t\t( [ state, legacyState ] ) => {\n\t\t\tif ( Object.hasOwn( node, legacyState ) ) {\n\t\t\t\t// Clone lazily before mutating this node.\n\t\t\t\tif ( normalized === node ) {\n\t\t\t\t\tnormalized = { ...node };\n\t\t\t\t}\n\t\t\t\tif ( ! Object.hasOwn( node, state ) ) {\n\t\t\t\t\tnormalized[ state ] = node[ legacyState ];\n\t\t\t\t}\n\t\t\t\tdelete normalized[ legacyState ];\n\t\t\t}\n\t\t}\n\t);\n\n\t// Recurse into nested style nodes, such as blocks, elements, and variations.\n\tObject.entries( normalized ).forEach( ( [ key, value ] ) => {\n\t\tif ( ! isObjectRecord( value ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst normalizedValue = normalizeStyleStateNode( value );\n\t\tif ( normalizedValue !== value ) {\n\t\t\t// Clone lazily before mutating this node.\n\t\t\tif ( normalized === node ) {\n\t\t\t\tnormalized = { ...node };\n\t\t\t}\n\t\t\tnormalized[ key ] = normalizedValue;\n\t\t}\n\t} );\n\n\treturn normalized;\n}\n\n/**\n * Normalizes legacy persisted style state aliases in a global styles config.\n *\n * For example, `styles.blocks['core/button'].mobile` becomes\n * `styles.blocks['core/button']['@mobile']`.\n *\n * @param globalStyles Global styles config to normalize.\n * @return Global styles config with canonical style state keys.\n */\nexport function normalizeStyleStateAliases(\n\tglobalStyles: GlobalStylesConfig\n): GlobalStylesConfig {\n\tif ( ! globalThis.IS_GUTENBERG_PLUGIN ) {\n\t\treturn globalStyles;\n\t}\n\n\tif ( ! globalStyles?.styles ) {\n\t\treturn globalStyles;\n\t}\n\n\tconst styles = normalizeStyleStateNode( globalStyles.styles );\n\treturn styles === globalStyles.styles\n\t\t? globalStyles\n\t\t: { ...globalStyles, styles };\n}\n\n/**\n * Returns the legacy equivalent of a canonical style state path.\n *\n * For example, `styles.blocks.core/button.@mobile.color.text` maps to\n * `styles.blocks.core/button.mobile.color.text`.\n *\n * @param path Canonical dot-separated object path.\n * @return Legacy path when one differs, otherwise undefined.\n */\nexport function getLegacyStyleStatePath( path: string ): string | undefined {\n\tif ( ! globalThis.IS_GUTENBERG_PLUGIN ) {\n\t\treturn undefined;\n\t}\n\n\tconst pathParts = path.split( '.' );\n\tconst legacyPathParts = pathParts.map(\n\t\t( part ) => LEGACY_STYLE_STATE_ALIASES[ part ] ?? part\n\t);\n\n\treturn legacyPathParts.some(\n\t\t( part, index ) => part !== pathParts[ index ]\n\t)\n\t\t? legacyPathParts.join( '.' )\n\t\t: undefined;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA,IAAM,6BAAuD;AAAA,EAC5D,WAAW;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AACb;AAcA,SAAS,eAAgB,OAAiD;AACzE,SAAO,CAAC,CAAE,SAAS,OAAO,UAAU,YAAY,CAAE,MAAM,QAAS,KAAM;AACxE;AAYA,SAAS,wBAAyB,MAAiB;AAClD,MAAK,CAAE,eAAgB,IAAK,GAAI;AAC/B,WAAO;AAAA,EACR;AAEA,MAAI,aAAa;AAGjB,SAAO,QAAS,0BAA2B,EAAE;AAAA,IAC5C,CAAE,CAAE,OAAO,WAAY,MAAO;AAC7B,UAAK,OAAO,OAAQ,MAAM,WAAY,GAAI;AAEzC,YAAK,eAAe,MAAO;AAC1B,uBAAa,EAAE,GAAG,KAAK;AAAA,QACxB;AACA,YAAK,CAAE,OAAO,OAAQ,MAAM,KAAM,GAAI;AACrC,qBAAY,KAAM,IAAI,KAAM,WAAY;AAAA,QACzC;AACA,eAAO,WAAY,WAAY;AAAA,MAChC;AAAA,IACD;AAAA,EACD;AAGA,SAAO,QAAS,UAAW,EAAE,QAAS,CAAE,CAAE,KAAK,KAAM,MAAO;AAC3D,QAAK,CAAE,eAAgB,KAAM,GAAI;AAChC;AAAA,IACD;AAEA,UAAM,kBAAkB,wBAAyB,KAAM;AACvD,QAAK,oBAAoB,OAAQ;AAEhC,UAAK,eAAe,MAAO;AAC1B,qBAAa,EAAE,GAAG,KAAK;AAAA,MACxB;AACA,iBAAY,GAAI,IAAI;AAAA,IACrB;AAAA,EACD,CAAE;AAEF,SAAO;AACR;AAWO,SAAS,2BACf,cACqB;AACrB,MAAK,CAAE,WAAW,qBAAsB;AACvC,WAAO;AAAA,EACR;AAEA,MAAK,CAAE,cAAc,QAAS;AAC7B,WAAO;AAAA,EACR;AAEA,QAAM,SAAS,wBAAyB,aAAa,MAAO;AAC5D,SAAO,WAAW,aAAa,SAC5B,eACA,EAAE,GAAG,cAAc,OAAO;AAC9B;AAWO,SAAS,wBAAyB,MAAmC;AAC3E,MAAK,CAAE,WAAW,qBAAsB;AACvC,WAAO;AAAA,EACR;AAEA,QAAM,YAAY,KAAK,MAAO,GAAI;AAClC,QAAM,kBAAkB,UAAU;AAAA,IACjC,CAAE,SAAU,2BAA4B,IAAK,KAAK;AAAA,EACnD;AAEA,SAAO,gBAAgB;AAAA,IACtB,CAAE,MAAM,UAAW,SAAS,UAAW,KAAM;AAAA,EAC9C,IACG,gBAAgB,KAAM,GAAI,IAC1B;AACJ;",
+  "names": []
+}

package/build-module/core/merge.mjs

@@ -1,26 +1,31 @@
 // packages/global-styles-engine/src/core/merge.ts
 import deepmerge from "deepmerge";
 import { isPlainObject } from "is-plain-object";
+import { normalizeStyleStateAliases } from "../style-state-back-compat.mjs";
 function mergeGlobalStyles(base, user) {
-  return deepmerge(base, user, {
-    /*
-     * We only pass as arrays the presets,
-     * in which case we want the new array of values
-     * to override the old array (no merging).
-     */
-    isMergeableObject: isPlainObject,
-    /*
-     * Exceptions to the above rule.
-     * Background images should be replaced, not merged,
-     * as they themselves are specific object definitions for the style.
-     */
-    customMerge: (key) => {
-      if (key === "backgroundImage") {
-        return (baseConfig, userConfig) => userConfig ?? baseConfig;
+  return deepmerge(
+    normalizeStyleStateAliases(base),
+    normalizeStyleStateAliases(user),
+    {
+      /*
+       * We only pass as arrays the presets,
+       * in which case we want the new array of values
+       * to override the old array (no merging).
+       */
+      isMergeableObject: isPlainObject,
+      /*
+       * Exceptions to the above rule.
+       * Background images should be replaced, not merged,
+       * as they themselves are specific object definitions for the style.
+       */
+      customMerge: (key) => {
+        if (key === "backgroundImage") {
+          return (baseConfig, userConfig) => userConfig ?? baseConfig;
+        }
+        return void 0;
       }
-      return void 0;
     }
-  });
+  );
 }
 export {
   mergeGlobalStyles

package/build-module/core/merge.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/core/merge.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport deepmerge from 'deepmerge';\n// @ts-ignore - is-plain-object doesn't have proper types\nimport { isPlainObject } from 'is-plain-object';\n\n/**\n * Internal dependencies\n */\nimport type { GlobalStylesConfig } from '../types';\n\n/**\n * Merges base and user global styles configurations\n *\n * @param base Base global styles (theme + WordPress defaults)\n * @param user User customizations\n * @return Merged global styles configuration\n */\nexport function mergeGlobalStyles(\n\tbase: GlobalStylesConfig,\n\tuser: GlobalStylesConfig\n): GlobalStylesConfig {\n\treturn deepmerge( base, user, {\n\t\t/*\n\t\t * We only pass as arrays the presets,\n\t\t * in which case we want the new array of values\n\t\t * to override the old array (no merging).\n\t\t */\n\t\tisMergeableObject: isPlainObject,\n\t\t/*\n\t\t * Exceptions to the above rule.\n\t\t * Background images should be replaced, not merged,\n\t\t * as they themselves are specific object definitions for the style.\n\t\t */\n\t\tcustomMerge: ( key ) => {\n\t\t\tif ( key === 'backgroundImage' ) {\n\t\t\t\treturn ( baseConfig, userConfig ) => userConfig ?? baseConfig;\n\t\t\t}\n\t\t\treturn undefined;\n\t\t},\n\t} );\n}\n"],
-  "mappings": ";AAGA,OAAO,eAAe;AAEtB,SAAS,qBAAqB;AAcvB,SAAS,kBACf,MACA,MACqB;AACrB,SAAO,UAAW,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM7B,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMnB,aAAa,CAAE,QAAS;AACvB,UAAK,QAAQ,mBAAoB;AAChC,eAAO,CAAE,YAAY,eAAgB,cAAc;AAAA,MACpD;AACA,aAAO;AAAA,IACR;AAAA,EACD,CAAE;AACH;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport deepmerge from 'deepmerge';\n// @ts-ignore - is-plain-object doesn't have proper types\nimport { isPlainObject } from 'is-plain-object';\n\n/**\n * Internal dependencies\n */\nimport type { GlobalStylesConfig } from '../types';\nimport { normalizeStyleStateAliases } from '../style-state-back-compat';\n\n/**\n * Merges base and user global styles configurations\n *\n * @param base Base global styles (theme + WordPress defaults)\n * @param user User customizations\n * @return Merged global styles configuration\n */\nexport function mergeGlobalStyles(\n\tbase: GlobalStylesConfig,\n\tuser: GlobalStylesConfig\n): GlobalStylesConfig {\n\treturn deepmerge(\n\t\tnormalizeStyleStateAliases( base ),\n\t\tnormalizeStyleStateAliases( user ),\n\t\t{\n\t\t\t/*\n\t\t\t * We only pass as arrays the presets,\n\t\t\t * in which case we want the new array of values\n\t\t\t * to override the old array (no merging).\n\t\t\t */\n\t\t\tisMergeableObject: isPlainObject,\n\t\t\t/*\n\t\t\t * Exceptions to the above rule.\n\t\t\t * Background images should be replaced, not merged,\n\t\t\t * as they themselves are specific object definitions for the style.\n\t\t\t */\n\t\t\tcustomMerge: ( key ) => {\n\t\t\t\tif ( key === 'backgroundImage' ) {\n\t\t\t\t\treturn ( baseConfig, userConfig ) =>\n\t\t\t\t\t\tuserConfig ?? baseConfig;\n\t\t\t\t}\n\t\t\t\treturn undefined;\n\t\t\t},\n\t\t}\n\t);\n}\n"],
+  "mappings": ";AAGA,OAAO,eAAe;AAEtB,SAAS,qBAAqB;AAM9B,SAAS,kCAAkC;AASpC,SAAS,kBACf,MACA,MACqB;AACrB,SAAO;AAAA,IACN,2BAA4B,IAAK;AAAA,IACjC,2BAA4B,IAAK;AAAA,IACjC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMC,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMnB,aAAa,CAAE,QAAS;AACvB,YAAK,QAAQ,mBAAoB;AAChC,iBAAO,CAAE,YAAY,eACpB,cAAc;AAAA,QAChB;AACA,eAAO;AAAA,MACR;AAAA,IACD;AAAA,EACD;AACD;",
   "names": []
 }

package/build-module/core/render.mjs

@@ -28,6 +28,7 @@ import { setBackgroundStyleDefaults } from "../utils/background.mjs";
 import { LAYOUT_DEFINITIONS } from "../utils/layout.mjs";
 import { getValueFromObjectPath, setImmutably } from "../utils/object.mjs";
 import { getSetting } from "../settings/get-setting.mjs";
+import { normalizeStyleStateAliases } from "../style-state-back-compat.mjs";
 var ELEMENT_CLASS_NAMES = {
   button: "wp-element-button",
   caption: "wp-element-caption"
@@ -64,8 +65,8 @@ var VALID_ELEMENT_PSEUDO_SELECTORS = {
   ]
 };
 var RESPONSIVE_BREAKPOINTS = {
-  mobile: "@media (width <= 480px)",
-  tablet: "@media (480px < width <= 782px)"
+  "@mobile": "@media (width <= 480px)",
+  "@tablet": "@media (480px < width <= 782px)"
 };
 function getPresetsClasses(blockSelector = "*", blockPresets = {}) {
   return PRESET_METADATA.reduce(
@@ -921,10 +922,17 @@ var transformToStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGa
     variationStyles: false,
     ...styleOptions
   };
-  const nodesWithStyles = getNodesWithStyles(tree, blockSelectors);
-  const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
-  const useRootPaddingAlign = tree?.settings?.useRootPaddingAwareAlignments;
-  const { contentSize, wideSize } = tree?.settings?.layout || {};
+  const normalizedTree = normalizeStyleStateAliases(tree);
+  const nodesWithStyles = getNodesWithStyles(
+    normalizedTree,
+    blockSelectors
+  );
+  const nodesWithSettings = getNodesWithSettings(
+    normalizedTree,
+    blockSelectors
+  );
+  const useRootPaddingAlign = normalizedTree?.settings?.useRootPaddingAwareAlignments;
+  const { contentSize, wideSize } = normalizedTree?.settings?.layout || {};
   const hasBodyStyles = options.marginReset || options.rootPadding || options.layoutStyles;
   let ruleset = "";
   if (options.presets && (contentSize || wideSize)) {
@@ -958,7 +966,7 @@ var transformToStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGa
         ...responsiveNodes.flatMap(getPseudoStyleNodes)
       ].forEach((expandedNode) => {
         ruleset += renderStylesNode(expandedNode, {
-          tree,
+          tree: normalizedTree,
           useRootPaddingAlign,
           disableLayoutStyles,
           hasBlockGapSupport,
@@ -974,7 +982,7 @@ var transformToStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGa
     ruleset = ruleset + ".wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }";
   }
   if (options.blockGap && hasBlockGapSupport) {
-    const gapValue = getGapCSSValue(tree?.styles?.spacing?.blockGap) || "0.5em";
+    const gapValue = getGapCSSValue(normalizedTree?.styles?.spacing?.blockGap) || "0.5em";
     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; }";