← All changes | build/modules/lazy-editor/index.js +719 -429 23.1.1 → trunk View file →

		@@ -121,8 +121,14 @@
121	121	templateId
122	122	) : null;
123	123	return {
124	124	globalStylesId: coreDataSelect.__experimentalGetCurrentGlobalStylesId(),
	125	+ /*
	126	+ * `styles_id` is not part of the template REST schema, so it
	127	+ * cannot come from the record type. It is read defensively in
	128	+ * case a filtered response carries one; without it the hook
	129	+ * falls back to the global styles ID below.
	130	+ */
125	131	stylesId: template?.styles_id
126	132	};
127	133	},
128	134	[templateId]
		@@ -218,10 +224,15 @@
218	224	"typography.textAlign",
219	225	"typography.textColumns",
220	226	"typography.textDecoration",
221	227	"typography.textIndent",
	228	+ "typography.textShadow",
	229	+ "typography.defaultTextShadowPresets",
	230	+ "typography.textShadowPresets",
222	231	"typography.textTransform",
223		- "typography.writingMode"
	232	+ "typography.writingMode",
	233	+ "viewport.mobile",
	234	+ "viewport.tablet"
224	235	];
225	236	function getSetting(globalStyles, path, blockName) {
226	237	const appendedBlockPath = blockName ? ".blocks." + blockName : "";
227	238	const appendedPropertyPath = path ? "." + path : "";
		@@ -434,8 +445,30 @@
434	445
435	446	// packages/global-styles-engine/build-module/utils/common.mjs
436	447	var ROOT_BLOCK_SELECTOR = "body";
437	448	var ROOT_CSS_PROPERTIES_SELECTOR = ":root";
	449	+function splitSelectorList(selector) {
	450	+ if (!selector.includes(",")) {
	451	+ return [selector];
	452	+ }
	453	+ const selectors = [];
	454	+ let currentSelector = "";
	455	+ let parenthesesDepth = 0;
	456	+ for (const char of selector) {
	457	+ if (char === "(") {
	458	+ parenthesesDepth++;
	459	+ } else if (char === ")" && parenthesesDepth > 0) {
	460	+ parenthesesDepth--;
	461	+ } else if (char === "," && parenthesesDepth === 0) {
	462	+ selectors.push(currentSelector);
	463	+ currentSelector = "";
	464	+ continue;
	465	+ }
	466	+ currentSelector += char;
	467	+ }
	468	+ selectors.push(currentSelector);
	469	+ return selectors;
	470	+}
438	471	var PRESET_METADATA = [
439	472	{
440	473	path: ["color", "palette"],
441	474	valueKey: "color",
		@@ -491,8 +524,16 @@
491	524	{ classSuffix: "font-family", propertyName: "font-family" }
492	525	]
493	526	},
494	527	{
	528	+ path: ["typography", "textShadowPresets"],
	529	+ valueKey: "textShadow",
	530	+ cssVarInfix: "text-shadow",
	531	+ classes: [
	532	+ { classSuffix: "text-shadow", propertyName: "text-shadow" }
	533	+ ]
	534	+ },
	535	+ {
495	536	path: ["spacing", "spacingSizes"],
496	537	valueKey: "size",
497	538	cssVarInfix: "spacing",
498	539	valueFunc: ({ size }) => size,
		@@ -514,10 +555,10 @@
514	555	function scopeSelector(scope, selector) {
515	556	if (!scope || !selector) {
516	557	return selector;
517	558	}
518		- const scopes = scope.split(",");
519		- const selectors = selector.split(",");
	559	+ const scopes = splitSelectorList(scope);
	560	+ const selectors = splitSelectorList(selector);
520	561	const selectorsScoped = [];
521	562	scopes.forEach((outer) => {
522	563	selectors.forEach((inner) => {
523	564	selectorsScoped.push(`${outer.trim()} ${inner.trim()}`);
		@@ -551,9 +592,9 @@
551	592	function appendToSelector(selector, toAppend) {
552	593	if (!selector.includes(",")) {
553	594	return selector + toAppend;
554	595	}
555		- const selectors = selector.split(",");
	596	+ const selectors = splitSelectorList(selector);
556	597	const newSelectors = selectors.map((sel) => sel + toAppend);
557	598	return newSelectors.join(",");
558	599	}
559	600	function getBlockStyleVariationSelector(variation, blockSelector) {
		@@ -560,15 +601,32 @@
560	601	const variationClass = `.is-style-${variation}`;
561	602	if (!blockSelector) {
562	603	return variationClass;
563	604	}
564		- const ancestorRegex = /((?::\([^)]+\))?\s*)([^\s:]+)/;
565		- const addVariationClass = (_match, group1, group2) => {
566		- return group1 + group2 + variationClass;
567		- };
568		- const result = blockSelector.split(",").map((part) => part.replace(ancestorRegex, addVariationClass));
	605	+ const ancestorRegex = /[^\s:]+/;
	606	+ const addVariationClass = (match) => match + variationClass;
	607	+ const result = splitSelectorList(blockSelector).map(
	608	+ (part) => part.replace(ancestorRegex, addVariationClass)
	609	+ );
569	610	return result.join(",");
570	611	}
	612	+function getBlockStyleVariationFeatureSelector(variation, featureSelector) {
	613	+ const variationClass = `.is-style-${variation}`;
	614	+ const selectorParts = splitSelectorList(featureSelector).map(
	615	+ (selector) => {
	616	+ const trimmedSelector = selector.trim();
	617	+ const prefix = `${variationClass} `;
	618	+ if (trimmedSelector.startsWith(prefix)) {
	619	+ return trimmedSelector.slice(prefix.length);
	620	+ }
	621	+ return trimmedSelector;
	622	+ }
	623	+ );
	624	+ return getBlockStyleVariationSelector(
	625	+ variation,
	626	+ selectorParts.join(",")
	627	+ );
	628	+}
571	629	function getResolvedRefValue(ruleValue, tree) {
572	630	if (!ruleValue || !tree) {
573	631	return ruleValue;
574	632	}
		@@ -603,16 +661,71 @@
603	661	return ruleValue;
604	662	}
605	663	const resolvedValue = getResolvedRefValue(ruleValue, tree);
606	664	if (typeof resolvedValue === "object" && resolvedValue !== null && "url" in resolvedValue && resolvedValue?.url) {
607		- resolvedValue.url = getResolvedThemeFilePath(
608		- resolvedValue.url,
609		- tree?._links?.["wp:theme-file"]
610		- );
	665	+ return {
	666	+ ...resolvedValue,
	667	+ url: getResolvedThemeFilePath(
	668	+ resolvedValue.url,
	669	+ tree?._links?.["wp:theme-file"]
	670	+ )
	671	+ };
611	672	}
612	673	return resolvedValue;
613	674	}
614	675
	676	+// packages/global-styles-engine/build-module/style-state-back-compat.mjs
	677	+var LEGACY_STYLE_STATE_ALIASES = {
	678	+ "@mobile": "mobile",
	679	+ "@tablet": "tablet",
	680	+ "-current": "@current"
	681	+};
	682	+function isObjectRecord(value) {
	683	+ return !!value && typeof value === "object" && !Array.isArray(value);
	684	+}
	685	+function normalizeStyleStateNode(node) {
	686	+ if (!isObjectRecord(node)) {
	687	+ return node;
	688	+ }
	689	+ let normalized = node;
	690	+ Object.entries(LEGACY_STYLE_STATE_ALIASES).forEach(
	691	+ ([state, legacyState]) => {
	692	+ if (Object.hasOwn(node, legacyState)) {
	693	+ if (normalized === node) {
	694	+ normalized = { ...node };
	695	+ }
	696	+ if (!Object.hasOwn(node, state)) {
	697	+ normalized[state] = node[legacyState];
	698	+ }
	699	+ delete normalized[legacyState];
	700	+ }
	701	+ }
	702	+ );
	703	+ Object.entries(normalized).forEach(([key, value]) => {
	704	+ if (!isObjectRecord(value)) {
	705	+ return;
	706	+ }
	707	+ const normalizedValue = normalizeStyleStateNode(value);
	708	+ if (normalizedValue !== value) {
	709	+ if (normalized === node) {
	710	+ normalized = { ...node };
	711	+ }
	712	+ normalized[key] = normalizedValue;
	713	+ }
	714	+ });
	715	+ return normalized;
	716	+}
	717	+function normalizeStyleStateAliases(globalStyles) {
	718	+ if (false) {
	719	+ return globalStyles;
	720	+ }
	721	+ if (!globalStyles?.styles) {
	722	+ return globalStyles;
	723	+ }
	724	+ const styles = normalizeStyleStateNode(globalStyles.styles);
	725	+ return styles === globalStyles.styles ? globalStyles : { ...globalStyles, styles };
	726	+}
	727	+
615	728	// packages/global-styles-engine/build-module/core/render.mjs
616	729	var import_blocks = __toESM(require_blocks(), 1);
617	730	var import_style_engine2 = __toESM(require_style_engine(), 1);
618	731	var import_data2 = __toESM(require_data(), 1);
		@@ -671,163 +784,176 @@
671	784	return null;
672	785	}
673	786
674	787	// node_modules/colord/index.mjs
675		-var r = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) };
676		-var t = function(r2) {
	788	+for (r = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) }, t = function(r2) {
677	789	return "string" == typeof r2 ? r2.length > 0 : "number" == typeof r2;
678		-};
679		-var n = function(r2, t2, n2) {
	790	+}, n = function(r2, t2, n2) {
680	791	return void 0 === t2 && (t2 = 0), void 0 === n2 && (n2 = Math.pow(10, t2)), Math.round(n2 * r2) / n2 + 0;
681		-};
682		-var e = function(r2, t2, n2) {
	792	+}, u = function(r2, t2, n2) {
683	793	return void 0 === t2 && (t2 = 0), void 0 === n2 && (n2 = 1), r2 > n2 ? n2 : r2 > t2 ? r2 : t2;
684		-};
685		-var u = function(r2) {
686		- return (r2 = isFinite(r2) ? r2 % 360 : 0) > 0 ? r2 : r2 + 360;
687		-};
688		-var a = function(r2) {
689		- return { r: e(r2.r, 0, 255), g: e(r2.g, 0, 255), b: e(r2.b, 0, 255), a: e(r2.a) };
690		-};
691		-var o = function(r2) {
	794	+}, e = function(r2) {
	795	+ return (r2 = isFinite(r2) ? r2 % 360 : 0) < 0 ? r2 + 360 : r2;
	796	+}, o = function(r2, t2) {
	797	+ return void 0 === t2 && (t2 = 0), n(r2, t2) % 360;
	798	+}, a = function(r2) {
	799	+ return { r: u(r2.r, 0, 255), g: u(r2.g, 0, 255), b: u(r2.b, 0, 255), a: u(r2.a) };
	800	+}, i = function(r2) {
692	801	return { r: n(r2.r), g: n(r2.g), b: n(r2.b), a: n(r2.a, 3) };
	802	+}, s = /^#([0-9a-f]{3,8})$/i, d = function(r2, t2) {
	803	+ var n2 = r2.charCodeAt(t2);
	804	+ return (15 & n2) + 9 * (n2 >> 6);
	805	+}, h = function(r2, t2) {
	806	+ return d(r2, t2) << 4 | d(r2, t2 + 1);
	807	+}, b = [], f = 0; f < 256; f++) b.push((f < 16 ? "0" : "") + f.toString(16));
	808	+var r;
	809	+var t;
	810	+var n;
	811	+var u;
	812	+var e;
	813	+var o;
	814	+var a;
	815	+var i;
	816	+var s;
	817	+var d;
	818	+var h;
	819	+var b;
	820	+var f;
	821	+var g = function(r) {
	822	+ return b[u(r, 0, 255)];
693	823	};
694		-var i = /^#([0-9a-f]{3,8})$/i;
695		-var s = function(r2) {
696		- var t2 = r2.toString(16);
697		- return t2.length < 2 ? "0" + t2 : t2;
	824	+var c = function(r) {
	825	+ var t = r.r, n = r.g, u = r.b, e = r.a, o = Math.max(t, n, u), a = o - Math.min(t, n, u), i = a ? o === t ? (n - u) / a : o === n ? 2 + (u - t) / a : 4 + (t - n) / a : 0;
	826	+ return { h: 60 * (i < 0 ? i + 6 : i), s: o ? a / o * 100 : 0, v: o / 255 * 100, a: e };
698	827	};
699		-var h = function(r2) {
700		- var t2 = r2.r, n2 = r2.g, e2 = r2.b, u2 = r2.a, a2 = Math.max(t2, n2, e2), o2 = a2 - Math.min(t2, n2, e2), i2 = o2 ? a2 === t2 ? (n2 - e2) / o2 : a2 === n2 ? 2 + (e2 - t2) / o2 : 4 + (t2 - n2) / o2 : 0;
701		- return { h: 60 * (i2 < 0 ? i2 + 6 : i2), s: a2 ? o2 / a2 * 100 : 0, v: a2 / 255 * 100, a: u2 };
	828	+var v = function(r) {
	829	+ var t = r.h, n = r.s, u = r.v, e = r.a;
	830	+ t = t / 360 * 6, n /= 100, u /= 100;
	831	+ var o = Math.floor(t), a = u * (1 - n), i = u * (1 - (t - o) * n), s = u * (1 - (1 - t + o) * n), d = o % 6;
	832	+ return { r: 255 * [u, i, a, a, s, u][d], g: 255 * [s, u, u, i, a, a][d], b: 255 * [a, a, s, u, u, i][d], a: e };
702	833	};
703		-var b = function(r2) {
704		- var t2 = r2.h, n2 = r2.s, e2 = r2.v, u2 = r2.a;
705		- t2 = t2 / 360 * 6, n2 /= 100, e2 /= 100;
706		- var a2 = Math.floor(t2), o2 = e2 * (1 - n2), i2 = e2 * (1 - (t2 - a2) * n2), s2 = e2 * (1 - (1 - t2 + a2) * n2), h2 = a2 % 6;
707		- return { r: 255 * [e2, i2, o2, o2, s2, e2][h2], g: 255 * [s2, e2, e2, i2, o2, o2][h2], b: 255 * [o2, o2, s2, e2, e2, i2][h2], a: u2 };
	834	+var l = function(r) {
	835	+ return { h: e(r.h), s: u(r.s, 0, 100), l: u(r.l, 0, 100), a: u(r.a) };
708	836	};
709		-var g = function(r2) {
710		- return { h: u(r2.h), s: e(r2.s, 0, 100), l: e(r2.l, 0, 100), a: e(r2.a) };
	837	+var p = function(r) {
	838	+ return { h: o(r.h), s: n(r.s), l: n(r.l), a: n(r.a, 3) };
711	839	};
712		-var d = function(r2) {
713		- return { h: n(r2.h), s: n(r2.s), l: n(r2.l), a: n(r2.a, 3) };
	840	+var m = function(r) {
	841	+ return v((n = (t = r).s, { h: t.h, s: (n *= ((u = t.l) < 50 ? u : 100 - u) / 100) > 0 ? 2 * n / (u + n) * 100 : 0, v: u + n, a: t.a }));
	842	+ var t, n, u;
714	843	};
715		-var f = function(r2) {
716		- return b((n2 = (t2 = r2).s, { h: t2.h, s: (n2 *= ((e2 = t2.l) < 50 ? e2 : 100 - e2) / 100) > 0 ? 2 * n2 / (e2 + n2) * 100 : 0, v: e2 + n2, a: t2.a }));
717		- var t2, n2, e2;
	844	+var y = function(r) {
	845	+ return { h: (t = c(r)).h, s: (e = (200 - (n = t.s)) * (u = t.v) / 100) > 0 && e < 200 ? n * u / 100 / (e <= 100 ? e : 200 - e) * 100 : 0, l: e / 2, a: t.a };
	846	+ var t, n, u, e;
718	847	};
719		-var c = function(r2) {
720		- return { h: (t2 = h(r2)).h, s: (u2 = (200 - (n2 = t2.s)) * (e2 = t2.v) / 100) > 0 && u2 < 200 ? n2 * e2 / 100 / (u2 <= 100 ? u2 : 200 - u2) * 100 : 0, l: u2 / 2, a: t2.a };
721		- var t2, n2, e2, u2;
722		-};
723		-var l = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i;
724		-var p = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i;
725		-var v = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i;
726		-var m = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i;
727		-var y = { string: [[function(r2) {
728		- var t2 = i.exec(r2);
729		- return t2 ? (r2 = t2[1]).length <= 4 ? { r: parseInt(r2[0] + r2[0], 16), g: parseInt(r2[1] + r2[1], 16), b: parseInt(r2[2] + r2[2], 16), a: 4 === r2.length ? n(parseInt(r2[3] + r2[3], 16) / 255, 2) : 1 } : 6 === r2.length || 8 === r2.length ? { r: parseInt(r2.substr(0, 2), 16), g: parseInt(r2.substr(2, 2), 16), b: parseInt(r2.substr(4, 2), 16), a: 8 === r2.length ? n(parseInt(r2.substr(6, 2), 16) / 255, 2) : 1 } : null : null;
730		-}, "hex"], [function(r2) {
731		- var t2 = v.exec(r2) || m.exec(r2);
732		- return t2 ? t2[2] !== t2[4] || t2[4] !== t2[6] ? null : a({ r: Number(t2[1]) / (t2[2] ? 100 / 255 : 1), g: Number(t2[3]) / (t2[4] ? 100 / 255 : 1), b: Number(t2[5]) / (t2[6] ? 100 / 255 : 1), a: void 0 === t2[7] ? 1 : Number(t2[7]) / (t2[8] ? 100 : 1) }) : null;
733		-}, "rgb"], [function(t2) {
734		- var n2 = l.exec(t2) || p.exec(t2);
735		- if (!n2) return null;
736		- var e2, u2, a2 = g({ h: (e2 = n2[1], u2 = n2[2], void 0 === u2 && (u2 = "deg"), Number(e2) * (r[u2] || 1)), s: Number(n2[3]), l: Number(n2[4]), a: void 0 === n2[5] ? 1 : Number(n2[5]) / (n2[6] ? 100 : 1) });
737		- return f(a2);
738		-}, "hsl"]], object: [[function(r2) {
739		- var n2 = r2.r, e2 = r2.g, u2 = r2.b, o2 = r2.a, i2 = void 0 === o2 ? 1 : o2;
740		- return t(n2) && t(e2) && t(u2) ? a({ r: Number(n2), g: Number(e2), b: Number(u2), a: Number(i2) }) : null;
741		-}, "rgb"], [function(r2) {
742		- var n2 = r2.h, e2 = r2.s, u2 = r2.l, a2 = r2.a, o2 = void 0 === a2 ? 1 : a2;
743		- if (!t(n2) || !t(e2) || !t(u2)) return null;
744		- var i2 = g({ h: Number(n2), s: Number(e2), l: Number(u2), a: Number(o2) });
745		- return f(i2);
746		-}, "hsl"], [function(r2) {
747		- var n2 = r2.h, a2 = r2.s, o2 = r2.v, i2 = r2.a, s2 = void 0 === i2 ? 1 : i2;
748		- if (!t(n2) || !t(a2) || !t(o2)) return null;
749		- var h2 = (function(r3) {
750		- return { h: u(r3.h), s: e(r3.s, 0, 100), v: e(r3.v, 0, 100), a: e(r3.a) };
751		- })({ h: Number(n2), s: Number(a2), v: Number(o2), a: Number(s2) });
752		- return b(h2);
	848	+var N = /^hsla?\(\s*([+-]?(?:\d*\.\d+|\d+))(deg|rad|grad|turn)?\s*,\s*([+-]?(?:\d*\.\d+|\d+))%\s*,\s*([+-]?(?:\d*\.\d+|\d+))%\s*(?:,\s*([+-]?(?:\d*\.\d+|\d+))(%)?\s*)?\)$/i;
	849	+var x = /^hsla?\(\s*([+-]?(?:\d*\.\d+|\d+))(deg|rad|grad|turn)?\s+([+-]?(?:\d*\.\d+|\d+))%\s+([+-]?(?:\d*\.\d+|\d+))%\s*(?:\/\s*([+-]?(?:\d*\.\d+|\d+))(%)?\s*)?\)$/i;
	850	+var M = /^rgba?\(\s*([+-]?(?:\d*\.\d+|\d+))(%)?\s*,\s*([+-]?(?:\d*\.\d+|\d+))(%)?\s*,\s*([+-]?(?:\d*\.\d+|\d+))(%)?\s*(?:,\s*([+-]?(?:\d*\.\d+|\d+))(%)?\s*)?\)$/i;
	851	+var H = /^rgba?\(\s*([+-]?(?:\d*\.\d+|\d+))(%)?\s+([+-]?(?:\d*\.\d+|\d+))(%)?\s+([+-]?(?:\d*\.\d+|\d+))(%)?\s*(?:\/\s*([+-]?(?:\d*\.\d+|\d+))(%)?\s*)?\)$/i;
	852	+var $ = { string: [[function(r) {
	853	+ if (!s.test(r)) return null;
	854	+ var t = r.length;
	855	+ return t <= 5 ? { r: 17 * d(r, 1), g: 17 * d(r, 2), b: 17 * d(r, 3), a: 5 === t ? n(17 * d(r, 4) / 255, 2) : 1 } : 7 === t || 9 === t ? { r: h(r, 1), g: h(r, 3), b: h(r, 5), a: 9 === t ? n(h(r, 7) / 255, 2) : 1 } : null;
	856	+}, "hex"], [function(r) {
	857	+ var t = M.exec(r) || H.exec(r);
	858	+ return t ? t[2] !== t[4] || t[4] !== t[6] ? null : a({ r: Number(t[1]) / (t[2] ? 100 / 255 : 1), g: Number(t[3]) / (t[4] ? 100 / 255 : 1), b: Number(t[5]) / (t[6] ? 100 / 255 : 1), a: void 0 === t[7] ? 1 : Number(t[7]) / (t[8] ? 100 : 1) }) : null;
	859	+}, "rgb"], [function(t) {
	860	+ var n = N.exec(t) || x.exec(t);
	861	+ if (!n) return null;
	862	+ var u, e, o = l({ h: (u = n[1], e = n[2], void 0 === e && (e = "deg"), Number(u) * (r[e] || 1)), s: Number(n[3]), l: Number(n[4]), a: void 0 === n[5] ? 1 : Number(n[5]) / (n[6] ? 100 : 1) });
	863	+ return m(o);
	864	+}, "hsl"]], object: [[function(r) {
	865	+ var n = r.r, u = r.g, e = r.b, o = r.a, i = void 0 === o ? 1 : o;
	866	+ return t(n) && t(u) && t(e) ? a({ r: Number(n), g: Number(u), b: Number(e), a: Number(i) }) : null;
	867	+}, "rgb"], [function(r) {
	868	+ var n = r.h, u = r.s, e = r.l, o = r.a, a = void 0 === o ? 1 : o;
	869	+ if (!t(n) || !t(u) || !t(e)) return null;
	870	+ var i = l({ h: Number(n), s: Number(u), l: Number(e), a: Number(a) });
	871	+ return m(i);
	872	+}, "hsl"], [function(r) {
	873	+ var n = r.h, o = r.s, a = r.v, i = r.a, s = void 0 === i ? 1 : i;
	874	+ if (!t(n) || !t(o) || !t(a)) return null;
	875	+ var d = (function(r2) {
	876	+ return { h: e(r2.h), s: u(r2.s, 0, 100), v: u(r2.v, 0, 100), a: u(r2.a) };
	877	+ })({ h: Number(n), s: Number(o), v: Number(a), a: Number(s) });
	878	+ return v(d);
753	879	}, "hsv"]] };
754		-var N = function(r2, t2) {
755		- for (var n2 = 0; n2 < t2.length; n2++) {
756		- var e2 = t2[n2][0](r2);
757		- if (e2) return [e2, t2[n2][1]];
	880	+var j = function(r, t) {
	881	+ for (var n = 0; n < t.length; n++) {
	882	+ var u = t[n][0](r);
	883	+ if (u) return [u, t[n][1]];
758	884	}
759	885	return [null, void 0];
760	886	};
761		-var x = function(r2) {
762		- return "string" == typeof r2 ? N(r2.trim(), y.string) : "object" == typeof r2 && null !== r2 ? N(r2, y.object) : [null, void 0];
	887	+var w = function(r) {
	888	+ return "string" == typeof r ? j(r.trim(), $.string) : "object" == typeof r && null !== r ? j(r, $.object) : [null, void 0];
763	889	};
764		-var M = function(r2, t2) {
765		- var n2 = c(r2);
766		- return { h: n2.h, s: e(n2.s + 100 * t2, 0, 100), l: n2.l, a: n2.a };
	890	+var k = function(r, t) {
	891	+ var n = y(r);
	892	+ return { h: n.h, s: u(n.s + 100 * t, 0, 100), l: n.l, a: n.a };
767	893	};
768		-var H = function(r2) {
769		- return (299 * r2.r + 587 * r2.g + 114 * r2.b) / 1e3 / 255;
	894	+var E = function(r) {
	895	+ return (299 * r.r + 587 * r.g + 114 * r.b) / 1e3 / 255;
770	896	};
771		-var $ = function(r2, t2) {
772		- var n2 = c(r2);
773		- return { h: n2.h, s: n2.s, l: e(n2.l + 100 * t2, 0, 100), a: n2.a };
	897	+var R = function(r, t) {
	898	+ var n = y(r);
	899	+ return { h: n.h, s: n.s, l: u(n.l + 100 * t, 0, 100), a: n.a };
774	900	};
775		-var j = (function() {
776		- function r2(r3) {
777		- this.parsed = x(r3)[0], this.rgba = this.parsed || { r: 0, g: 0, b: 0, a: 1 };
	901	+var q = (function() {
	902	+ function r(r2) {
	903	+ this.parsed = w(r2)[0], this.rgba = this.parsed || { r: 0, g: 0, b: 0, a: 1 };
778	904	}
779		- return r2.prototype.isValid = function() {
	905	+ return r.prototype.isValid = function() {
780	906	return null !== this.parsed;
781		- }, r2.prototype.brightness = function() {
782		- return n(H(this.rgba), 2);
783		- }, r2.prototype.isDark = function() {
784		- return H(this.rgba) < 0.5;
785		- }, r2.prototype.isLight = function() {
786		- return H(this.rgba) >= 0.5;
787		- }, r2.prototype.toHex = function() {
788		- return r3 = o(this.rgba), t2 = r3.r, e2 = r3.g, u2 = r3.b, i2 = (a2 = r3.a) < 1 ? s(n(255 * a2)) : "", "#" + s(t2) + s(e2) + s(u2) + i2;
789		- var r3, t2, e2, u2, a2, i2;
790		- }, r2.prototype.toRgb = function() {
791		- return o(this.rgba);
792		- }, r2.prototype.toRgbString = function() {
793		- return r3 = o(this.rgba), t2 = r3.r, n2 = r3.g, e2 = r3.b, (u2 = r3.a) < 1 ? "rgba(" + t2 + ", " + n2 + ", " + e2 + ", " + u2 + ")" : "rgb(" + t2 + ", " + n2 + ", " + e2 + ")";
794		- var r3, t2, n2, e2, u2;
795		- }, r2.prototype.toHsl = function() {
796		- return d(c(this.rgba));
797		- }, r2.prototype.toHslString = function() {
798		- return r3 = d(c(this.rgba)), t2 = r3.h, n2 = r3.s, e2 = r3.l, (u2 = r3.a) < 1 ? "hsla(" + t2 + ", " + n2 + "%, " + e2 + "%, " + u2 + ")" : "hsl(" + t2 + ", " + n2 + "%, " + e2 + "%)";
799		- var r3, t2, n2, e2, u2;
800		- }, r2.prototype.toHsv = function() {
801		- return r3 = h(this.rgba), { h: n(r3.h), s: n(r3.s), v: n(r3.v), a: n(r3.a, 3) };
802		- var r3;
803		- }, r2.prototype.invert = function() {
804		- return w({ r: 255 - (r3 = this.rgba).r, g: 255 - r3.g, b: 255 - r3.b, a: r3.a });
805		- var r3;
806		- }, r2.prototype.saturate = function(r3) {
807		- return void 0 === r3 && (r3 = 0.1), w(M(this.rgba, r3));
808		- }, r2.prototype.desaturate = function(r3) {
809		- return void 0 === r3 && (r3 = 0.1), w(M(this.rgba, -r3));
810		- }, r2.prototype.grayscale = function() {
811		- return w(M(this.rgba, -1));
812		- }, r2.prototype.lighten = function(r3) {
813		- return void 0 === r3 && (r3 = 0.1), w($(this.rgba, r3));
814		- }, r2.prototype.darken = function(r3) {
815		- return void 0 === r3 && (r3 = 0.1), w($(this.rgba, -r3));
816		- }, r2.prototype.rotate = function(r3) {
817		- return void 0 === r3 && (r3 = 15), this.hue(this.hue() + r3);
818		- }, r2.prototype.alpha = function(r3) {
819		- return "number" == typeof r3 ? w({ r: (t2 = this.rgba).r, g: t2.g, b: t2.b, a: r3 }) : n(this.rgba.a, 3);
820		- var t2;
821		- }, r2.prototype.hue = function(r3) {
822		- var t2 = c(this.rgba);
823		- return "number" == typeof r3 ? w({ h: r3, s: t2.s, l: t2.l, a: t2.a }) : n(t2.h);
824		- }, r2.prototype.isEqual = function(r3) {
825		- return this.toHex() === w(r3).toHex();
826		- }, r2;
	907	+ }, r.prototype.brightness = function() {
	908	+ return n(E(this.rgba), 2);
	909	+ }, r.prototype.isDark = function() {
	910	+ return E(this.rgba) < 0.5;
	911	+ }, r.prototype.isLight = function() {
	912	+ return E(this.rgba) >= 0.5;
	913	+ }, r.prototype.toHex = function() {
	914	+ return r2 = i(this.rgba), t = r2.r, u = r2.g, e = r2.b, a = (o = r2.a) < 1 ? g(n(255 * o)) : "", "#" + g(t) + g(u) + g(e) + a;
	915	+ var r2, t, u, e, o, a;
	916	+ }, r.prototype.toRgb = function() {
	917	+ return i(this.rgba);
	918	+ }, r.prototype.toRgbString = function() {
	919	+ return r2 = i(this.rgba), t = r2.r, n = r2.g, u = r2.b, (e = r2.a) < 1 ? "rgba(" + t + ", " + n + ", " + u + ", " + e + ")" : "rgb(" + t + ", " + n + ", " + u + ")";
	920	+ var r2, t, n, u, e;
	921	+ }, r.prototype.toHsl = function() {
	922	+ return p(y(this.rgba));
	923	+ }, r.prototype.toHslString = function() {
	924	+ return r2 = p(y(this.rgba)), t = r2.h, n = r2.s, u = r2.l, (e = r2.a) < 1 ? "hsla(" + t + ", " + n + "%, " + u + "%, " + e + ")" : "hsl(" + t + ", " + n + "%, " + u + "%)";
	925	+ var r2, t, n, u, e;
	926	+ }, r.prototype.toHsv = function() {
	927	+ return r2 = c(this.rgba), { h: o(r2.h), s: n(r2.s), v: n(r2.v), a: n(r2.a, 3) };
	928	+ var r2;
	929	+ }, r.prototype.invert = function() {
	930	+ return A({ r: 255 - (r2 = this.rgba).r, g: 255 - r2.g, b: 255 - r2.b, a: r2.a });
	931	+ var r2;
	932	+ }, r.prototype.saturate = function(r2) {
	933	+ return void 0 === r2 && (r2 = 0.1), A(k(this.rgba, r2));
	934	+ }, r.prototype.desaturate = function(r2) {
	935	+ return void 0 === r2 && (r2 = 0.1), A(k(this.rgba, -r2));
	936	+ }, r.prototype.grayscale = function() {
	937	+ return A(k(this.rgba, -1));
	938	+ }, r.prototype.lighten = function(r2) {
	939	+ return void 0 === r2 && (r2 = 0.1), A(R(this.rgba, r2));
	940	+ }, r.prototype.darken = function(r2) {
	941	+ return void 0 === r2 && (r2 = 0.1), A(R(this.rgba, -r2));
	942	+ }, r.prototype.rotate = function(r2) {
	943	+ return void 0 === r2 && (r2 = 15), this.hue(y(this.rgba).h + r2);
	944	+ }, r.prototype.alpha = function(r2) {
	945	+ return "number" == typeof r2 ? A({ r: (t = this.rgba).r, g: t.g, b: t.b, a: r2 }) : n(this.rgba.a, 3);
	946	+ var t;
	947	+ }, r.prototype.hue = function(r2) {
	948	+ var t = y(this.rgba);
	949	+ return "number" == typeof r2 ? A({ h: r2, s: t.s, l: t.l, a: t.a }) : o(t.h);
	950	+ }, r.prototype.isEqual = function(r2) {
	951	+ return this.toHex() === A(r2).toHex();
	952	+ }, r;
827	953	})();
828		-var w = function(r2) {
829		- return r2 instanceof j ? r2 : new j(r2);
	954	+var A = function(r) {
	955	+ return r instanceof q ? r : new q(r);
830	956	};
831	957
832	958	// packages/global-styles-engine/build-module/utils/duotone.mjs
833	959	function getValuesFromColors(colors = []) {
		@@ -837,9 +963,9 @@
837	963	b: [],
838	964	a: []
839	965	};
840	966	colors.forEach((color) => {
841		- const rgbColor = w(color).toRgb();
	967	+ const rgbColor = A(color).toRgb();
842	968	values.r.push(rgbColor.r / 255);
843	969	values.g.push(rgbColor.g / 255);
844	970	values.b.push(rgbColor.b / 255);
845	971	values.a.push(rgbColor.a);
		@@ -923,11 +1049,13 @@
923	1049	backgroundSize: "cover",
924	1050	backgroundPosition: "50% 50%"
925	1051	// used only when backgroundSize is 'contain'.
926	1052	};
	1053	+function hasImageUrl(backgroundImage) {
	1054	+ return typeof backgroundImage === "object" && backgroundImage !== null && "url" in backgroundImage && !!backgroundImage.url;
	1055	+}
927	1056	function setBackgroundStyleDefaults(backgroundStyle) {
928		- if (!backgroundStyle || // @ts-expect-error
929		- !backgroundStyle?.backgroundImage?.url) {
	1057	+ if (!backgroundStyle || !hasImageUrl(backgroundStyle.backgroundImage)) {
930	1058	return;
931	1059	}
932	1060	let backgroundStylesWithDefaults;
933	1061	if (!backgroundStyle?.backgroundSize) {
		@@ -1115,8 +1243,84 @@
1115	1243	]
1116	1244	}
1117	1245	};
1118	1246
	1247	+// packages/global-styles-engine/build-module/utils/viewport.mjs
	1248	+var DEFAULT_VIEWPORT_BREAKPOINTS = {
	1249	+ mobile: "480px",
	1250	+ tablet: "782px"
	1251	+};
	1252	+var VIEWPORT_SIZE_REGEXP = /^(\d+|\d*\.\d+)(px|em|rem)$/;
	1253	+var DEFAULT_FONT_SIZE = 16;
	1254	+function isViewportSettings(configOrSettings) {
	1255	+ return "mobile" in configOrSettings || "tablet" in configOrSettings;
	1256	+}
	1257	+function getViewportSettings(configOrSettings) {
	1258	+ if (!configOrSettings || typeof configOrSettings !== "object") {
	1259	+ return {};
	1260	+ }
	1261	+ if (isViewportSettings(configOrSettings)) {
	1262	+ return configOrSettings;
	1263	+ }
	1264	+ return configOrSettings.settings?.viewport ?? {};
	1265	+}
	1266	+function isValidViewportSize(value) {
	1267	+ return typeof value === "string" && VIEWPORT_SIZE_REGEXP.test(value.trim());
	1268	+}
	1269	+function getViewportBreakpointValueInPixels(value) {
	1270	+ if (typeof value === "number") {
	1271	+ return value;
	1272	+ }
	1273	+ if (typeof value !== "string") {
	1274	+ return void 0;
	1275	+ }
	1276	+ const match = value.trim().match(VIEWPORT_SIZE_REGEXP);
	1277	+ if (!match) {
	1278	+ return void 0;
	1279	+ }
	1280	+ const numericValue = Number.parseFloat(match[1]);
	1281	+ const unit = match[2];
	1282	+ return unit === "px" ? numericValue : numericValue * DEFAULT_FONT_SIZE;
	1283	+}
	1284	+function getViewportBreakpoints(configOrSettings) {
	1285	+ const viewportSettings = getViewportSettings(configOrSettings);
	1286	+ const breakpoints = {};
	1287	+ const breakpointValuesInPixels = {};
	1288	+ Object.keys(DEFAULT_VIEWPORT_BREAKPOINTS).forEach((breakpoint) => {
	1289	+ const key = breakpoint;
	1290	+ const value = viewportSettings[key];
	1291	+ const px = getViewportBreakpointValueInPixels(value);
	1292	+ if (px !== void 0 && isValidViewportSize(value)) {
	1293	+ breakpoints[key] = value.trim();
	1294	+ breakpointValuesInPixels[key] = px;
	1295	+ }
	1296	+ });
	1297	+ const breakpointNames = Object.keys(breakpoints);
	1298	+ if (!breakpointNames.length) {
	1299	+ return { ...DEFAULT_VIEWPORT_BREAKPOINTS };
	1300	+ }
	1301	+ if (1 === breakpointNames.length) {
	1302	+ return breakpoints;
	1303	+ }
	1304	+ const mobile = breakpoints.mobile;
	1305	+ const tablet = breakpoints.tablet;
	1306	+ if (breakpointValuesInPixels.mobile >= breakpointValuesInPixels.tablet) {
	1307	+ return { mobile };
	1308	+ }
	1309	+ return { mobile, tablet };
	1310	+}
	1311	+function getResponsiveMediaQueries(configOrSettings) {
	1312	+ const breakpoints = getViewportBreakpoints(configOrSettings);
	1313	+ const mediaQueries = {};
	1314	+ if (breakpoints.mobile) {
	1315	+ mediaQueries["@mobile"] = `@media (width <= ${breakpoints.mobile})`;
	1316	+ }
	1317	+ if (breakpoints.tablet) {
	1318	+ mediaQueries["@tablet"] = breakpoints.mobile ? `@media (${breakpoints.mobile} < width <= ${breakpoints.tablet})` : `@media (width <= ${breakpoints.tablet})`;
	1319	+ }
	1320	+ return mediaQueries;
	1321	+}
	1322	+
1119	1323	// packages/global-styles-engine/build-module/core/render.mjs
1120	1324	var ELEMENT_CLASS_NAMES = {
1121	1325	button: "wp-element-button",
1122	1326	caption: "wp-element-caption"
		@@ -1131,8 +1335,28 @@
1131	1335	var VALID_BLOCK_PSEUDO_SELECTORS = {
1132	1336	"core/button": [":hover", ":focus", ":focus-visible", ":active"],
1133	1337	"core/navigation-link": [":hover", ":focus", ":focus-visible", ":active"]
1134	1338	};
	1339	+var VALID_ELEMENT_PSEUDO_SELECTORS = {
	1340	+ link: [
	1341	+ ":link",
	1342	+ ":any-link",
	1343	+ ":visited",
	1344	+ ":hover",
	1345	+ ":focus",
	1346	+ ":focus-visible",
	1347	+ ":active"
	1348	+ ],
	1349	+ button: [
	1350	+ ":link",
	1351	+ ":any-link",
	1352	+ ":visited",
	1353	+ ":hover",
	1354	+ ":focus",
	1355	+ ":focus-visible",
	1356	+ ":active"
	1357	+ ]
	1358	+};
1135	1359	function getPresetsClasses(blockSelector = "*", blockPresets = {}) {
1136	1360	return PRESET_METADATA.reduce(
1137	1361	(declarations, { path, cssVarInfix, classes }) => {
1138	1362	if (!classes) {
		@@ -1154,11 +1378,9 @@
1154	1378	}) => {
1155	1379	const classSelectorToUse = `.has-${kebabCase(
1156	1380	slug
1157	1381	)}-${classSuffix}`;
1158		- const selectorToUse = blockSelector.split(",").map(
1159		- (selector) => `${selector}${classSelectorToUse}`
1160		- ).join(",");
	1382	+ const selectorToUse = blockSelector ? `:where(${blockSelector})${classSelectorToUse}` : classSelectorToUse;
1161	1383	const value = `var(--wp--preset--${cssVarInfix}--${kebabCase(
1162	1384	slug
1163	1385	)})`;
1164	1386	declarations += `${selectorToUse}{${propertyName}: ${value} !important;}`;
		@@ -1182,9 +1404,9 @@
1182	1404	blockPresets,
1183	1405	metadata.path,
1184	1406	{}
1185	1407	);
1186		- return ["default", "theme"].filter((origin) => presetByOrigin[origin]).flatMap(
	1408	+ return ["default", "theme", "custom"].filter((origin) => presetByOrigin[origin]).flatMap(
1187	1409	(origin) => presetByOrigin[origin].map(
1188	1410	(preset) => getDuotoneFilter(
1189	1411	`wp-duotone-${preset.slug}`,
1190	1412	preset.colors
		@@ -1206,18 +1428,8 @@
1206	1428	}
1207	1429	});
1208	1430	return result;
1209	1431	}
1210		-function concatFeatureVariationSelectorString(featureSelector, styleVariationSelector) {
1211		- const featureSelectors = featureSelector.split(",");
1212		- const combinedSelectors = [];
1213		- featureSelectors.forEach((selector) => {
1214		- combinedSelectors.push(
1215		- `${styleVariationSelector.trim()}${selector.trim()}`
1216		- );
1217		- });
1218		- return combinedSelectors.join(", ");
1219		-}
1220	1432	var updateParagraphTextIndentSelector = (featureDeclarations, settings, blockName) => {
1221	1433	if (blockName !== "core/paragraph") {
1222	1434	return featureDeclarations;
1223	1435	}
		@@ -1414,9 +1626,10 @@
1414	1626	hasFallbackGapSupport,
1415	1627	fallbackGapValue
1416	1628	}) {
1417	1629	let ruleset = "";
1418		- let gapValue = hasBlockGapSupport ? getGapCSSValue(style?.spacing?.blockGap) : "";
	1630	+ const blockGapValue = style?.spacing?.blockGap;
	1631	+ let gapValue = hasBlockGapSupport ? getGapCSSValue(blockGapValue) : "";
1419	1632	if (hasFallbackGapSupport) {
1420	1633	if (selector === ROOT_BLOCK_SELECTOR) {
1421	1634	gapValue = !gapValue ? "0.5em" : gapValue;
1422	1635	} else if (!hasBlockGapSupport && fallbackGapValue) {
		@@ -1422,8 +1635,9 @@
1422	1635	} else if (!hasBlockGapSupport && fallbackGapValue) {
1423	1636	gapValue = fallbackGapValue;
1424	1637	}
1425	1638	}
	1639	+ const rowGapValue = hasBlockGapSupport && blockGapValue && typeof blockGapValue !== "string" ? getGapCSSValue(blockGapValue.top) : gapValue;
1426	1640	if (gapValue && layoutDefinitions) {
1427	1641	Object.values(layoutDefinitions).forEach(
1428	1642	({ className, name, spacingStyles }) => {
1429	1643	if (!hasBlockGapSupport && "flex" !== name && "grid" !== name) {
		@@ -1428,8 +1642,11 @@
1428	1642	({ className, name, spacingStyles }) => {
1429	1643	if (!hasBlockGapSupport && "flex" !== name && "grid" !== name) {
1430	1644	return;
1431	1645	}
	1646	+ const layoutGapValue = ["default", "constrained"].includes(
	1647	+ name
	1648	+ ) ? rowGapValue : gapValue;
1432	1649	if (spacingStyles?.length) {
1433	1650	spacingStyles.forEach((spacingStyle) => {
1434	1651	const declarations = [];
1435	1652	if (spacingStyle.rules) {
		@@ -1435,9 +1652,9 @@
1435	1652	if (spacingStyle.rules) {
1436	1653	Object.entries(spacingStyle.rules).forEach(
1437	1654	([cssProperty, cssValue]) => {
1438	1655	declarations.push(
1439		- `${cssProperty}: ${cssValue ? cssValue : gapValue}`
	1656	+ `${cssProperty}: ${cssValue ? cssValue : layoutGapValue}`
1440	1657	);
1441	1658	}
1442	1659	);
1443	1660	}
		@@ -1502,12 +1719,16 @@
1502	1719	"outline",
1503	1720	"shadow",
1504	1721	"background"
1505	1722	];
1506		-function pickStyleKeys(treeToPickFrom) {
1507		- return pickStyleAndPseudoKeys(treeToPickFrom);
	1723	+function pickStyleKeys(treeToPickFrom, responsiveMediaQueries) {
	1724	+ return pickStyleAndPseudoKeys(
	1725	+ treeToPickFrom,
	1726	+ void 0,
	1727	+ responsiveMediaQueries
	1728	+ );
1508	1729	}
1509		-function pickStyleAndPseudoKeys(treeToPickFrom, blockName) {
	1730	+function pickStyleAndPseudoKeys(treeToPickFrom, blockName, responsiveMediaQueries) {
1510	1731	if (!treeToPickFrom) {
1511	1732	return {};
1512	1733	}
1513	1734	const entries = Object.entries(treeToPickFrom);
		@@ -1512,9 +1733,9 @@
1512	1733	}
1513	1734	const entries = Object.entries(treeToPickFrom);
1514	1735	const allowedPseudoSelectors = blockName ? VALID_BLOCK_PSEUDO_SELECTORS[blockName] ?? [] : [];
1515	1736	const pickedEntries = entries.filter(
1516		- ([key]) => STYLE_KEYS.includes(key) || allowedPseudoSelectors.includes(key)
	1737	+ ([key]) => STYLE_KEYS.includes(key) || allowedPseudoSelectors.includes(key) || responsiveMediaQueries[key]
1517	1738	);
1518	1739	const clonedEntries = pickedEntries.map(([key, style]) => [
1519	1740	key,
1520	1741	JSON.parse(JSON.stringify(style))
		@@ -1520,67 +1741,96 @@
1520	1741	JSON.parse(JSON.stringify(style))
1521	1742	]);
1522	1743	return Object.fromEntries(clonedEntries);
1523	1744	}
1524		-function appendPseudoSelectorStyles(styles, selector, ruleset, featureSelectors, treeSettings, blockName, styleVariationSelector) {
1525		- const pseudoSelectorStyles = Object.entries(styles).filter(
1526		- ([key]) => key.startsWith(":")
1527		- );
1528		- if (!pseudoSelectorStyles.length) {
1529		- return ruleset;
	1745	+function getPseudoStyleNodes(node) {
	1746	+ const {
	1747	+ styles,
	1748	+ selector,
	1749	+ featureSelectors,
	1750	+ name,
	1751	+ elementName,
	1752	+ mediaQuery,
	1753	+ variationName
	1754	+ } = node;
	1755	+ const pseudoSelectors = name ? VALID_BLOCK_PSEUDO_SELECTORS[name] ?? [] : VALID_ELEMENT_PSEUDO_SELECTORS[elementName ?? ""] ?? [];
	1756	+ if (!pseudoSelectors.length) {
	1757	+ return [];
1530	1758	}
1531		- pseudoSelectorStyles.forEach(([pseudoKey, pseudoStyle]) => {
1532		- if (!pseudoStyle || typeof pseudoStyle !== "object") {
1533		- return;
	1759	+ return pseudoSelectors.flatMap((pseudoSelector) => {
	1760	+ const pseudoStyles = styles?.[pseudoSelector];
	1761	+ if (!pseudoStyles || typeof pseudoStyles !== "object") {
	1762	+ return [];
1534	1763	}
1535		- const remainingPseudoStyles = JSON.parse(
1536		- JSON.stringify(pseudoStyle)
1537		- );
1538		- if (featureSelectors && typeof featureSelectors !== "string") {
1539		- let pseudoFeatureDeclarations = getFeatureDeclarations(
1540		- featureSelectors,
1541		- remainingPseudoStyles
1542		- );
1543		- pseudoFeatureDeclarations = updateParagraphTextIndentSelector(
1544		- pseudoFeatureDeclarations,
1545		- treeSettings,
1546		- blockName
1547		- );
1548		- pseudoFeatureDeclarations = updateButtonWidthDeclarations(
1549		- pseudoFeatureDeclarations,
1550		- treeSettings
1551		- );
1552		- Object.entries(pseudoFeatureDeclarations).forEach(
1553		- ([baseSelector, declarations]) => {
1554		- if (!declarations.length) {
1555		- return;
1556		- }
1557		- const pseudoFeatureSelector = appendToSelector(
1558		- baseSelector,
1559		- pseudoKey
1560		- );
1561		- const cssSelector = styleVariationSelector ? concatFeatureVariationSelectorString(
1562		- pseudoFeatureSelector,
1563		- styleVariationSelector
1564		- ) : pseudoFeatureSelector;
1565		- const rules = declarations.join(";");
1566		- ruleset += `:root :where(${cssSelector}){${rules};}`;
	1764	+ return [
	1765	+ {
	1766	+ styles: JSON.parse(JSON.stringify(pseudoStyles)),
	1767	+ selector,
	1768	+ selectorSuffix: pseudoSelector,
	1769	+ mediaQuery,
	1770	+ featureSelectors: featureSelectors && typeof featureSelectors !== "string" ? featureSelectors : void 0,
	1771	+ name,
	1772	+ elementName,
	1773	+ variationName
	1774	+ }
	1775	+ ];
	1776	+ });
	1777	+}
	1778	+function getResponsiveStyleNodes(node, responsiveMediaQueries) {
	1779	+ const {
	1780	+ styles,
	1781	+ selector,
	1782	+ fallbackGapValue,
	1783	+ featureSelectors,
	1784	+ hasLayoutSupport,
	1785	+ layoutHasBlockGapSupport,
	1786	+ layoutSelector,
	1787	+ name,
	1788	+ elementName,
	1789	+ isStyleVariation,
	1790	+ variationName
	1791	+ } = node;
	1792	+ if (!name && !elementName) {
	1793	+ return [];
	1794	+ }
	1795	+ return Object.entries(responsiveMediaQueries).flatMap(
	1796	+ ([breakpointKey, mediaQuery]) => {
	1797	+ const breakpointStyles = styles?.[breakpointKey];
	1798	+ if (!breakpointStyles || typeof breakpointStyles !== "object") {
	1799	+ return [];
	1800	+ }
	1801	+ return [
	1802	+ {
	1803	+ styles: JSON.parse(JSON.stringify(breakpointStyles)),
	1804	+ selector,
	1805	+ mediaQuery,
	1806	+ featureSelectors: featureSelectors && typeof featureSelectors !== "string" ? featureSelectors : void 0,
	1807	+ fallbackGapValue,
	1808	+ hasLayoutSupport,
	1809	+ name,
	1810	+ elementName,
	1811	+ isStyleVariation,
	1812	+ variationName,
	1813	+ layoutSelector,
	1814	+ layoutHasBlockGapSupport
1567	1815	}
1568		- );
	1816	+ ];
1569	1817	}
1570		- const pseudoDeclarations = getStylesDeclarations(
1571		- remainingPseudoStyles
	1818	+ );
	1819	+}
	1820	+function getElementStylesByName(styleNode, responsiveMediaQueries) {
	1821	+ const elementStylesByName = { ...styleNode?.elements ?? {} };
	1822	+ Object.keys(responsiveMediaQueries).forEach((breakpointKey) => {
	1823	+ Object.entries(styleNode?.[breakpointKey]?.elements ?? {}).forEach(
	1824	+ ([elementName, styles]) => {
	1825	+ elementStylesByName[elementName] = {
	1826	+ ...elementStylesByName[elementName] ?? {},
	1827	+ [breakpointKey]: styles
	1828	+ };
	1829	+ }
1572	1830	);
1573		- if (!pseudoDeclarations.length) {
1574		- return;
1575		- }
1576		- const pseudoSelector = appendToSelector(selector, pseudoKey);
1577		- const pseudoRule = `:root :where(${pseudoSelector}){${pseudoDeclarations.join(
1578		- ";"
1579		- )};}`;
1580		- ruleset += pseudoRule;
1581	1831	});
1582		- return ruleset;
	1832	+ return elementStylesByName;
1583	1833	}
1584	1834	var getNodesWithStyles = (tree, blockSelectors) => {
1585	1835	const nodes = [];
1586	1836	if (!tree?.styles) {
		@@ -1585,9 +1835,10 @@
1585	1835	const nodes = [];
1586	1836	if (!tree?.styles) {
1587	1837	return nodes;
1588	1838	}
1589		- const styles = pickStyleKeys(tree.styles);
	1839	+ const responsiveMediaQueries = getResponsiveMediaQueries(tree);
	1840	+ const styles = pickStyleKeys(tree.styles, responsiveMediaQueries);
1590	1841	if (styles) {
1591	1842	nodes.push({
1592	1843	styles,
1593	1844	selector: ROOT_BLOCK_SELECTOR,
		@@ -1600,8 +1851,9 @@
1600	1851	if (tree.styles?.elements?.[name]) {
1601	1852	nodes.push({
1602	1853	styles: tree.styles?.elements?.[name] ?? {},
1603	1854	selector,
	1855	+ elementName: name,
1604	1856	// Top level elements that don't use a class name should not receive the
1605	1857	// `:root :where()` wrapper to maintain backwards compatibility.
1606	1858	skipSelectorWrapper: !ELEMENT_CLASS_NAMES[name]
1607	1859	});
		@@ -1608,26 +1860,49 @@
1608	1860	}
1609	1861	});
1610	1862	Object.entries(tree.styles?.blocks ?? {}).forEach(
1611	1863	([blockName, node]) => {
1612		- const blockStyles = pickStyleAndPseudoKeys(node, blockName);
	1864	+ const blockStyles = pickStyleAndPseudoKeys(
	1865	+ node,
	1866	+ blockName,
	1867	+ responsiveMediaQueries
	1868	+ );
1613	1869	const typedNode = node;
1614	1870	const variationNodesToAdd = [];
	1871	+ const variationStyleNodesToAdd = [];
1615	1872	if (typedNode?.variations) {
1616		- const variations = {};
1617	1873	Object.entries(typedNode.variations).forEach(
1618	1874	([variationName, variation]) => {
1619	1875	const typedVariation = variation;
1620		- variations[variationName] = pickStyleAndPseudoKeys(
	1876	+ const variationStyles = pickStyleAndPseudoKeys(
1621	1877	typedVariation,
1622		- blockName
	1878	+ blockName,
	1879	+ responsiveMediaQueries
1623	1880	);
1624	1881	if (typedVariation?.css) {
1625		- variations[variationName].css = typedVariation.css;
	1882	+ variationStyles.css = typedVariation.css;
1626	1883	}
1627	1884	const variationSelector = typeof blockSelectors !== "string" ? blockSelectors[blockName]?.styleVariationSelectors?.[variationName] : void 0;
	1885	+ if (variationSelector && typeof blockSelectors !== "string") {
	1886	+ const blockSelector = blockSelectors[blockName];
	1887	+ variationStyleNodesToAdd.push({
	1888	+ styles: variationStyles,
	1889	+ selector: variationSelector,
	1890	+ featureSelectors: blockSelector?.featureSelectors,
	1891	+ fallbackGapValue: blockSelector?.fallbackGapValue,
	1892	+ hasLayoutSupport: blockSelector?.hasLayoutSupport,
	1893	+ isStyleVariation: true,
	1894	+ variationName,
	1895	+ layoutSelector: variationSelector + blockSelector.selector,
	1896	+ layoutHasBlockGapSupport: true,
	1897	+ name: blockName
	1898	+ });
	1899	+ }
1628	1900	Object.entries(
1629		- typedVariation?.elements ?? {}
	1901	+ getElementStylesByName(
	1902	+ typedVariation,
	1903	+ responsiveMediaQueries
	1904	+ )
1630	1905	).forEach(([element, elementStyles]) => {
1631	1906	if (elementStyles && import_blocks.__EXPERIMENTAL_ELEMENTS[element]) {
1632	1907	variationNodesToAdd.push({
1633	1908	styles: elementStyles,
		@@ -1633,9 +1908,11 @@
1633	1908	styles: elementStyles,
1634	1909	selector: scopeSelector(
1635	1910	variationSelector,
1636	1911	import_blocks.__EXPERIMENTAL_ELEMENTS[element]
1637		- )
	1912	+ ),
	1913	+ elementName: element,
	1914	+ isStyleVariation: true
1638	1915	});
1639	1916	}
1640	1917	});
1641	1918	Object.entries(typedVariation?.blocks ?? {}).forEach(
		@@ -1656,9 +1933,10 @@
1656	1933	blockSelectors[variationBlockName]?.featureSelectors ?? {}
1657	1934	) : void 0;
1658	1935	const variationBlockStyleNodes = pickStyleAndPseudoKeys(
1659	1936	variationBlockStyles,
1660		- variationBlockName
	1937	+ variationBlockName,
	1938	+ responsiveMediaQueries
1661	1939	);
1662	1940	if (variationBlockStyles?.css) {
1663	1941	variationBlockStyleNodes.css = variationBlockStyles.css;
1664	1942	}
		@@ -1666,8 +1944,10 @@
1666	1944	return;
1667	1945	}
1668	1946	variationNodesToAdd.push({
1669	1947	selector: variationBlockSelector,
	1948	+ name: variationBlockName,
	1949	+ isStyleVariation: true,
1670	1950	duotoneSelector: variationDuotoneSelector,
1671	1951	featureSelectors: variationFeatureSelectors,
1672	1952	fallbackGapValue: blockSelectors[variationBlockName]?.fallbackGapValue,
1673	1953	hasLayoutSupport: blockSelectors[variationBlockName]?.hasLayoutSupport,
		@@ -1673,9 +1953,12 @@
1673	1953	hasLayoutSupport: blockSelectors[variationBlockName]?.hasLayoutSupport,
1674	1954	styles: variationBlockStyleNodes
1675	1955	});
1676	1956	Object.entries(
1677		- variationBlockStyles.elements ?? {}
	1957	+ getElementStylesByName(
	1958	+ variationBlockStyles,
	1959	+ responsiveMediaQueries
	1960	+ )
1678	1961	).forEach(
1679	1962	([
1680	1963	variationBlockElement,
1681	1964	variationBlockElementStyles
		@@ -1685,9 +1968,11 @@
1685	1968	styles: variationBlockElementStyles,
1686	1969	selector: scopeSelector(
1687	1970	variationBlockSelector,
1688	1971	import_blocks.__EXPERIMENTAL_ELEMENTS[variationBlockElement]
1689		- )
	1972	+ ),
	1973	+ elementName: variationBlockElement,
	1974	+ isStyleVariation: true
1690	1975	});
1691	1976	}
1692	1977	}
1693	1978	);
		@@ -1694,9 +1979,8 @@
1694	1979	}
1695	1980	);
1696	1981	}
1697	1982	);
1698		- blockStyles.variations = variations;
1699	1983	}
1700	1984	if (typeof blockSelectors !== "string" && blockSelectors?.[blockName]?.selector) {
1701	1985	nodes.push({
1702	1986	duotoneSelector: blockSelectors[blockName].duotoneSelector,
		@@ -1704,27 +1988,28 @@
1704	1988	hasLayoutSupport: blockSelectors[blockName].hasLayoutSupport,
1705	1989	selector: blockSelectors[blockName].selector,
1706	1990	styles: blockStyles,
1707	1991	featureSelectors: blockSelectors[blockName].featureSelectors,
1708		- styleVariationSelectors: blockSelectors[blockName].styleVariationSelectors,
1709	1992	name: blockName
1710	1993	});
1711	1994	}
1712		- Object.entries(typedNode?.elements ?? {}).forEach(
1713		- ([elementName, value]) => {
1714		- if (typeof blockSelectors !== "string" && value && blockSelectors?.[blockName] && import_blocks.__EXPERIMENTAL_ELEMENTS[elementName]) {
1715		- nodes.push({
1716		- styles: value,
1717		- selector: blockSelectors[blockName]?.selector.split(",").map((sel) => {
1718		- const elementSelectors = import_blocks.__EXPERIMENTAL_ELEMENTS[elementName].split(",");
1719		- return elementSelectors.map(
1720		- (elementSelector) => sel + " " + elementSelector
1721		- );
1722		- }).join(",")
1723		- });
1724		- }
	1995	+ nodes.push(...variationStyleNodesToAdd);
	1996	+ Object.entries(
	1997	+ getElementStylesByName(typedNode, responsiveMediaQueries)
	1998	+ ).forEach(([elementName, value]) => {
	1999	+ if (typeof blockSelectors !== "string" && value && blockSelectors?.[blockName] && import_blocks.__EXPERIMENTAL_ELEMENTS[elementName]) {
	2000	+ nodes.push({
	2001	+ styles: value,
	2002	+ selector: blockSelectors[blockName]?.selector.split(",").map((sel) => {
	2003	+ const elementSelectors = import_blocks.__EXPERIMENTAL_ELEMENTS[elementName].split(",");
	2004	+ return elementSelectors.map(
	2005	+ (elementSelector) => sel + " " + elementSelector
	2006	+ );
	2007	+ }).join(","),
	2008	+ elementName
	2009	+ });
1725	2010	}
1726		- );
	2011	+ });
1727	2012	nodes.push(...variationNodesToAdd);
1728	2013	}
1729	2014	);
1730	2015	return nodes;
		@@ -1856,8 +2141,107 @@
1856	2141	}
1857	2142	}
1858	2143	return ruleset;
1859	2144	};
	2145	+function renderStylesNode(node, {
	2146	+ tree,
	2147	+ useRootPaddingAlign,
	2148	+ disableLayoutStyles,
	2149	+ hasBlockGapSupport,
	2150	+ hasFallbackGapSupport,
	2151	+ disableRootPadding
	2152	+}) {
	2153	+ const {
	2154	+ selector,
	2155	+ selectorSuffix,
	2156	+ mediaQuery,
	2157	+ duotoneSelector,
	2158	+ styles,
	2159	+ fallbackGapValue,
	2160	+ hasLayoutSupport,
	2161	+ featureSelectors,
	2162	+ layoutSelector,
	2163	+ layoutHasBlockGapSupport,
	2164	+ skipSelectorWrapper,
	2165	+ name,
	2166	+ variationName
	2167	+ } = node;
	2168	+ let ruleset = "";
	2169	+ const effectiveSelector = selectorSuffix ? appendToSelector(selector, selectorSuffix) : selector;
	2170	+ if (featureSelectors && typeof featureSelectors !== "string") {
	2171	+ let featureDeclarations = getFeatureDeclarations(
	2172	+ featureSelectors,
	2173	+ styles
	2174	+ );
	2175	+ featureDeclarations = updateParagraphTextIndentSelector(
	2176	+ featureDeclarations,
	2177	+ tree.settings,
	2178	+ name
	2179	+ );
	2180	+ featureDeclarations = updateButtonWidthDeclarations(
	2181	+ featureDeclarations,
	2182	+ tree.settings
	2183	+ );
	2184	+ Object.entries(featureDeclarations).forEach(
	2185	+ ([featureSelector, declarations]) => {
	2186	+ if (declarations.length) {
	2187	+ let selectorForRule = variationName ? getBlockStyleVariationFeatureSelector(
	2188	+ variationName,
	2189	+ featureSelector
	2190	+ ) : featureSelector;
	2191	+ selectorForRule = selectorSuffix ? appendToSelector(selectorForRule, selectorSuffix) : selectorForRule;
	2192	+ const rules = declarations.join(";");
	2193	+ ruleset += `:root :where(${selectorForRule}){${rules};}`;
	2194	+ }
	2195	+ }
	2196	+ );
	2197	+ }
	2198	+ if (duotoneSelector) {
	2199	+ const duotoneStyles = {};
	2200	+ if (styles?.filter) {
	2201	+ duotoneStyles.filter = styles.filter;
	2202	+ delete styles.filter;
	2203	+ }
	2204	+ const duotoneDeclarations = getStylesDeclarations(duotoneStyles);
	2205	+ if (duotoneDeclarations.length) {
	2206	+ ruleset += `${duotoneSelector}{${duotoneDeclarations.join(
	2207	+ ";"
	2208	+ )};}`;
	2209	+ }
	2210	+ }
	2211	+ const selectorForLayout = layoutSelector ?? effectiveSelector;
	2212	+ const hasBlockGapSupportForLayout = layoutHasBlockGapSupport ?? hasBlockGapSupport;
	2213	+ if (!disableLayoutStyles && (ROOT_BLOCK_SELECTOR === selectorForLayout || hasLayoutSupport)) {
	2214	+ ruleset += getLayoutStyles({
	2215	+ style: styles,
	2216	+ selector: selectorForLayout,
	2217	+ hasBlockGapSupport: hasBlockGapSupportForLayout,
	2218	+ hasFallbackGapSupport,
	2219	+ fallbackGapValue
	2220	+ });
	2221	+ }
	2222	+ const styleDeclarations = getStylesDeclarations(
	2223	+ styles,
	2224	+ effectiveSelector,
	2225	+ useRootPaddingAlign,
	2226	+ tree,
	2227	+ disableRootPadding
	2228	+ );
	2229	+ if (styleDeclarations?.length) {
	2230	+ const generalSelector = skipSelectorWrapper ? effectiveSelector : `:root :where(${effectiveSelector})`;
	2231	+ ruleset += `${generalSelector}{${styleDeclarations.join(";")};}`;
	2232	+ }
	2233	+ if (styles?.css) {
	2234	+ ruleset += processCSSNesting(
	2235	+ styles.css,
	2236	+ `:root :where(${effectiveSelector})`
	2237	+ );
	2238	+ }
	2239	+ if (mediaQuery && ruleset) {
	2240	+ return `${mediaQuery}{${ruleset}}`;
	2241	+ }
	2242	+ return ruleset;
	2243	+}
1860	2244	var transformToStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles = false, disableRootPadding = false, styleOptions = {}) => {
1861	2245	const options = {
1862	2246	blockGap: true,
1863	2247	blockStyles: true,
		@@ -1867,12 +2251,19 @@
1867	2251	rootPadding: true,
1868	2252	variationStyles: false,
1869	2253	...styleOptions
1870	2254	};
1871		- const nodesWithStyles = getNodesWithStyles(tree, blockSelectors);
1872		- const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
1873		- const useRootPaddingAlign = tree?.settings?.useRootPaddingAwareAlignments;
1874		- const { contentSize, wideSize } = tree?.settings?.layout || {};
	2255	+ const normalizedTree = normalizeStyleStateAliases(tree);
	2256	+ const nodesWithStyles = getNodesWithStyles(
	2257	+ normalizedTree,
	2258	+ blockSelectors
	2259	+ );
	2260	+ const nodesWithSettings = getNodesWithSettings(
	2261	+ normalizedTree,
	2262	+ blockSelectors
	2263	+ );
	2264	+ const useRootPaddingAlign = normalizedTree?.settings?.useRootPaddingAwareAlignments;
	2265	+ const { contentSize, wideSize } = normalizedTree?.settings?.layout || {};
1875	2266	const hasBodyStyles = options.marginReset || options.rootPadding || options.layoutStyles;
1876	2267	let ruleset = "";
1877	2268	if (options.presets && (contentSize || wideSize)) {
1878	2269	ruleset += `${ROOT_CSS_PROPERTIES_SELECTOR} {`;
		@@ -1892,168 +2283,33 @@
1892	2283	}
1893	2284	ruleset += "}";
1894	2285	}
1895	2286	if (options.blockStyles) {
1896		- nodesWithStyles.forEach(
1897		- ({
1898		- selector,
1899		- duotoneSelector,
1900		- styles,
1901		- fallbackGapValue,
1902		- hasLayoutSupport,
1903		- featureSelectors,
1904		- styleVariationSelectors,
1905		- skipSelectorWrapper,
1906		- name
1907		- }) => {
1908		- if (featureSelectors) {
1909		- let featureDeclarations = getFeatureDeclarations(
1910		- featureSelectors,
1911		- styles
1912		- );
1913		- featureDeclarations = updateParagraphTextIndentSelector(
1914		- featureDeclarations,
1915		- tree.settings,
1916		- name
1917		- );
1918		- featureDeclarations = updateButtonWidthDeclarations(
1919		- featureDeclarations,
1920		- tree.settings
1921		- );
1922		- Object.entries(featureDeclarations).forEach(
1923		- ([cssSelector, declarations]) => {
1924		- if (declarations.length) {
1925		- const rules = declarations.join(";");
1926		- ruleset += `:root :where(${cssSelector}){${rules};}`;
1927		- }
1928		- }
1929		- );
1930		- }
1931		- if (duotoneSelector) {
1932		- const duotoneStyles = {};
1933		- if (styles?.filter) {
1934		- duotoneStyles.filter = styles.filter;
1935		- delete styles.filter;
1936		- }
1937		- const duotoneDeclarations = getStylesDeclarations(duotoneStyles);
1938		- if (duotoneDeclarations.length) {
1939		- ruleset += `${duotoneSelector}{${duotoneDeclarations.join(
1940		- ";"
1941		- )};}`;
1942		- }
1943		- }
1944		- if (!disableLayoutStyles && (ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport)) {
1945		- ruleset += getLayoutStyles({
1946		- style: styles,
1947		- selector,
1948		- hasBlockGapSupport,
1949		- hasFallbackGapSupport,
1950		- fallbackGapValue
1951		- });
1952		- }
1953		- const styleDeclarations = getStylesDeclarations(
1954		- styles,
1955		- selector,
	2287	+ const responsiveMediaQueries = getResponsiveMediaQueries(tree);
	2288	+ nodesWithStyles.forEach((node) => {
	2289	+ if (node.isStyleVariation && !options.variationStyles) {
	2290	+ return;
	2291	+ }
	2292	+ const responsiveNodes = getResponsiveStyleNodes(
	2293	+ node,
	2294	+ responsiveMediaQueries
	2295	+ );
	2296	+ [
	2297	+ node,
	2298	+ ...responsiveNodes,
	2299	+ ...getPseudoStyleNodes(node),
	2300	+ ...responsiveNodes.flatMap(getPseudoStyleNodes)
	2301	+ ].forEach((expandedNode) => {
	2302	+ ruleset += renderStylesNode(expandedNode, {
	2303	+ tree: normalizedTree,
1956	2304	useRootPaddingAlign,
1957		- tree,
	2305	+ disableLayoutStyles,
	2306	+ hasBlockGapSupport,
	2307	+ hasFallbackGapSupport,
1958	2308	disableRootPadding
1959		- );
1960		- if (styleDeclarations?.length) {
1961		- const generalSelector = skipSelectorWrapper ? selector : `:root :where(${selector})`;
1962		- ruleset += `${generalSelector}{${styleDeclarations.join(
1963		- ";"
1964		- )};}`;
1965		- }
1966		- if (styles?.css) {
1967		- ruleset += processCSSNesting(
1968		- styles.css,
1969		- `:root :where(${selector})`
1970		- );
1971		- }
1972		- if (options.variationStyles && styleVariationSelectors) {
1973		- Object.entries(styleVariationSelectors).forEach(
1974		- ([styleVariationName, styleVariationSelector]) => {
1975		- const styleVariations = styles?.variations?.[styleVariationName];
1976		- if (styleVariations) {
1977		- if (featureSelectors) {
1978		- let featureDeclarations = getFeatureDeclarations(
1979		- featureSelectors,
1980		- styleVariations
1981		- );
1982		- featureDeclarations = updateParagraphTextIndentSelector(
1983		- featureDeclarations,
1984		- tree.settings,
1985		- name
1986		- );
1987		- featureDeclarations = updateButtonWidthDeclarations(
1988		- featureDeclarations,
1989		- tree.settings
1990		- );
1991		- Object.entries(
1992		- featureDeclarations
1993		- ).forEach(
1994		- ([baseSelector, declarations]) => {
1995		- if (declarations.length) {
1996		- const cssSelector = concatFeatureVariationSelectorString(
1997		- baseSelector,
1998		- styleVariationSelector
1999		- );
2000		- const rules = declarations.join(";");
2001		- ruleset += `:root :where(${cssSelector}){${rules};}`;
2002		- }
2003		- }
2004		- );
2005		- }
2006		- const styleVariationDeclarations = getStylesDeclarations(
2007		- styleVariations,
2008		- styleVariationSelector,
2009		- useRootPaddingAlign,
2010		- tree
2011		- );
2012		- if (styleVariationDeclarations.length) {
2013		- ruleset += `:root :where(${styleVariationSelector}){${styleVariationDeclarations.join(
2014		- ";"
2015		- )};}`;
2016		- }
2017		- if (styleVariations?.css) {
2018		- ruleset += processCSSNesting(
2019		- styleVariations.css,
2020		- `:root :where(${styleVariationSelector})`
2021		- );
2022		- }
2023		- ruleset = appendPseudoSelectorStyles(
2024		- styleVariations,
2025		- styleVariationSelector,
2026		- ruleset,
2027		- featureSelectors,
2028		- tree.settings,
2029		- name,
2030		- styleVariationSelector
2031		- );
2032		- if (hasLayoutSupport && styleVariations?.spacing?.blockGap) {
2033		- const variationSelectorWithBlock = styleVariationSelector + selector;
2034		- ruleset += getLayoutStyles({
2035		- style: styleVariations,
2036		- selector: variationSelectorWithBlock,
2037		- hasBlockGapSupport: true,
2038		- hasFallbackGapSupport,
2039		- fallbackGapValue
2040		- });
2041		- }
2042		- }
2043		- }
2044		- );
2045		- }
2046		- ruleset = appendPseudoSelectorStyles(
2047		- styles,
2048		- selector,
2049		- ruleset,
2050		- featureSelectors,
2051		- tree.settings,
2052		- name
2053		- );
2054		- }
2055		- );
	2309	+ });
	2310	+ });
	2311	+ });
2056	2312	}
2057	2313	if (options.layoutStyles) {
2058	2314	ruleset = ruleset + ".wp-site-blocks > .alignleft { float: left; margin-right: 2em; }";
2059	2315	ruleset = ruleset + ".wp-site-blocks > .alignright { float: right; margin-left: 2em; }";
		@@ -2059,9 +2315,9 @@
2059	2315	ruleset = ruleset + ".wp-site-blocks > .alignright { float: right; margin-left: 2em; }";
2060	2316	ruleset = ruleset + ".wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }";
2061	2317	}
2062	2318	if (options.blockGap && hasBlockGapSupport) {
2063		- const gapValue = getGapCSSValue(tree?.styles?.spacing?.blockGap) || "0.5em";
	2319	+ const gapValue = getGapCSSValue(normalizedTree?.styles?.spacing?.blockGap) || "0.5em";
2064	2320	ruleset = ruleset + `:root :where(.wp-site-blocks) > * { margin-block-start: ${gapValue}; margin-block-end: 0; }`;
2065	2321	ruleset = ruleset + ":root :where(.wp-site-blocks) > :first-child { margin-block-start: 0; }";
2066	2322	ruleset = ruleset + ":root :where(.wp-site-blocks) > :last-child { margin-block-end: 0; }";
2067	2323	}
		@@ -2122,12 +2378,10 @@
2122	2378	duotoneSelector = scopeSelector(rootSelector, duotoneSupport);
2123	2379	}
2124	2380	}
2125	2381	const hasLayoutSupport = !!blockType?.supports?.layout || !!blockType?.supports?.__experimentalLayout;
2126		- const fallbackGapValue = (
2127		- // @ts-expect-error
2128		- blockType?.supports?.spacing?.blockGap?.__experimentalDefault
2129		- );
	2382	+ const blockGapSupport = blockType?.supports?.spacing?.blockGap;
	2383	+ const fallbackGapValue = typeof blockGapSupport === "object" && !Array.isArray(blockGapSupport) ? blockGapSupport.__experimentalDefault : void 0;
2130	2384	const blockStyleVariations = getBlockStyles(name);
2131	2385	const styleVariationSelectors = {};
2132	2386	blockStyleVariations?.forEach((variation) => {
2133	2387	const variationSuffix = variationInstanceId ? `-${variationInstanceId}` : "";
		@@ -2217,9 +2471,9 @@
2217	2471	styleOptions = {}
2218	2472	} = options;
2219	2473	const blocks = blockTypes.length > 0 ? blockTypes : (0, import_blocks.getBlockTypes)();
2220	2474	const blockGap = getSetting(config, "spacing.blockGap");
2221		- const hasBlockGapSupport = hasBlockGapSupportOption ?? blockGap !== null;
	2475	+ const hasBlockGapSupport = hasBlockGapSupportOption ?? (blockGap !== null && blockGap !== void 0);
2222	2476	const hasFallbackGapSupport = hasFallbackGapSupportOption ?? !hasBlockGapSupport;
2223	2477	if (!config?.styles || !config?.settings) {
2224	2478	return [[], {}];
2225	2479	}
		@@ -2281,8 +2535,9 @@
2281	2535	}
2282	2536
2283	2537	// packages/lazy-editor/build-module/hooks/use-editor-settings.mjs
2284	2538	var import_core_data3 = __toESM(require_core_data(), 1);
	2539	+var import_blocks2 = __toESM(require_blocks(), 1);
2285	2540	var import_element2 = __toESM(require_element(), 1);
2286	2541	var import_data4 = __toESM(require_data(), 1);
2287	2542
2288	2543	// packages/lazy-editor/build-module/hooks/use-global-styles.mjs
		@@ -2291,8 +2546,11 @@
2291	2546	var import_element = __toESM(require_element(), 1);
2292	2547	function useUserGlobalStyles(id) {
2293	2548	const { userGlobalStyles } = (0, import_data3.useSelect)(
2294	2549	(select2) => {
	2550	+ if (id === void 0) {
	2551	+ return { userGlobalStyles: void 0 };
	2552	+ }
2295	2553	const { getEntityRecord, getEditedEntityRecord, canUser } = select2(import_core_data2.store);
2296	2554	const userCanEditGlobalStyles = canUser("update", {
2297	2555	kind: "root",
2298	2556	name: "globalStyles",
		@@ -2345,19 +2603,25 @@
2345	2603	"@wordpress/lazy-editor"
2346	2604	);
2347	2605
2348	2606	// packages/lazy-editor/build-module/hooks/use-editor-settings.mjs
2349		-function useEditorSettings({ stylesId }) {
2350		- const { editorSettings } = (0, import_data4.useSelect)(
	2607	+function useEditorSettings({
	2608	+ stylesId
	2609	+}) {
	2610	+ const { editorSettings, blockTypes } = (0, import_data4.useSelect)(
2351	2611	(select2) => ({
2352	2612	editorSettings: unlock(
2353	2613	select2(import_core_data3.store)
2354		- ).getEditorSettings()
	2614	+ ).getEditorSettings(),
	2615	+ blockTypes: select2(import_blocks2.store).getBlockTypes()
2355	2616	}),
2356	2617	[]
2357	2618	);
2358	2619	const { user: globalStyles } = useUserGlobalStyles(stylesId);
2359		- const [globalStylesCSS] = generateGlobalStyles(globalStyles);
	2620	+ const [globalStylesCSS] = (0, import_element2.useMemo)(
	2621	+ () => generateGlobalStyles(globalStyles, blockTypes),
	2622	+ [globalStyles, blockTypes]
	2623	+ );
2360	2624	const hasEditorSettings = !!editorSettings;
2361	2625	const styles = (0, import_element2.useMemo)(() => {
2362	2626	if (!hasEditorSettings) {
2363	2627	return [];
		@@ -2639,14 +2903,23 @@
2639	2903	}
2640	2904
2641	2905	// packages/lazy-editor/build-module/components/editor/index.mjs
2642	2906	var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
2643		-var { Editor: PrivateEditor, BackButton } = unlock(import_editor.privateApis);
	2907	+var {
	2908	+ Editor: PrivateEditor,
	2909	+ BackButton,
	2910	+ PreferencesModal,
	2911	+ ToolsMoreMenuGroup,
	2912	+ SiteExport
	2913	+} = unlock(import_editor.privateApis);
2644	2914	function Editor({
2645	2915	postType,
2646	2916	postId,
2647	2917	settings,
2648		- backButton
	2918	+ backButton,
	2919	+ onActionPerformed,
	2920	+ initialViewport,
	2921	+ renderingMode
2649	2922	}) {
2650	2923	const homePage = (0, import_data6.useSelect)(
2651	2924	(select2) => {
2652	2925	if (postType || postId) {
		@@ -2681,9 +2954,19 @@
2681	2954	const { isReady: assetsReady } = useEditorAssets();
2682	2955	const finalSettings = (0, import_element4.useMemo)(
2683	2956	() => ({
2684	2957	...editorSettings,
2685		- ...settings
	2958	+ ...settings,
	2959	+ /*
	2960	+ * The theme's styles and the user's global styles, then whatever the
	2961	+ * host adds for the surface it is rendering into. Spelled out after
	2962	+ * the spread because `styles` is a list each source adds to: a host
	2963	+ * contributing its own must not drop everyone else's.
	2964	+ */
	2965	+ styles: [
	2966	+ ...editorSettings.styles ?? [],
	2967	+ ...settings?.styles ?? []
	2968	+ ]
2686	2969	}),
2687	2970	[editorSettings, settings]
2688	2971	);
2689	2972	if (!settingsReady || !assetsReady) {
		@@ -2699,9 +2982,9 @@
2699	2982	children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {})
2700	2983	}
2701	2984	);
2702	2985	}
2703		- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
	2986	+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2704	2987	PrivateEditor,
2705	2988	{
2706	2989	postType: resolvedPostType,
2707	2990	postId: resolvedPostId,
		@@ -2707,9 +2990,16 @@
2707	2990	postId: resolvedPostId,
2708	2991	templateId,
2709	2992	settings: finalSettings,
2710	2993	styles: finalSettings.styles,
2711		- children: backButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BackButton, { children: backButton })
	2994	+ onActionPerformed,
	2995	+ initialViewport,
	2996	+ renderingMode,
	2997	+ children: [
	2998	+ backButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BackButton, { children: backButton }),
	2999	+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreferencesModal, {}),
	3000	+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolsMoreMenuGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SiteExport, {}) })
	3001	+ ]
2712	3002	}
2713	3003	);
2714	3004	}
2715	3005
		@@ -2717,11 +3007,11 @@
2717	3007	var import_i18n = __toESM(require_i18n(), 1);
2718	3008	var import_element5 = __toESM(require_element(), 1);
2719	3009	var import_block_editor = __toESM(require_block_editor(), 1);
2720	3010	var import_editor2 = __toESM(require_editor(), 1);
2721		-var import_blocks2 = __toESM(require_blocks(), 1);
	3011	+var import_blocks3 = __toESM(require_blocks(), 1);
2722	3012	var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
2723		-if (typeof document !== "undefined" && true && !document.head.querySelector("style[data-wp-hash='95327475c1']")) {
	3013	+if (typeof document !== "undefined" && (typeof process === "undefined" || true) && !document.head.querySelector("style[data-wp-hash='95327475c1']")) {
2724	3014	const style = document.createElement("style");
2725	3015	style.setAttribute("data-wp-hash", "95327475c1");
2726	3016	style.appendChild(document.createTextNode(".lazy-editor-block-preview__container{align-items:center;border-radius:4px;display:flex;flex-direction:column;height:100%;justify-content:center}.dataviews-view-grid .lazy-editor-block-preview__container .block-editor-block-preview__container{height:100%}.dataviews-view-table .lazy-editor-block-preview__container{text-wrap:balance;text-wrap:pretty;flex-grow:0;width:96px}"));
2727	3017	document.head.appendChild(style);
		@@ -2734,9 +3024,9 @@
2734	3024	}) {
2735	3025	const descriptionId = (0, import_element5.useId)();
2736	3026	const backgroundColor = useStyle("color.background");
2737	3027	const actualBlocks = (0, import_element5.useMemo)(() => {
2738		- return blocks ?? (0, import_blocks2.parse)(content, {
	3028	+ return blocks ?? (0, import_blocks3.parse)(content, {
2739	3029	__unstableSkipMigrationLogs: true
2740	3030	});
2741	3031	}, [content, blocks]);
2742	3032	const isEmpty = !actualBlocks?.length;