PluginProbe
Gutenberg / 24.1.0
Gutenberg v24.1.0
24.1.0 24.0.0 23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 All 404 releases
← All changes | build/modules/lazy-editor/index.js +738 -374 23.0.1 → 24.1.0 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]
@@ -186,8 +192,9 @@
186 192 "custom",
187 193 "dimensions.aspectRatio",
188 194 "dimensions.height",
189 195 "dimensions.minHeight",
196 + "dimensions.minWidth",
190 197 "dimensions.width",
191 198 "dimensions.dimensionSizes",
192 199 "layout.contentSize",
193 200 "layout.definitions",
@@ -217,10 +224,15 @@
217 224 "typography.textAlign",
218 225 "typography.textColumns",
219 226 "typography.textDecoration",
220 227 "typography.textIndent",
228 + "typography.textShadow",
229 + "typography.defaultTextShadowPresets",
230 + "typography.textShadowPresets",
221 231 "typography.textTransform",
222 - "typography.writingMode"
232 + "typography.writingMode",
233 + "viewport.mobile",
234 + "viewport.tablet"
223 235 ];
224 236 function getSetting(globalStyles, path, blockName) {
225 237 const appendedBlockPath = blockName ? ".blocks." + blockName : "";
226 238 const appendedPropertyPath = path ? "." + path : "";
@@ -433,8 +445,30 @@
433 445
434 446 // packages/global-styles-engine/build-module/utils/common.mjs
435 447 var ROOT_BLOCK_SELECTOR = "body";
436 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 +}
437 471 var PRESET_METADATA = [
438 472 {
439 473 path: ["color", "palette"],
440 474 valueKey: "color",
@@ -490,8 +524,16 @@
490 524 { classSuffix: "font-family", propertyName: "font-family" }
491 525 ]
492 526 },
493 527 {
528 + path: ["typography", "textShadowPresets"],
529 + valueKey: "textShadow",
530 + cssVarInfix: "text-shadow",
531 + classes: [
532 + { classSuffix: "text-shadow", propertyName: "text-shadow" }
533 + ]
534 + },
535 + {
494 536 path: ["spacing", "spacingSizes"],
495 537 valueKey: "size",
496 538 cssVarInfix: "spacing",
497 539 valueFunc: ({ size }) => size,
@@ -513,10 +555,10 @@
513 555 function scopeSelector(scope, selector) {
514 556 if (!scope || !selector) {
515 557 return selector;
516 558 }
517 - const scopes = scope.split(",");
518 - const selectors = selector.split(",");
559 + const scopes = splitSelectorList(scope);
560 + const selectors = splitSelectorList(selector);
519 561 const selectorsScoped = [];
520 562 scopes.forEach((outer) => {
521 563 selectors.forEach((inner) => {
522 564 selectorsScoped.push(`${outer.trim()} ${inner.trim()}`);
@@ -550,9 +592,9 @@
550 592 function appendToSelector(selector, toAppend) {
551 593 if (!selector.includes(",")) {
552 594 return selector + toAppend;
553 595 }
554 - const selectors = selector.split(",");
596 + const selectors = splitSelectorList(selector);
555 597 const newSelectors = selectors.map((sel) => sel + toAppend);
556 598 return newSelectors.join(",");
557 599 }
558 600 function getBlockStyleVariationSelector(variation, blockSelector) {
@@ -559,15 +601,32 @@
559 601 const variationClass = `.is-style-${variation}`;
560 602 if (!blockSelector) {
561 603 return variationClass;
562 604 }
563 - const ancestorRegex = /((?::\([^)]+\))?\s*)([^\s:]+)/;
564 - const addVariationClass = (_match, group1, group2) => {
565 - return group1 + group2 + variationClass;
566 - };
567 - 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 + );
568 610 return result.join(",");
569 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 +}
570 629 function getResolvedRefValue(ruleValue, tree) {
571 630 if (!ruleValue || !tree) {
572 631 return ruleValue;
573 632 }
@@ -602,16 +661,71 @@
602 661 return ruleValue;
603 662 }
604 663 const resolvedValue = getResolvedRefValue(ruleValue, tree);
605 664 if (typeof resolvedValue === "object" && resolvedValue !== null && "url" in resolvedValue && resolvedValue?.url) {
606 - resolvedValue.url = getResolvedThemeFilePath(
607 - resolvedValue.url,
608 - tree?._links?.["wp:theme-file"]
609 - );
665 + return {
666 + ...resolvedValue,
667 + url: getResolvedThemeFilePath(
668 + resolvedValue.url,
669 + tree?._links?.["wp:theme-file"]
670 + )
671 + };
610 672 }
611 673 return resolvedValue;
612 674 }
613 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 +
614 728 // packages/global-styles-engine/build-module/core/render.mjs
615 729 var import_blocks = __toESM(require_blocks(), 1);
616 730 var import_style_engine2 = __toESM(require_style_engine(), 1);
617 731 var import_data2 = __toESM(require_data(), 1);
@@ -670,163 +784,176 @@
670 784 return null;
671 785 }
672 786
673 787 // node_modules/colord/index.mjs
674 -var r = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) };
675 -var t = function(r2) {
788 +for (r = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) }, t = function(r2) {
676 789 return "string" == typeof r2 ? r2.length > 0 : "number" == typeof r2;
677 -};
678 -var n = function(r2, t2, n2) {
790 +}, n = function(r2, t2, n2) {
679 791 return void 0 === t2 && (t2 = 0), void 0 === n2 && (n2 = Math.pow(10, t2)), Math.round(n2 * r2) / n2 + 0;
680 -};
681 -var e = function(r2, t2, n2) {
792 +}, u = function(r2, t2, n2) {
682 793 return void 0 === t2 && (t2 = 0), void 0 === n2 && (n2 = 1), r2 > n2 ? n2 : r2 > t2 ? r2 : t2;
683 -};
684 -var u = function(r2) {
685 - return (r2 = isFinite(r2) ? r2 % 360 : 0) > 0 ? r2 : r2 + 360;
686 -};
687 -var a = function(r2) {
688 - return { r: e(r2.r, 0, 255), g: e(r2.g, 0, 255), b: e(r2.b, 0, 255), a: e(r2.a) };
689 -};
690 -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) {
691 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)];
692 823 };
693 -var i = /^#([0-9a-f]{3,8})$/i;
694 -var s = function(r2) {
695 - var t2 = r2.toString(16);
696 - 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 };
697 827 };
698 -var h = function(r2) {
699 - 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;
700 - 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 };
701 833 };
702 -var b = function(r2) {
703 - var t2 = r2.h, n2 = r2.s, e2 = r2.v, u2 = r2.a;
704 - t2 = t2 / 360 * 6, n2 /= 100, e2 /= 100;
705 - 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;
706 - 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) };
707 836 };
708 -var g = function(r2) {
709 - 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) };
710 839 };
711 -var d = function(r2) {
712 - 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;
713 843 };
714 -var f = function(r2) {
715 - 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 }));
716 - 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;
717 847 };
718 -var c = function(r2) {
719 - 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 };
720 - var t2, n2, e2, u2;
721 -};
722 -var l = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i;
723 -var p = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i;
724 -var v = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i;
725 -var m = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i;
726 -var y = { string: [[function(r2) {
727 - var t2 = i.exec(r2);
728 - 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;
729 -}, "hex"], [function(r2) {
730 - var t2 = v.exec(r2) || m.exec(r2);
731 - 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;
732 -}, "rgb"], [function(t2) {
733 - var n2 = l.exec(t2) || p.exec(t2);
734 - if (!n2) return null;
735 - 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) });
736 - return f(a2);
737 -}, "hsl"]], object: [[function(r2) {
738 - var n2 = r2.r, e2 = r2.g, u2 = r2.b, o2 = r2.a, i2 = void 0 === o2 ? 1 : o2;
739 - return t(n2) && t(e2) && t(u2) ? a({ r: Number(n2), g: Number(e2), b: Number(u2), a: Number(i2) }) : null;
740 -}, "rgb"], [function(r2) {
741 - var n2 = r2.h, e2 = r2.s, u2 = r2.l, a2 = r2.a, o2 = void 0 === a2 ? 1 : a2;
742 - if (!t(n2) || !t(e2) || !t(u2)) return null;
743 - var i2 = g({ h: Number(n2), s: Number(e2), l: Number(u2), a: Number(o2) });
744 - return f(i2);
745 -}, "hsl"], [function(r2) {
746 - var n2 = r2.h, a2 = r2.s, o2 = r2.v, i2 = r2.a, s2 = void 0 === i2 ? 1 : i2;
747 - if (!t(n2) || !t(a2) || !t(o2)) return null;
748 - var h2 = (function(r3) {
749 - return { h: u(r3.h), s: e(r3.s, 0, 100), v: e(r3.v, 0, 100), a: e(r3.a) };
750 - })({ h: Number(n2), s: Number(a2), v: Number(o2), a: Number(s2) });
751 - 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);
752 879 }, "hsv"]] };
753 -var N = function(r2, t2) {
754 - for (var n2 = 0; n2 < t2.length; n2++) {
755 - var e2 = t2[n2][0](r2);
756 - 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]];
757 884 }
758 885 return [null, void 0];
759 886 };
760 -var x = function(r2) {
761 - 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];
762 889 };
763 -var M = function(r2, t2) {
764 - var n2 = c(r2);
765 - 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 };
766 893 };
767 -var H = function(r2) {
768 - 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;
769 896 };
770 -var $ = function(r2, t2) {
771 - var n2 = c(r2);
772 - 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 };
773 900 };
774 -var j = (function() {
775 - function r2(r3) {
776 - 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 };
777 904 }
778 - return r2.prototype.isValid = function() {
905 + return r.prototype.isValid = function() {
779 906 return null !== this.parsed;
780 - }, r2.prototype.brightness = function() {
781 - return n(H(this.rgba), 2);
782 - }, r2.prototype.isDark = function() {
783 - return H(this.rgba) < 0.5;
784 - }, r2.prototype.isLight = function() {
785 - return H(this.rgba) >= 0.5;
786 - }, r2.prototype.toHex = function() {
787 - 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;
788 - var r3, t2, e2, u2, a2, i2;
789 - }, r2.prototype.toRgb = function() {
790 - return o(this.rgba);
791 - }, r2.prototype.toRgbString = function() {
792 - 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 + ")";
793 - var r3, t2, n2, e2, u2;
794 - }, r2.prototype.toHsl = function() {
795 - return d(c(this.rgba));
796 - }, r2.prototype.toHslString = function() {
797 - 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 + "%)";
798 - var r3, t2, n2, e2, u2;
799 - }, r2.prototype.toHsv = function() {
800 - return r3 = h(this.rgba), { h: n(r3.h), s: n(r3.s), v: n(r3.v), a: n(r3.a, 3) };
801 - var r3;
802 - }, r2.prototype.invert = function() {
803 - return w({ r: 255 - (r3 = this.rgba).r, g: 255 - r3.g, b: 255 - r3.b, a: r3.a });
804 - var r3;
805 - }, r2.prototype.saturate = function(r3) {
806 - return void 0 === r3 && (r3 = 0.1), w(M(this.rgba, r3));
807 - }, r2.prototype.desaturate = function(r3) {
808 - return void 0 === r3 && (r3 = 0.1), w(M(this.rgba, -r3));
809 - }, r2.prototype.grayscale = function() {
810 - return w(M(this.rgba, -1));
811 - }, r2.prototype.lighten = function(r3) {
812 - return void 0 === r3 && (r3 = 0.1), w($(this.rgba, r3));
813 - }, r2.prototype.darken = function(r3) {
814 - return void 0 === r3 && (r3 = 0.1), w($(this.rgba, -r3));
815 - }, r2.prototype.rotate = function(r3) {
816 - return void 0 === r3 && (r3 = 15), this.hue(this.hue() + r3);
817 - }, r2.prototype.alpha = function(r3) {
818 - return "number" == typeof r3 ? w({ r: (t2 = this.rgba).r, g: t2.g, b: t2.b, a: r3 }) : n(this.rgba.a, 3);
819 - var t2;
820 - }, r2.prototype.hue = function(r3) {
821 - var t2 = c(this.rgba);
822 - return "number" == typeof r3 ? w({ h: r3, s: t2.s, l: t2.l, a: t2.a }) : n(t2.h);
823 - }, r2.prototype.isEqual = function(r3) {
824 - return this.toHex() === w(r3).toHex();
825 - }, 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;
826 953 })();
827 -var w = function(r2) {
828 - return r2 instanceof j ? r2 : new j(r2);
954 +var A = function(r) {
955 + return r instanceof q ? r : new q(r);
829 956 };
830 957
831 958 // packages/global-styles-engine/build-module/utils/duotone.mjs
832 959 function getValuesFromColors(colors = []) {
@@ -836,9 +963,9 @@
836 963 b: [],
837 964 a: []
838 965 };
839 966 colors.forEach((color) => {
840 - const rgbColor = w(color).toRgb();
967 + const rgbColor = A(color).toRgb();
841 968 values.r.push(rgbColor.r / 255);
842 969 values.g.push(rgbColor.g / 255);
843 970 values.b.push(rgbColor.b / 255);
844 971 values.a.push(rgbColor.a);
@@ -922,11 +1049,13 @@
922 1049 backgroundSize: "cover",
923 1050 backgroundPosition: "50% 50%"
924 1051 // used only when backgroundSize is 'contain'.
925 1052 };
1053 +function hasImageUrl(backgroundImage) {
1054 + return typeof backgroundImage === "object" && backgroundImage !== null && "url" in backgroundImage && !!backgroundImage.url;
1055 +}
926 1056 function setBackgroundStyleDefaults(backgroundStyle) {
927 - if (!backgroundStyle || // @ts-expect-error
928 - !backgroundStyle?.backgroundImage?.url) {
1057 + if (!backgroundStyle || !hasImageUrl(backgroundStyle.backgroundImage)) {
929 1058 return;
930 1059 }
931 1060 let backgroundStylesWithDefaults;
932 1061 if (!backgroundStyle?.backgroundSize) {
@@ -1114,8 +1243,84 @@
1114 1243 ]
1115 1244 }
1116 1245 };
1117 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 +
1118 1323 // packages/global-styles-engine/build-module/core/render.mjs
1119 1324 var ELEMENT_CLASS_NAMES = {
1120 1325 button: "wp-element-button",
1121 1326 caption: "wp-element-caption"
@@ -1126,8 +1331,32 @@
1126 1331 dimensions: "dimensions",
1127 1332 spacing: "spacing",
1128 1333 typography: "typography"
1129 1334 };
1335 +var VALID_BLOCK_PSEUDO_SELECTORS = {
1336 + "core/button": [":hover", ":focus", ":focus-visible", ":active"],
1337 + "core/navigation-link": [":hover", ":focus", ":focus-visible", ":active"]
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 +};
1130 1359 function getPresetsClasses(blockSelector = "*", blockPresets = {}) {
1131 1360 return PRESET_METADATA.reduce(
1132 1361 (declarations, { path, cssVarInfix, classes }) => {
1133 1362 if (!classes) {
@@ -1149,11 +1378,9 @@
1149 1378 }) => {
1150 1379 const classSelectorToUse = `.has-${kebabCase(
1151 1380 slug
1152 1381 )}-${classSuffix}`;
1153 - const selectorToUse = blockSelector.split(",").map(
1154 - (selector) => `${selector}${classSelectorToUse}`
1155 - ).join(",");
1382 + const selectorToUse = blockSelector ? `:where(${blockSelector})${classSelectorToUse}` : classSelectorToUse;
1156 1383 const value = `var(--wp--preset--${cssVarInfix}--${kebabCase(
1157 1384 slug
1158 1385 )})`;
1159 1386 declarations += `${selectorToUse}{${propertyName}: ${value} !important;}`;
@@ -1177,9 +1404,9 @@
1177 1404 blockPresets,
1178 1405 metadata.path,
1179 1406 {}
1180 1407 );
1181 - return ["default", "theme"].filter((origin) => presetByOrigin[origin]).flatMap(
1408 + return ["default", "theme", "custom"].filter((origin) => presetByOrigin[origin]).flatMap(
1182 1409 (origin) => presetByOrigin[origin].map(
1183 1410 (preset) => getDuotoneFilter(
1184 1411 `wp-duotone-${preset.slug}`,
1185 1412 preset.colors
@@ -1201,18 +1428,8 @@
1201 1428 }
1202 1429 });
1203 1430 return result;
1204 1431 }
1205 -function concatFeatureVariationSelectorString(featureSelector, styleVariationSelector) {
1206 - const featureSelectors = featureSelector.split(",");
1207 - const combinedSelectors = [];
1208 - featureSelectors.forEach((selector) => {
1209 - combinedSelectors.push(
1210 - `${styleVariationSelector.trim()}${selector.trim()}`
1211 - );
1212 - });
1213 - return combinedSelectors.join(", ");
1214 -}
1215 1432 var updateParagraphTextIndentSelector = (featureDeclarations, settings, blockName) => {
1216 1433 if (blockName !== "core/paragraph") {
1217 1434 return featureDeclarations;
1218 1435 }
@@ -1409,9 +1626,10 @@
1409 1626 hasFallbackGapSupport,
1410 1627 fallbackGapValue
1411 1628 }) {
1412 1629 let ruleset = "";
1413 - let gapValue = hasBlockGapSupport ? getGapCSSValue(style?.spacing?.blockGap) : "";
1630 + const blockGapValue = style?.spacing?.blockGap;
1631 + let gapValue = hasBlockGapSupport ? getGapCSSValue(blockGapValue) : "";
1414 1632 if (hasFallbackGapSupport) {
1415 1633 if (selector === ROOT_BLOCK_SELECTOR) {
1416 1634 gapValue = !gapValue ? "0.5em" : gapValue;
1417 1635 } else if (!hasBlockGapSupport && fallbackGapValue) {
@@ -1417,8 +1635,9 @@
1417 1635 } else if (!hasBlockGapSupport && fallbackGapValue) {
1418 1636 gapValue = fallbackGapValue;
1419 1637 }
1420 1638 }
1639 + const rowGapValue = hasBlockGapSupport && blockGapValue && typeof blockGapValue !== "string" ? getGapCSSValue(blockGapValue.top) : gapValue;
1421 1640 if (gapValue && layoutDefinitions) {
1422 1641 Object.values(layoutDefinitions).forEach(
1423 1642 ({ className, name, spacingStyles }) => {
1424 1643 if (!hasBlockGapSupport && "flex" !== name && "grid" !== name) {
@@ -1423,8 +1642,11 @@
1423 1642 ({ className, name, spacingStyles }) => {
1424 1643 if (!hasBlockGapSupport && "flex" !== name && "grid" !== name) {
1425 1644 return;
1426 1645 }
1646 + const layoutGapValue = ["default", "constrained"].includes(
1647 + name
1648 + ) ? rowGapValue : gapValue;
1427 1649 if (spacingStyles?.length) {
1428 1650 spacingStyles.forEach((spacingStyle) => {
1429 1651 const declarations = [];
1430 1652 if (spacingStyle.rules) {
@@ -1430,9 +1652,9 @@
1430 1652 if (spacingStyle.rules) {
1431 1653 Object.entries(spacingStyle.rules).forEach(
1432 1654 ([cssProperty, cssValue]) => {
1433 1655 declarations.push(
1434 - `${cssProperty}: ${cssValue ? cssValue : gapValue}`
1656 + `${cssProperty}: ${cssValue ? cssValue : layoutGapValue}`
1435 1657 );
1436 1658 }
1437 1659 );
1438 1660 }
@@ -1497,15 +1719,23 @@
1497 1719 "outline",
1498 1720 "shadow",
1499 1721 "background"
1500 1722 ];
1501 -function pickStyleKeys(treeToPickFrom) {
1723 +function pickStyleKeys(treeToPickFrom, responsiveMediaQueries) {
1724 + return pickStyleAndPseudoKeys(
1725 + treeToPickFrom,
1726 + void 0,
1727 + responsiveMediaQueries
1728 + );
1729 +}
1730 +function pickStyleAndPseudoKeys(treeToPickFrom, blockName, responsiveMediaQueries) {
1502 1731 if (!treeToPickFrom) {
1503 1732 return {};
1504 1733 }
1505 1734 const entries = Object.entries(treeToPickFrom);
1735 + const allowedPseudoSelectors = blockName ? VALID_BLOCK_PSEUDO_SELECTORS[blockName] ?? [] : [];
1506 1736 const pickedEntries = entries.filter(
1507 - ([key]) => STYLE_KEYS.includes(key)
1737 + ([key]) => STYLE_KEYS.includes(key) || allowedPseudoSelectors.includes(key) || responsiveMediaQueries[key]
1508 1738 );
1509 1739 const clonedEntries = pickedEntries.map(([key, style]) => [
1510 1740 key,
1511 1741 JSON.parse(JSON.stringify(style))
@@ -1511,14 +1741,104 @@
1511 1741 JSON.parse(JSON.stringify(style))
1512 1742 ]);
1513 1743 return Object.fromEntries(clonedEntries);
1514 1744 }
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 [];
1758 + }
1759 + return pseudoSelectors.flatMap((pseudoSelector) => {
1760 + const pseudoStyles = styles?.[pseudoSelector];
1761 + if (!pseudoStyles || typeof pseudoStyles !== "object") {
1762 + return [];
1763 + }
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
1815 + }
1816 + ];
1817 + }
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 + }
1830 + );
1831 + });
1832 + return elementStylesByName;
1833 +}
1515 1834 var getNodesWithStyles = (tree, blockSelectors) => {
1516 1835 const nodes = [];
1517 1836 if (!tree?.styles) {
1518 1837 return nodes;
1519 1838 }
1520 - const styles = pickStyleKeys(tree.styles);
1839 + const responsiveMediaQueries = getResponsiveMediaQueries(tree);
1840 + const styles = pickStyleKeys(tree.styles, responsiveMediaQueries);
1521 1841 if (styles) {
1522 1842 nodes.push({
1523 1843 styles,
1524 1844 selector: ROOT_BLOCK_SELECTOR,
@@ -1531,8 +1851,9 @@
1531 1851 if (tree.styles?.elements?.[name]) {
1532 1852 nodes.push({
1533 1853 styles: tree.styles?.elements?.[name] ?? {},
1534 1854 selector,
1855 + elementName: name,
1535 1856 // Top level elements that don't use a class name should not receive the
1536 1857 // `:root :where()` wrapper to maintain backwards compatibility.
1537 1858 skipSelectorWrapper: !ELEMENT_CLASS_NAMES[name]
1538 1859 });
@@ -1539,23 +1860,49 @@
1539 1860 }
1540 1861 });
1541 1862 Object.entries(tree.styles?.blocks ?? {}).forEach(
1542 1863 ([blockName, node]) => {
1543 - const blockStyles = pickStyleKeys(node);
1864 + const blockStyles = pickStyleAndPseudoKeys(
1865 + node,
1866 + blockName,
1867 + responsiveMediaQueries
1868 + );
1544 1869 const typedNode = node;
1545 1870 const variationNodesToAdd = [];
1871 + const variationStyleNodesToAdd = [];
1546 1872 if (typedNode?.variations) {
1547 - const variations = {};
1548 1873 Object.entries(typedNode.variations).forEach(
1549 1874 ([variationName, variation]) => {
1550 1875 const typedVariation = variation;
1551 - variations[variationName] = pickStyleKeys(typedVariation);
1876 + const variationStyles = pickStyleAndPseudoKeys(
1877 + typedVariation,
1878 + blockName,
1879 + responsiveMediaQueries
1880 + );
1552 1881 if (typedVariation?.css) {
1553 - variations[variationName].css = typedVariation.css;
1882 + variationStyles.css = typedVariation.css;
1554 1883 }
1555 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 + }
1556 1900 Object.entries(
1557 - typedVariation?.elements ?? {}
1901 + getElementStylesByName(
1902 + typedVariation,
1903 + responsiveMediaQueries
1904 + )
1558 1905 ).forEach(([element, elementStyles]) => {
1559 1906 if (elementStyles && import_blocks.__EXPERIMENTAL_ELEMENTS[element]) {
1560 1907 variationNodesToAdd.push({
1561 1908 styles: elementStyles,
@@ -1561,9 +1908,11 @@
1561 1908 styles: elementStyles,
1562 1909 selector: scopeSelector(
1563 1910 variationSelector,
1564 1911 import_blocks.__EXPERIMENTAL_ELEMENTS[element]
1565 - )
1912 + ),
1913 + elementName: element,
1914 + isStyleVariation: true
1566 1915 });
1567 1916 }
1568 1917 });
1569 1918 Object.entries(typedVariation?.blocks ?? {}).forEach(
@@ -1582,9 +1931,13 @@
1582 1931 const variationFeatureSelectors = typeof blockSelectors !== "string" ? scopeFeatureSelectors(
1583 1932 variationSelector,
1584 1933 blockSelectors[variationBlockName]?.featureSelectors ?? {}
1585 1934 ) : void 0;
1586 - const variationBlockStyleNodes = pickStyleKeys(variationBlockStyles);
1935 + const variationBlockStyleNodes = pickStyleAndPseudoKeys(
1936 + variationBlockStyles,
1937 + variationBlockName,
1938 + responsiveMediaQueries
1939 + );
1587 1940 if (variationBlockStyles?.css) {
1588 1941 variationBlockStyleNodes.css = variationBlockStyles.css;
1589 1942 }
1590 1943 if (!variationBlockSelector || typeof blockSelectors === "string") {
@@ -1591,8 +1944,10 @@
1591 1944 return;
1592 1945 }
1593 1946 variationNodesToAdd.push({
1594 1947 selector: variationBlockSelector,
1948 + name: variationBlockName,
1949 + isStyleVariation: true,
1595 1950 duotoneSelector: variationDuotoneSelector,
1596 1951 featureSelectors: variationFeatureSelectors,
1597 1952 fallbackGapValue: blockSelectors[variationBlockName]?.fallbackGapValue,
1598 1953 hasLayoutSupport: blockSelectors[variationBlockName]?.hasLayoutSupport,
@@ -1598,9 +1953,12 @@
1598 1953 hasLayoutSupport: blockSelectors[variationBlockName]?.hasLayoutSupport,
1599 1954 styles: variationBlockStyleNodes
1600 1955 });
1601 1956 Object.entries(
1602 - variationBlockStyles.elements ?? {}
1957 + getElementStylesByName(
1958 + variationBlockStyles,
1959 + responsiveMediaQueries
1960 + )
1603 1961 ).forEach(
1604 1962 ([
1605 1963 variationBlockElement,
1606 1964 variationBlockElementStyles
@@ -1610,9 +1968,11 @@
1610 1968 styles: variationBlockElementStyles,
1611 1969 selector: scopeSelector(
1612 1970 variationBlockSelector,
1613 1971 import_blocks.__EXPERIMENTAL_ELEMENTS[variationBlockElement]
1614 - )
1972 + ),
1973 + elementName: variationBlockElement,
1974 + isStyleVariation: true
1615 1975 });
1616 1976 }
1617 1977 }
1618 1978 );
@@ -1619,9 +1979,8 @@
1619 1979 }
1620 1980 );
1621 1981 }
1622 1982 );
1623 - blockStyles.variations = variations;
1624 1983 }
1625 1984 if (typeof blockSelectors !== "string" && blockSelectors?.[blockName]?.selector) {
1626 1985 nodes.push({
1627 1986 duotoneSelector: blockSelectors[blockName].duotoneSelector,
@@ -1629,27 +1988,28 @@
1629 1988 hasLayoutSupport: blockSelectors[blockName].hasLayoutSupport,
1630 1989 selector: blockSelectors[blockName].selector,
1631 1990 styles: blockStyles,
1632 1991 featureSelectors: blockSelectors[blockName].featureSelectors,
1633 - styleVariationSelectors: blockSelectors[blockName].styleVariationSelectors,
1634 1992 name: blockName
1635 1993 });
1636 1994 }
1637 - Object.entries(typedNode?.elements ?? {}).forEach(
1638 - ([elementName, value]) => {
1639 - if (typeof blockSelectors !== "string" && value && blockSelectors?.[blockName] && import_blocks.__EXPERIMENTAL_ELEMENTS[elementName]) {
1640 - nodes.push({
1641 - styles: value,
1642 - selector: blockSelectors[blockName]?.selector.split(",").map((sel) => {
1643 - const elementSelectors = import_blocks.__EXPERIMENTAL_ELEMENTS[elementName].split(",");
1644 - return elementSelectors.map(
1645 - (elementSelector) => sel + " " + elementSelector
1646 - );
1647 - }).join(",")
1648 - });
1649 - }
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 + });
1650 2010 }
1651 - );
2011 + });
1652 2012 nodes.push(...variationNodesToAdd);
1653 2013 }
1654 2014 );
1655 2015 return nodes;
@@ -1781,8 +2141,107 @@
1781 2141 }
1782 2142 }
1783 2143 return ruleset;
1784 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 +}
1785 2244 var transformToStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles = false, disableRootPadding = false, styleOptions = {}) => {
1786 2245 const options = {
1787 2246 blockGap: true,
1788 2247 blockStyles: true,
@@ -1792,12 +2251,19 @@
1792 2251 rootPadding: true,
1793 2252 variationStyles: false,
1794 2253 ...styleOptions
1795 2254 };
1796 - const nodesWithStyles = getNodesWithStyles(tree, blockSelectors);
1797 - const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
1798 - const useRootPaddingAlign = tree?.settings?.useRootPaddingAwareAlignments;
1799 - 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 || {};
1800 2266 const hasBodyStyles = options.marginReset || options.rootPadding || options.layoutStyles;
1801 2267 let ruleset = "";
1802 2268 if (options.presets && (contentSize || wideSize)) {
1803 2269 ruleset += `${ROOT_CSS_PROPERTIES_SELECTOR} {`;
@@ -1817,169 +2283,33 @@
1817 2283 }
1818 2284 ruleset += "}";
1819 2285 }
1820 2286 if (options.blockStyles) {
1821 - nodesWithStyles.forEach(
1822 - ({
1823 - selector,
1824 - duotoneSelector,
1825 - styles,
1826 - fallbackGapValue,
1827 - hasLayoutSupport,
1828 - featureSelectors,
1829 - styleVariationSelectors,
1830 - skipSelectorWrapper,
1831 - name
1832 - }) => {
1833 - if (featureSelectors) {
1834 - let featureDeclarations = getFeatureDeclarations(
1835 - featureSelectors,
1836 - styles
1837 - );
1838 - featureDeclarations = updateParagraphTextIndentSelector(
1839 - featureDeclarations,
1840 - tree.settings,
1841 - name
1842 - );
1843 - featureDeclarations = updateButtonWidthDeclarations(
1844 - featureDeclarations,
1845 - tree.settings
1846 - );
1847 - Object.entries(featureDeclarations).forEach(
1848 - ([cssSelector, declarations]) => {
1849 - if (declarations.length) {
1850 - const rules = declarations.join(";");
1851 - ruleset += `:root :where(${cssSelector}){${rules};}`;
1852 - }
1853 - }
1854 - );
1855 - }
1856 - if (duotoneSelector) {
1857 - const duotoneStyles = {};
1858 - if (styles?.filter) {
1859 - duotoneStyles.filter = styles.filter;
1860 - delete styles.filter;
1861 - }
1862 - const duotoneDeclarations = getStylesDeclarations(duotoneStyles);
1863 - if (duotoneDeclarations.length) {
1864 - ruleset += `${duotoneSelector}{${duotoneDeclarations.join(
1865 - ";"
1866 - )};}`;
1867 - }
1868 - }
1869 - if (!disableLayoutStyles && (ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport)) {
1870 - ruleset += getLayoutStyles({
1871 - style: styles,
1872 - selector,
1873 - hasBlockGapSupport,
1874 - hasFallbackGapSupport,
1875 - fallbackGapValue
1876 - });
1877 - }
1878 - const styleDeclarations = getStylesDeclarations(
1879 - styles,
1880 - 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,
1881 2304 useRootPaddingAlign,
1882 - tree,
2305 + disableLayoutStyles,
2306 + hasBlockGapSupport,
2307 + hasFallbackGapSupport,
1883 2308 disableRootPadding
1884 - );
1885 - if (styleDeclarations?.length) {
1886 - const generalSelector = skipSelectorWrapper ? selector : `:root :where(${selector})`;
1887 - ruleset += `${generalSelector}{${styleDeclarations.join(
1888 - ";"
1889 - )};}`;
1890 - }
1891 - if (styles?.css) {
1892 - ruleset += processCSSNesting(
1893 - styles.css,
1894 - `:root :where(${selector})`
1895 - );
1896 - }
1897 - if (options.variationStyles && styleVariationSelectors) {
1898 - Object.entries(styleVariationSelectors).forEach(
1899 - ([styleVariationName, styleVariationSelector]) => {
1900 - const styleVariations = styles?.variations?.[styleVariationName];
1901 - if (styleVariations) {
1902 - if (featureSelectors) {
1903 - let featureDeclarations = getFeatureDeclarations(
1904 - featureSelectors,
1905 - styleVariations
1906 - );
1907 - featureDeclarations = updateParagraphTextIndentSelector(
1908 - featureDeclarations,
1909 - tree.settings,
1910 - name
1911 - );
1912 - featureDeclarations = updateButtonWidthDeclarations(
1913 - featureDeclarations,
1914 - tree.settings
1915 - );
1916 - Object.entries(
1917 - featureDeclarations
1918 - ).forEach(
1919 - ([baseSelector, declarations]) => {
1920 - if (declarations.length) {
1921 - const cssSelector = concatFeatureVariationSelectorString(
1922 - baseSelector,
1923 - styleVariationSelector
1924 - );
1925 - const rules = declarations.join(";");
1926 - ruleset += `:root :where(${cssSelector}){${rules};}`;
1927 - }
1928 - }
1929 - );
1930 - }
1931 - const styleVariationDeclarations = getStylesDeclarations(
1932 - styleVariations,
1933 - styleVariationSelector,
1934 - useRootPaddingAlign,
1935 - tree
1936 - );
1937 - if (styleVariationDeclarations.length) {
1938 - ruleset += `:root :where(${styleVariationSelector}){${styleVariationDeclarations.join(
1939 - ";"
1940 - )};}`;
1941 - }
1942 - if (styleVariations?.css) {
1943 - ruleset += processCSSNesting(
1944 - styleVariations.css,
1945 - `:root :where(${styleVariationSelector})`
1946 - );
1947 - }
1948 - if (hasLayoutSupport && styleVariations?.spacing?.blockGap) {
1949 - const variationSelectorWithBlock = styleVariationSelector + selector;
1950 - ruleset += getLayoutStyles({
1951 - style: styleVariations,
1952 - selector: variationSelectorWithBlock,
1953 - hasBlockGapSupport: true,
1954 - hasFallbackGapSupport,
1955 - fallbackGapValue
1956 - });
1957 - }
1958 - }
1959 - }
1960 - );
1961 - }
1962 - const pseudoSelectorStyles = Object.entries(styles).filter(
1963 - ([key]) => key.startsWith(":")
1964 - );
1965 - if (pseudoSelectorStyles?.length) {
1966 - pseudoSelectorStyles.forEach(
1967 - ([pseudoKey, pseudoStyle]) => {
1968 - const pseudoDeclarations = getStylesDeclarations(pseudoStyle);
1969 - if (!pseudoDeclarations?.length) {
1970 - return;
1971 - }
1972 - const _selector = selector.split(",").map((sel) => sel + pseudoKey).join(",");
1973 - const pseudoRule = `:root :where(${_selector}){${pseudoDeclarations.join(
1974 - ";"
1975 - )};}`;
1976 - ruleset += pseudoRule;
1977 - }
1978 - );
1979 - }
1980 - }
1981 - );
2309 + });
2310 + });
2311 + });
1982 2312 }
1983 2313 if (options.layoutStyles) {
1984 2314 ruleset = ruleset + ".wp-site-blocks > .alignleft { float: left; margin-right: 2em; }";
1985 2315 ruleset = ruleset + ".wp-site-blocks > .alignright { float: right; margin-left: 2em; }";
@@ -1985,9 +2315,9 @@
1985 2315 ruleset = ruleset + ".wp-site-blocks > .alignright { float: right; margin-left: 2em; }";
1986 2316 ruleset = ruleset + ".wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }";
1987 2317 }
1988 2318 if (options.blockGap && hasBlockGapSupport) {
1989 - const gapValue = getGapCSSValue(tree?.styles?.spacing?.blockGap) || "0.5em";
2319 + const gapValue = getGapCSSValue(normalizedTree?.styles?.spacing?.blockGap) || "0.5em";
1990 2320 ruleset = ruleset + `:root :where(.wp-site-blocks) > * { margin-block-start: ${gapValue}; margin-block-end: 0; }`;
1991 2321 ruleset = ruleset + ":root :where(.wp-site-blocks) > :first-child { margin-block-start: 0; }";
1992 2322 ruleset = ruleset + ":root :where(.wp-site-blocks) > :last-child { margin-block-end: 0; }";
1993 2323 }
@@ -2048,12 +2378,10 @@
2048 2378 duotoneSelector = scopeSelector(rootSelector, duotoneSupport);
2049 2379 }
2050 2380 }
2051 2381 const hasLayoutSupport = !!blockType?.supports?.layout || !!blockType?.supports?.__experimentalLayout;
2052 - const fallbackGapValue = (
2053 - // @ts-expect-error
2054 - blockType?.supports?.spacing?.blockGap?.__experimentalDefault
2055 - );
2382 + const blockGapSupport = blockType?.supports?.spacing?.blockGap;
2383 + const fallbackGapValue = typeof blockGapSupport === "object" && !Array.isArray(blockGapSupport) ? blockGapSupport.__experimentalDefault : void 0;
2056 2384 const blockStyleVariations = getBlockStyles(name);
2057 2385 const styleVariationSelectors = {};
2058 2386 blockStyleVariations?.forEach((variation) => {
2059 2387 const variationSuffix = variationInstanceId ? `-${variationInstanceId}` : "";
@@ -2143,9 +2471,9 @@
2143 2471 styleOptions = {}
2144 2472 } = options;
2145 2473 const blocks = blockTypes.length > 0 ? blockTypes : (0, import_blocks.getBlockTypes)();
2146 2474 const blockGap = getSetting(config, "spacing.blockGap");
2147 - const hasBlockGapSupport = hasBlockGapSupportOption ?? blockGap !== null;
2475 + const hasBlockGapSupport = hasBlockGapSupportOption ?? (blockGap !== null && blockGap !== void 0);
2148 2476 const hasFallbackGapSupport = hasFallbackGapSupportOption ?? !hasBlockGapSupport;
2149 2477 if (!config?.styles || !config?.settings) {
2150 2478 return [[], {}];
2151 2479 }
@@ -2207,8 +2535,9 @@
2207 2535 }
2208 2536
2209 2537 // packages/lazy-editor/build-module/hooks/use-editor-settings.mjs
2210 2538 var import_core_data3 = __toESM(require_core_data(), 1);
2539 +var import_blocks2 = __toESM(require_blocks(), 1);
2211 2540 var import_element2 = __toESM(require_element(), 1);
2212 2541 var import_data4 = __toESM(require_data(), 1);
2213 2542
2214 2543 // packages/lazy-editor/build-module/hooks/use-global-styles.mjs
@@ -2217,8 +2546,11 @@
2217 2546 var import_element = __toESM(require_element(), 1);
2218 2547 function useUserGlobalStyles(id) {
2219 2548 const { userGlobalStyles } = (0, import_data3.useSelect)(
2220 2549 (select2) => {
2550 + if (id === void 0) {
2551 + return { userGlobalStyles: void 0 };
2552 + }
2221 2553 const { getEntityRecord, getEditedEntityRecord, canUser } = select2(import_core_data2.store);
2222 2554 const userCanEditGlobalStyles = canUser("update", {
2223 2555 kind: "root",
2224 2556 name: "globalStyles",
@@ -2271,19 +2603,25 @@
2271 2603 "@wordpress/lazy-editor"
2272 2604 );
2273 2605
2274 2606 // packages/lazy-editor/build-module/hooks/use-editor-settings.mjs
2275 -function useEditorSettings({ stylesId }) {
2276 - const { editorSettings } = (0, import_data4.useSelect)(
2607 +function useEditorSettings({
2608 + stylesId
2609 +}) {
2610 + const { editorSettings, blockTypes } = (0, import_data4.useSelect)(
2277 2611 (select2) => ({
2278 2612 editorSettings: unlock(
2279 2613 select2(import_core_data3.store)
2280 - ).getEditorSettings()
2614 + ).getEditorSettings(),
2615 + blockTypes: select2(import_blocks2.store).getBlockTypes()
2281 2616 }),
2282 2617 []
2283 2618 );
2284 2619 const { user: globalStyles } = useUserGlobalStyles(stylesId);
2285 - const [globalStylesCSS] = generateGlobalStyles(globalStyles);
2620 + const [globalStylesCSS] = (0, import_element2.useMemo)(
2621 + () => generateGlobalStyles(globalStyles, blockTypes),
2622 + [globalStyles, blockTypes]
2623 + );
2286 2624 const hasEditorSettings = !!editorSettings;
2287 2625 const styles = (0, import_element2.useMemo)(() => {
2288 2626 if (!hasEditorSettings) {
2289 2627 return [];
@@ -2565,14 +2903,23 @@
2565 2903 }
2566 2904
2567 2905 // packages/lazy-editor/build-module/components/editor/index.mjs
2568 2906 var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
2569 -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);
2570 2914 function Editor({
2571 2915 postType,
2572 2916 postId,
2573 2917 settings,
2574 - backButton
2918 + backButton,
2919 + onActionPerformed,
2920 + initialViewport,
2921 + renderingMode
2575 2922 }) {
2576 2923 const homePage = (0, import_data6.useSelect)(
2577 2924 (select2) => {
2578 2925 if (postType || postId) {
@@ -2607,9 +2954,19 @@
2607 2954 const { isReady: assetsReady } = useEditorAssets();
2608 2955 const finalSettings = (0, import_element4.useMemo)(
2609 2956 () => ({
2610 2957 ...editorSettings,
2611 - ...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 + ]
2612 2969 }),
2613 2970 [editorSettings, settings]
2614 2971 );
2615 2972 if (!settingsReady || !assetsReady) {
@@ -2625,9 +2982,9 @@
2625 2982 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {})
2626 2983 }
2627 2984 );
2628 2985 }
2629 - return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2986 + return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2630 2987 PrivateEditor,
2631 2988 {
2632 2989 postType: resolvedPostType,
2633 2990 postId: resolvedPostId,
@@ -2633,9 +2990,16 @@
2633 2990 postId: resolvedPostId,
2634 2991 templateId,
2635 2992 settings: finalSettings,
2636 2993 styles: finalSettings.styles,
2637 - 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 + ]
2638 3002 }
2639 3003 );
2640 3004 }
2641 3005
@@ -2643,11 +3007,11 @@
2643 3007 var import_i18n = __toESM(require_i18n(), 1);
2644 3008 var import_element5 = __toESM(require_element(), 1);
2645 3009 var import_block_editor = __toESM(require_block_editor(), 1);
2646 3010 var import_editor2 = __toESM(require_editor(), 1);
2647 -var import_blocks2 = __toESM(require_blocks(), 1);
3011 +var import_blocks3 = __toESM(require_blocks(), 1);
2648 3012 var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
2649 -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']")) {
2650 3014 const style = document.createElement("style");
2651 3015 style.setAttribute("data-wp-hash", "95327475c1");
2652 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}"));
2653 3017 document.head.appendChild(style);
@@ -2660,9 +3024,9 @@
2660 3024 }) {
2661 3025 const descriptionId = (0, import_element5.useId)();
2662 3026 const backgroundColor = useStyle("color.background");
2663 3027 const actualBlocks = (0, import_element5.useMemo)(() => {
2664 - return blocks ?? (0, import_blocks2.parse)(content, {
3028 + return blocks ?? (0, import_blocks3.parse)(content, {
2665 3029 __unstableSkipMigrationLogs: true
2666 3030 });
2667 3031 }, [content, blocks]);
2668 3032 const isEmpty = !actualBlocks?.length;