@wordpress/global-styles-engine 1.15.1 → 1.16.0

package/build-module/style-state-back-compat.mjs.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": ";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-types/core/merge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"merge.d.ts","sourceRoot":"","sources":["../../src/core/merge.ts"],"names":[],"mappings":"AAOA;;GAEG;AACH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAEnD;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAChC,IAAI,EAAE,kBAAkB,EACxB,IAAI,EAAE,kBAAkB,GACtB,kBAAkB,CAoBpB"}
+{"version":3,"file":"merge.d.ts","sourceRoot":"","sources":["../../src/core/merge.ts"],"names":[],"mappings":"AAOA;;GAEG;AACH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAGnD;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAChC,IAAI,EAAE,kBAAkB,EACxB,IAAI,EAAE,kBAAkB,GACtB,kBAAkB,CAyBpB"}

package/build-types/core/render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/core/render.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/core/render.tsx"],"names":[],"mappings":"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"}

package/build-types/settings/get-style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"get-style.d.ts","sourceRoot":"","sources":["../../src/settings/get-style.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAmB,MAAM,UAAU,CAAC;AAEpE,wBAAgB,QAAQ,CAAE,CAAC,GAAG,GAAG,EAChC,YAAY,CAAC,EAAE,kBAAkB,EACjC,IAAI,CAAC,EAAE,MAAM,EACb,SAAS,CAAC,EAAE,MAAM,EAClB,kBAAkB,UAAO,GACvB,CAAC,GAAG,SAAS,CAgBf"}
+{"version":3,"file":"get-style.d.ts","sourceRoot":"","sources":["../../src/settings/get-style.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAmB,MAAM,UAAU,CAAC;AAGpE,wBAAgB,QAAQ,CAAE,CAAC,GAAG,GAAG,EAChC,YAAY,CAAC,EAAE,kBAAkB,EACjC,IAAI,CAAC,EAAE,MAAM,EACb,SAAS,CAAC,EAAE,MAAM,EAClB,kBAAkB,UAAO,GACvB,CAAC,GAAG,SAAS,CAqCf"}

package/build-types/settings/set-style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"set-style.d.ts","sourceRoot":"","sources":["../../src/settings/set-style.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAEnD,wBAAgB,QAAQ,CAAE,CAAC,GAAG,GAAG,EAChC,YAAY,EAAE,kBAAkB,EAChC,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,CAAC,GAAG,SAAS,EACvB,SAAS,CAAC,EAAE,MAAM,GAChB,kBAAkB,CAWpB"}
+{"version":3,"file":"set-style.d.ts","sourceRoot":"","sources":["../../src/settings/set-style.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAGnD,wBAAgB,QAAQ,CAAE,CAAC,GAAG,GAAG,EAChC,YAAY,EAAE,kBAAkB,EAChC,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,CAAC,GAAG,SAAS,EACvB,SAAS,CAAC,EAAE,MAAM,GAChB,kBAAkB,CAWpB"}

package/build-types/style-state-back-compat.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+import type { GlobalStylesConfig } from './types';
+declare global {
+    var IS_GUTENBERG_PLUGIN: boolean | undefined;
+}
+/**
+ * Normalizes legacy persisted style state aliases in a global styles config.
+ *
+ * For example, `styles.blocks['core/button'].mobile` becomes
+ * `styles.blocks['core/button']['@mobile']`.
+ *
+ * @param globalStyles Global styles config to normalize.
+ * @return Global styles config with canonical style state keys.
+ */
+export declare function normalizeStyleStateAliases(globalStyles: GlobalStylesConfig): GlobalStylesConfig;
+/**
+ * Returns the legacy equivalent of a canonical style state path.
+ *
+ * For example, `styles.blocks.core/button.@mobile.color.text` maps to
+ * `styles.blocks.core/button.mobile.color.text`.
+ *
+ * @param path Canonical dot-separated object path.
+ * @return Legacy path when one differs, otherwise undefined.
+ */
+export declare function getLegacyStyleStatePath(path: string): string | undefined;
+//# sourceMappingURL=style-state-back-compat.d.ts.map

package/build-types/style-state-back-compat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-state-back-compat.d.ts","sourceRoot":"","sources":["../src/style-state-back-compat.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAgBlD,OAAO,CAAC,MAAM,CAAC,CAAC;IACf,IAAI,mBAAmB,EAAE,OAAO,GAAG,SAAS,CAAC;CAC7C;AAiED;;;;;;;;GAQG;AACH,wBAAgB,0BAA0B,CACzC,YAAY,EAAE,kBAAkB,GAC9B,kBAAkB,CAapB;AAED;;;;;;;;GAQG;AACH,wBAAgB,uBAAuB,CAAE,IAAI,EAAE,MAAM,GAAI,MAAM,GAAG,SAAS,CAe1E"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/global-styles-engine",
-	"version": "1.15.1",
+	"version": "1.16.0",
 	"description": "Pure CSS generation engine for WordPress global styles.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -42,10 +42,10 @@
 	"types": "build-types/index.d.ts",
 	"sideEffects": false,
 	"dependencies": {
-		"@wordpress/blocks": "^15.21.1",
-		"@wordpress/data": "^10.48.1",
-		"@wordpress/i18n": "^6.21.1",
-		"@wordpress/style-engine": "^2.48.1",
+		"@wordpress/blocks": "^15.22.0",
+		"@wordpress/data": "^10.49.0",
+		"@wordpress/i18n": "^6.22.0",
+		"@wordpress/style-engine": "^2.49.0",
 		"colord": "^2.9.3",
 		"deepmerge": "^4.3.1",
 		"fast-deep-equal": "^3.1.3",
@@ -59,5 +59,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "99df7432c5c7cb83ba41146fd1f57f3c19004305"
+	"gitHead": "0e7112a4f4fde4ea15bd9060489b8f6fe11eb6ca"
 }

package/src/core/merge.ts

@@ -9,6 +9,7 @@ import { isPlainObject } from 'is-plain-object';
  * Internal dependencies
  */
 import type { GlobalStylesConfig } from '../types';
+import { normalizeStyleStateAliases } from '../style-state-back-compat';
 
 /**
  * Merges base and user global styles configurations
@@ -21,23 +22,28 @@ export function mergeGlobalStyles(
 	base: GlobalStylesConfig,
 	user: GlobalStylesConfig
 ): GlobalStylesConfig {
-	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 undefined;
-		},
-	} );
+	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 undefined;
+			},
+		}
+	);
 }

package/src/core/render.tsx

@@ -36,6 +36,7 @@ import { LAYOUT_DEFINITIONS } from '../utils/layout';
 import { getValueFromObjectPath, setImmutably } from '../utils/object';
 import { getSetting } from '../settings/get-setting';
 import type { GlobalStylesConfig, GlobalStylesStyles } from '../types';
+import { normalizeStyleStateAliases } from '../style-state-back-compat';
 
 // =============================================================================
 // LOCAL TYPE DEFINITIONS
@@ -232,8 +233,8 @@ const VALID_ELEMENT_PSEUDO_SELECTORS: Record< string, string[] > = {
  * Keep in sync with WP_Theme_JSON_Gutenberg::RESPONSIVE_BREAKPOINTS.
  */
 const RESPONSIVE_BREAKPOINTS: Record< string, string > = {
-	mobile: '@media (width <= 480px)',
-	tablet: '@media (480px < width <= 782px)',
+	'@mobile': '@media (width <= 480px)',
+	'@tablet': '@media (480px < width <= 782px)',
 };
 
 /**
@@ -1699,10 +1700,18 @@ export const transformToStyles = (
 		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;
 
@@ -1762,7 +1771,7 @@ export const transformToStyles = (
 				...responsiveNodes.flatMap( getPseudoStyleNodes ),
 			].forEach( ( expandedNode ) => {
 				ruleset += renderStylesNode( expandedNode, {
-					tree,
+					tree: normalizedTree,
 					useRootPaddingAlign,
 					disableLayoutStyles,
 					hasBlockGapSupport,
@@ -1789,7 +1798,8 @@ export const transformToStyles = (
 	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';
+			getGapCSSValue( normalizedTree?.styles?.spacing?.blockGap ) ||
+			'0.5em';
 		ruleset =
 			ruleset +
 			`:root :where(.wp-site-blocks) > * { margin-block-start: ${ gapValue }; margin-block-end: 0; }`;

package/src/settings/get-style.ts

@@ -4,6 +4,7 @@
 import { getValueFromObjectPath } from '../utils/object';
 import { getValueFromVariable } from '../utils/common';
 import type { GlobalStylesConfig, UnresolvedValue } from '../types';
+import { getLegacyStyleStatePath } from '../style-state-back-compat';
 
 export function getStyle< T = any >(
 	globalStyles?: GlobalStylesConfig,
@@ -19,9 +20,30 @@ export function getStyle< T = any >(
 		return undefined;
 	}
 
-	const rawResult = getValueFromObjectPath( globalStyles, finalPath ) as
+	let rawResult = getValueFromObjectPath( globalStyles, finalPath ) as
 		| string
 		| UnresolvedValue;
+	const legacyPath = getLegacyStyleStatePath( finalPath );
+	if ( rawResult === undefined && legacyPath ) {
+		let hasCanonicalPath = true;
+		let currentValue: any = 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 = getValueFromObjectPath( globalStyles, legacyPath ) as
+				| string
+				| UnresolvedValue;
+		}
+	}
 	const result = shouldDecodeEncode
 		? getValueFromVariable( globalStyles, blockName, rawResult )
 		: rawResult;

package/src/settings/set-style.ts

@@ -3,6 +3,7 @@
  */
 import { setImmutably } from '../utils/object';
 import type { GlobalStylesConfig } from '../types';
+import { normalizeStyleStateAliases } from '../style-state-back-compat';
 
 export function setStyle< T = any >(
 	globalStyles: GlobalStylesConfig,
@@ -16,7 +17,7 @@ export function setStyle< T = any >(
 		: `styles.blocks.${ blockName }${ appendedPath }`;
 
 	return setImmutably(
-		globalStyles,
+		normalizeStyleStateAliases( globalStyles ),
 		finalPath.split( '.' ),
 		newValue
 	) as GlobalStylesConfig;

package/src/style-state-back-compat.ts

@@ -0,0 +1,137 @@
+/**
+ * Internal dependencies
+ */
+import type { GlobalStylesConfig } from './types';
+
+/**
+ * Temporary aliases for persisted style state keys shipped before breakpoint
+ * states used the `@` prefix and custom states used the `-` prefix.
+ *
+ * Gutenberg plugin back compat for data saved before state keys were prefixed.
+ * Guarded by `IS_GUTENBERG_PLUGIN` so synced Core package code does not apply it.
+ */
+const LEGACY_STYLE_STATE_ALIASES: Record< string, string > = {
+	'@mobile': 'mobile',
+	'@tablet': 'tablet',
+	'-current': '@current',
+};
+
+/* eslint-disable @wordpress/wp-global-usage */
+declare global {
+	var IS_GUTENBERG_PLUGIN: boolean | undefined;
+}
+/* eslint-enable @wordpress/wp-global-usage */
+
+/**
+ * Returns whether a value is a non-array object.
+ *
+ * @param value Value to check.
+ * @return Whether the value is a non-array object.
+ */
+function isObjectRecord( value: unknown ): value is Record< string, any > {
+	return !! value && typeof value === 'object' && ! Array.isArray( value );
+}
+
+/**
+ * Normalizes legacy persisted style state aliases within a style node.
+ *
+ * For example, `{ mobile: { color: ... } }` becomes
+ * `{ '@mobile': { color: ... } }`, and `{ '@current': { color: ... } }`
+ * becomes `{ '-current': { color: ... } }`.
+ *
+ * @param node Style node or nested value.
+ * @return Normalized style node or original value.
+ */
+function normalizeStyleStateNode( node: any ): any {
+	if ( ! isObjectRecord( node ) ) {
+		return node;
+	}
+
+	let normalized = node;
+
+	// Normalize legacy keys at the current style node before walking children.
+	Object.entries( LEGACY_STYLE_STATE_ALIASES ).forEach(
+		( [ state, legacyState ] ) => {
+			if ( Object.hasOwn( node, legacyState ) ) {
+				// Clone lazily before mutating this node.
+				if ( normalized === node ) {
+					normalized = { ...node };
+				}
+				if ( ! Object.hasOwn( node, state ) ) {
+					normalized[ state ] = node[ legacyState ];
+				}
+				delete normalized[ legacyState ];
+			}
+		}
+	);
+
+	// Recurse into nested style nodes, such as blocks, elements, and variations.
+	Object.entries( normalized ).forEach( ( [ key, value ] ) => {
+		if ( ! isObjectRecord( value ) ) {
+			return;
+		}
+
+		const normalizedValue = normalizeStyleStateNode( value );
+		if ( normalizedValue !== value ) {
+			// Clone lazily before mutating this node.
+			if ( normalized === node ) {
+				normalized = { ...node };
+			}
+			normalized[ key ] = normalizedValue;
+		}
+	} );
+
+	return normalized;
+}
+
+/**
+ * Normalizes legacy persisted style state aliases in a global styles config.
+ *
+ * For example, `styles.blocks['core/button'].mobile` becomes
+ * `styles.blocks['core/button']['@mobile']`.
+ *
+ * @param globalStyles Global styles config to normalize.
+ * @return Global styles config with canonical style state keys.
+ */
+export function normalizeStyleStateAliases(
+	globalStyles: GlobalStylesConfig
+): GlobalStylesConfig {
+	if ( ! globalThis.IS_GUTENBERG_PLUGIN ) {
+		return globalStyles;
+	}
+
+	if ( ! globalStyles?.styles ) {
+		return globalStyles;
+	}
+
+	const styles = normalizeStyleStateNode( globalStyles.styles );
+	return styles === globalStyles.styles
+		? globalStyles
+		: { ...globalStyles, styles };
+}
+
+/**
+ * Returns the legacy equivalent of a canonical style state path.
+ *
+ * For example, `styles.blocks.core/button.@mobile.color.text` maps to
+ * `styles.blocks.core/button.mobile.color.text`.
+ *
+ * @param path Canonical dot-separated object path.
+ * @return Legacy path when one differs, otherwise undefined.
+ */
+export function getLegacyStyleStatePath( path: string ): string | undefined {
+	if ( ! globalThis.IS_GUTENBERG_PLUGIN ) {
+		return undefined;
+	}
+
+	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( '.' )
+		: undefined;
+}

package/src/test/render.test.ts

@@ -682,7 +682,7 @@ describe( 'global styles renderer', () => {
 													text: 'blue',
 												},
 											},
-											mobile: {
+											'@mobile': {
 												color: {
 													text: 'green',
 												},
@@ -790,7 +790,7 @@ describe( 'global styles renderer', () => {
 									text: 'blue',
 								},
 							},
-							mobile: {
+							'@mobile': {
 								color: {
 									text: 'red',
 								},
@@ -832,7 +832,7 @@ describe( 'global styles renderer', () => {
 							text: 'blue',
 						},
 					},
-					mobile: {
+					'@mobile': {
 						color: {
 							text: 'green',
 						},
@@ -945,7 +945,7 @@ describe( 'global styles renderer', () => {
 											width: '20rem',
 										},
 									},
-									tablet: {
+									'@tablet': {
 										color: {
 											text: 'red',
 										},
@@ -1002,6 +1002,45 @@ describe( 'global styles renderer', () => {
 		} );
 
 		it( 'handles responsive block styles', () => {
+			const tree = {
+				styles: {
+					blocks: {
+						'core/button': {
+							color: {
+								text: 'red',
+							},
+							'@mobile': {
+								color: {
+									text: 'blue',
+								},
+							},
+						},
+					},
+				},
+			} as unknown as GlobalStylesConfig;
+
+			const blockSelectors = {
+				'core/button': {
+					selector: '.wp-block-button',
+				},
+			};
+
+			const result = transformToStyles(
+				Object.freeze( tree ),
+				blockSelectors,
+				false,
+				false,
+				true,
+				true,
+				minimalStyleOptions
+			);
+
+			expect( result ).toEqual(
+				':root :where(.wp-block-button){color: red;}@media (width <= 480px){:root :where(.wp-block-button){color: blue;}}'
+			);
+		} );
+
+		it( 'handles legacy responsive block styles', () => {
 			const tree = {
 				styles: {
 					blocks: {
@@ -1050,7 +1089,7 @@ describe( 'global styles renderer', () => {
 									text: 'blue',
 								},
 							},
-							mobile: {
+							'@mobile': {
 								color: {
 									text: 'red',
 								},
@@ -1095,7 +1134,7 @@ describe( 'global styles renderer', () => {
 							dimensions: {
 								width: '25%',
 							},
-							mobile: {
+							'@mobile': {
 								dimensions: {
 									width: '50%',
 								},
@@ -1140,7 +1179,7 @@ describe( 'global styles renderer', () => {
 							color: {
 								text: 'blue',
 							},
-							mobile: {
+							'@mobile': {
 								color: {
 									text: 'red',
 								},
@@ -1180,7 +1219,7 @@ describe( 'global styles renderer', () => {
 									color: {
 										text: 'green',
 									},
-									mobile: {
+									'@mobile': {
 										color: {
 											text: 'yellow',
 										},