PluginProbe
Gutenberg / trunk
Gutenberg vtrunk
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 +453 -207 23.3.0 → 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 : "";
@@ -513,8 +524,16 @@
513 524 { classSuffix: "font-family", propertyName: "font-family" }
514 525 ]
515 526 },
516 527 {
528 + path: ["typography", "textShadowPresets"],
529 + valueKey: "textShadow",
530 + cssVarInfix: "text-shadow",
531 + classes: [
532 + { classSuffix: "text-shadow", propertyName: "text-shadow" }
533 + ]
534 + },
535 + {
517 536 path: ["spacing", "spacingSizes"],
518 537 valueKey: "size",
519 538 cssVarInfix: "spacing",
520 539 valueFunc: ({ size }) => size,
@@ -582,12 +601,10 @@
582 601 const variationClass = `.is-style-${variation}`;
583 602 if (!blockSelector) {
584 603 return variationClass;
585 604 }
586 - const ancestorRegex = /((?::\([^)]+\))?\s*)([^\s:]+)/;
587 - const addVariationClass = (_match, group1, group2) => {
588 - return group1 + group2 + variationClass;
589 - };
605 + const ancestorRegex = /[^\s:]+/;
606 + const addVariationClass = (match) => match + variationClass;
590 607 const result = splitSelectorList(blockSelector).map(
591 608 (part) => part.replace(ancestorRegex, addVariationClass)
592 609 );
593 610 return result.join(",");
@@ -644,16 +661,71 @@
644 661 return ruleValue;
645 662 }
646 663 const resolvedValue = getResolvedRefValue(ruleValue, tree);
647 664 if (typeof resolvedValue === "object" && resolvedValue !== null && "url" in resolvedValue && resolvedValue?.url) {
648 - resolvedValue.url = getResolvedThemeFilePath(
649 - resolvedValue.url,
650 - tree?._links?.["wp:theme-file"]
651 - );
665 + return {
666 + ...resolvedValue,
667 + url: getResolvedThemeFilePath(
668 + resolvedValue.url,
669 + tree?._links?.["wp:theme-file"]
670 + )
671 + };
652 672 }
653 673 return resolvedValue;
654 674 }
655 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 +
656 728 // packages/global-styles-engine/build-module/core/render.mjs
657 729 var import_blocks = __toESM(require_blocks(), 1);
658 730 var import_style_engine2 = __toESM(require_style_engine(), 1);
659 731 var import_data2 = __toESM(require_data(), 1);
@@ -712,163 +784,176 @@
712 784 return null;
713 785 }
714 786
715 787 // node_modules/colord/index.mjs
716 -var r = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) };
717 -var t = function(r2) {
788 +for (r = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) }, t = function(r2) {
718 789 return "string" == typeof r2 ? r2.length > 0 : "number" == typeof r2;
719 -};
720 -var n = function(r2, t2, n2) {
790 +}, n = function(r2, t2, n2) {
721 791 return void 0 === t2 && (t2 = 0), void 0 === n2 && (n2 = Math.pow(10, t2)), Math.round(n2 * r2) / n2 + 0;
722 -};
723 -var e = function(r2, t2, n2) {
792 +}, u = function(r2, t2, n2) {
724 793 return void 0 === t2 && (t2 = 0), void 0 === n2 && (n2 = 1), r2 > n2 ? n2 : r2 > t2 ? r2 : t2;
725 -};
726 -var u = function(r2) {
727 - return (r2 = isFinite(r2) ? r2 % 360 : 0) > 0 ? r2 : r2 + 360;
728 -};
729 -var a = function(r2) {
730 - return { r: e(r2.r, 0, 255), g: e(r2.g, 0, 255), b: e(r2.b, 0, 255), a: e(r2.a) };
731 -};
732 -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) {
733 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)];
734 823 };
735 -var i = /^#([0-9a-f]{3,8})$/i;
736 -var s = function(r2) {
737 - var t2 = r2.toString(16);
738 - 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 };
739 827 };
740 -var h = function(r2) {
741 - 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;
742 - 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 };
743 833 };
744 -var b = function(r2) {
745 - var t2 = r2.h, n2 = r2.s, e2 = r2.v, u2 = r2.a;
746 - t2 = t2 / 360 * 6, n2 /= 100, e2 /= 100;
747 - 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;
748 - 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) };
749 836 };
750 -var g = function(r2) {
751 - 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) };
752 839 };
753 -var d = function(r2) {
754 - 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;
755 843 };
756 -var f = function(r2) {
757 - 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 }));
758 - 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;
759 847 };
760 -var c = function(r2) {
761 - 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 };
762 - var t2, n2, e2, u2;
763 -};
764 -var l = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i;
765 -var p = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i;
766 -var v = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i;
767 -var m = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i;
768 -var y = { string: [[function(r2) {
769 - var t2 = i.exec(r2);
770 - 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;
771 -}, "hex"], [function(r2) {
772 - var t2 = v.exec(r2) || m.exec(r2);
773 - 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;
774 -}, "rgb"], [function(t2) {
775 - var n2 = l.exec(t2) || p.exec(t2);
776 - if (!n2) return null;
777 - 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) });
778 - return f(a2);
779 -}, "hsl"]], object: [[function(r2) {
780 - var n2 = r2.r, e2 = r2.g, u2 = r2.b, o2 = r2.a, i2 = void 0 === o2 ? 1 : o2;
781 - return t(n2) && t(e2) && t(u2) ? a({ r: Number(n2), g: Number(e2), b: Number(u2), a: Number(i2) }) : null;
782 -}, "rgb"], [function(r2) {
783 - var n2 = r2.h, e2 = r2.s, u2 = r2.l, a2 = r2.a, o2 = void 0 === a2 ? 1 : a2;
784 - if (!t(n2) || !t(e2) || !t(u2)) return null;
785 - var i2 = g({ h: Number(n2), s: Number(e2), l: Number(u2), a: Number(o2) });
786 - return f(i2);
787 -}, "hsl"], [function(r2) {
788 - var n2 = r2.h, a2 = r2.s, o2 = r2.v, i2 = r2.a, s2 = void 0 === i2 ? 1 : i2;
789 - if (!t(n2) || !t(a2) || !t(o2)) return null;
790 - var h2 = (function(r3) {
791 - return { h: u(r3.h), s: e(r3.s, 0, 100), v: e(r3.v, 0, 100), a: e(r3.a) };
792 - })({ h: Number(n2), s: Number(a2), v: Number(o2), a: Number(s2) });
793 - 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);
794 879 }, "hsv"]] };
795 -var N = function(r2, t2) {
796 - for (var n2 = 0; n2 < t2.length; n2++) {
797 - var e2 = t2[n2][0](r2);
798 - 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]];
799 884 }
800 885 return [null, void 0];
801 886 };
802 -var x = function(r2) {
803 - 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];
804 889 };
805 -var M = function(r2, t2) {
806 - var n2 = c(r2);
807 - 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 };
808 893 };
809 -var H = function(r2) {
810 - 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;
811 896 };
812 -var $ = function(r2, t2) {
813 - var n2 = c(r2);
814 - 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 };
815 900 };
816 -var j = (function() {
817 - function r2(r3) {
818 - 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 };
819 904 }
820 - return r2.prototype.isValid = function() {
905 + return r.prototype.isValid = function() {
821 906 return null !== this.parsed;
822 - }, r2.prototype.brightness = function() {
823 - return n(H(this.rgba), 2);
824 - }, r2.prototype.isDark = function() {
825 - return H(this.rgba) < 0.5;
826 - }, r2.prototype.isLight = function() {
827 - return H(this.rgba) >= 0.5;
828 - }, r2.prototype.toHex = function() {
829 - 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;
830 - var r3, t2, e2, u2, a2, i2;
831 - }, r2.prototype.toRgb = function() {
832 - return o(this.rgba);
833 - }, r2.prototype.toRgbString = function() {
834 - 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 + ")";
835 - var r3, t2, n2, e2, u2;
836 - }, r2.prototype.toHsl = function() {
837 - return d(c(this.rgba));
838 - }, r2.prototype.toHslString = function() {
839 - 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 + "%)";
840 - var r3, t2, n2, e2, u2;
841 - }, r2.prototype.toHsv = function() {
842 - return r3 = h(this.rgba), { h: n(r3.h), s: n(r3.s), v: n(r3.v), a: n(r3.a, 3) };
843 - var r3;
844 - }, r2.prototype.invert = function() {
845 - return w({ r: 255 - (r3 = this.rgba).r, g: 255 - r3.g, b: 255 - r3.b, a: r3.a });
846 - var r3;
847 - }, r2.prototype.saturate = function(r3) {
848 - return void 0 === r3 && (r3 = 0.1), w(M(this.rgba, r3));
849 - }, r2.prototype.desaturate = function(r3) {
850 - return void 0 === r3 && (r3 = 0.1), w(M(this.rgba, -r3));
851 - }, r2.prototype.grayscale = function() {
852 - return w(M(this.rgba, -1));
853 - }, r2.prototype.lighten = function(r3) {
854 - return void 0 === r3 && (r3 = 0.1), w($(this.rgba, r3));
855 - }, r2.prototype.darken = function(r3) {
856 - return void 0 === r3 && (r3 = 0.1), w($(this.rgba, -r3));
857 - }, r2.prototype.rotate = function(r3) {
858 - return void 0 === r3 && (r3 = 15), this.hue(this.hue() + r3);
859 - }, r2.prototype.alpha = function(r3) {
860 - return "number" == typeof r3 ? w({ r: (t2 = this.rgba).r, g: t2.g, b: t2.b, a: r3 }) : n(this.rgba.a, 3);
861 - var t2;
862 - }, r2.prototype.hue = function(r3) {
863 - var t2 = c(this.rgba);
864 - return "number" == typeof r3 ? w({ h: r3, s: t2.s, l: t2.l, a: t2.a }) : n(t2.h);
865 - }, r2.prototype.isEqual = function(r3) {
866 - return this.toHex() === w(r3).toHex();
867 - }, 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;
868 953 })();
869 -var w = function(r2) {
870 - return r2 instanceof j ? r2 : new j(r2);
954 +var A = function(r) {
955 + return r instanceof q ? r : new q(r);
871 956 };
872 957
873 958 // packages/global-styles-engine/build-module/utils/duotone.mjs
874 959 function getValuesFromColors(colors = []) {
@@ -878,9 +963,9 @@
878 963 b: [],
879 964 a: []
880 965 };
881 966 colors.forEach((color) => {
882 - const rgbColor = w(color).toRgb();
967 + const rgbColor = A(color).toRgb();
883 968 values.r.push(rgbColor.r / 255);
884 969 values.g.push(rgbColor.g / 255);
885 970 values.b.push(rgbColor.b / 255);
886 971 values.a.push(rgbColor.a);
@@ -964,11 +1049,13 @@
964 1049 backgroundSize: "cover",
965 1050 backgroundPosition: "50% 50%"
966 1051 // used only when backgroundSize is 'contain'.
967 1052 };
1053 +function hasImageUrl(backgroundImage) {
1054 + return typeof backgroundImage === "object" && backgroundImage !== null && "url" in backgroundImage && !!backgroundImage.url;
1055 +}
968 1056 function setBackgroundStyleDefaults(backgroundStyle) {
969 - if (!backgroundStyle || // @ts-expect-error
970 - !backgroundStyle?.backgroundImage?.url) {
1057 + if (!backgroundStyle || !hasImageUrl(backgroundStyle.backgroundImage)) {
971 1058 return;
972 1059 }
973 1060 let backgroundStylesWithDefaults;
974 1061 if (!backgroundStyle?.backgroundSize) {
@@ -1156,8 +1243,84 @@
1156 1243 ]
1157 1244 }
1158 1245 };
1159 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 +
1160 1323 // packages/global-styles-engine/build-module/core/render.mjs
1161 1324 var ELEMENT_CLASS_NAMES = {
1162 1325 button: "wp-element-button",
1163 1326 caption: "wp-element-caption"
@@ -1192,12 +1355,8 @@
1192 1355 ":focus-visible",
1193 1356 ":active"
1194 1357 ]
1195 1358 };
1196 -var RESPONSIVE_BREAKPOINTS = {
1197 - mobile: "@media (width <= 480px)",
1198 - tablet: "@media (480px < width <= 782px)"
1199 -};
1200 1359 function getPresetsClasses(blockSelector = "*", blockPresets = {}) {
1201 1360 return PRESET_METADATA.reduce(
1202 1361 (declarations, { path, cssVarInfix, classes }) => {
1203 1362 if (!classes) {
@@ -1219,11 +1378,9 @@
1219 1378 }) => {
1220 1379 const classSelectorToUse = `.has-${kebabCase(
1221 1380 slug
1222 1381 )}-${classSuffix}`;
1223 - const selectorToUse = blockSelector.split(",").map(
1224 - (selector) => `${selector}${classSelectorToUse}`
1225 - ).join(",");
1382 + const selectorToUse = blockSelector ? `:where(${blockSelector})${classSelectorToUse}` : classSelectorToUse;
1226 1383 const value = `var(--wp--preset--${cssVarInfix}--${kebabCase(
1227 1384 slug
1228 1385 )})`;
1229 1386 declarations += `${selectorToUse}{${propertyName}: ${value} !important;}`;
@@ -1247,9 +1404,9 @@
1247 1404 blockPresets,
1248 1405 metadata.path,
1249 1406 {}
1250 1407 );
1251 - return ["default", "theme"].filter((origin) => presetByOrigin[origin]).flatMap(
1408 + return ["default", "theme", "custom"].filter((origin) => presetByOrigin[origin]).flatMap(
1252 1409 (origin) => presetByOrigin[origin].map(
1253 1410 (preset) => getDuotoneFilter(
1254 1411 `wp-duotone-${preset.slug}`,
1255 1412 preset.colors
@@ -1469,9 +1626,10 @@
1469 1626 hasFallbackGapSupport,
1470 1627 fallbackGapValue
1471 1628 }) {
1472 1629 let ruleset = "";
1473 - let gapValue = hasBlockGapSupport ? getGapCSSValue(style?.spacing?.blockGap) : "";
1630 + const blockGapValue = style?.spacing?.blockGap;
1631 + let gapValue = hasBlockGapSupport ? getGapCSSValue(blockGapValue) : "";
1474 1632 if (hasFallbackGapSupport) {
1475 1633 if (selector === ROOT_BLOCK_SELECTOR) {
1476 1634 gapValue = !gapValue ? "0.5em" : gapValue;
1477 1635 } else if (!hasBlockGapSupport && fallbackGapValue) {
@@ -1477,8 +1635,9 @@
1477 1635 } else if (!hasBlockGapSupport && fallbackGapValue) {
1478 1636 gapValue = fallbackGapValue;
1479 1637 }
1480 1638 }
1639 + const rowGapValue = hasBlockGapSupport && blockGapValue && typeof blockGapValue !== "string" ? getGapCSSValue(blockGapValue.top) : gapValue;
1481 1640 if (gapValue && layoutDefinitions) {
1482 1641 Object.values(layoutDefinitions).forEach(
1483 1642 ({ className, name, spacingStyles }) => {
1484 1643 if (!hasBlockGapSupport && "flex" !== name && "grid" !== name) {
@@ -1483,8 +1642,11 @@
1483 1642 ({ className, name, spacingStyles }) => {
1484 1643 if (!hasBlockGapSupport && "flex" !== name && "grid" !== name) {
1485 1644 return;
1486 1645 }
1646 + const layoutGapValue = ["default", "constrained"].includes(
1647 + name
1648 + ) ? rowGapValue : gapValue;
1487 1649 if (spacingStyles?.length) {
1488 1650 spacingStyles.forEach((spacingStyle) => {
1489 1651 const declarations = [];
1490 1652 if (spacingStyle.rules) {
@@ -1490,9 +1652,9 @@
1490 1652 if (spacingStyle.rules) {
1491 1653 Object.entries(spacingStyle.rules).forEach(
1492 1654 ([cssProperty, cssValue]) => {
1493 1655 declarations.push(
1494 - `${cssProperty}: ${cssValue ? cssValue : gapValue}`
1656 + `${cssProperty}: ${cssValue ? cssValue : layoutGapValue}`
1495 1657 );
1496 1658 }
1497 1659 );
1498 1660 }
@@ -1557,12 +1719,16 @@
1557 1719 "outline",
1558 1720 "shadow",
1559 1721 "background"
1560 1722 ];
1561 -function pickStyleKeys(treeToPickFrom) {
1562 - return pickStyleAndPseudoKeys(treeToPickFrom);
1723 +function pickStyleKeys(treeToPickFrom, responsiveMediaQueries) {
1724 + return pickStyleAndPseudoKeys(
1725 + treeToPickFrom,
1726 + void 0,
1727 + responsiveMediaQueries
1728 + );
1563 1729 }
1564 -function pickStyleAndPseudoKeys(treeToPickFrom, blockName) {
1730 +function pickStyleAndPseudoKeys(treeToPickFrom, blockName, responsiveMediaQueries) {
1565 1731 if (!treeToPickFrom) {
1566 1732 return {};
1567 1733 }
1568 1734 const entries = Object.entries(treeToPickFrom);
@@ -1567,9 +1733,9 @@
1567 1733 }
1568 1734 const entries = Object.entries(treeToPickFrom);
1569 1735 const allowedPseudoSelectors = blockName ? VALID_BLOCK_PSEUDO_SELECTORS[blockName] ?? [] : [];
1570 1736 const pickedEntries = entries.filter(
1571 - ([key]) => STYLE_KEYS.includes(key) || allowedPseudoSelectors.includes(key) || RESPONSIVE_BREAKPOINTS[key]
1737 + ([key]) => STYLE_KEYS.includes(key) || allowedPseudoSelectors.includes(key) || responsiveMediaQueries[key]
1572 1738 );
1573 1739 const clonedEntries = pickedEntries.map(([key, style]) => [
1574 1740 key,
1575 1741 JSON.parse(JSON.stringify(style))
@@ -1608,13 +1774,17 @@
1608 1774 }
1609 1775 ];
1610 1776 });
1611 1777 }
1612 -function getResponsiveStyleNodes(node) {
1778 +function getResponsiveStyleNodes(node, responsiveMediaQueries) {
1613 1779 const {
1614 1780 styles,
1615 1781 selector,
1782 + fallbackGapValue,
1616 1783 featureSelectors,
1784 + hasLayoutSupport,
1785 + layoutHasBlockGapSupport,
1786 + layoutSelector,
1617 1787 name,
1618 1788 elementName,
1619 1789 isStyleVariation,
1620 1790 variationName
@@ -1621,9 +1791,9 @@
1621 1791 } = node;
1622 1792 if (!name && !elementName) {
1623 1793 return [];
1624 1794 }
1625 - return Object.entries(RESPONSIVE_BREAKPOINTS).flatMap(
1795 + return Object.entries(responsiveMediaQueries).flatMap(
1626 1796 ([breakpointKey, mediaQuery]) => {
1627 1797 const breakpointStyles = styles?.[breakpointKey];
1628 1798 if (!breakpointStyles || typeof breakpointStyles !== "object") {
1629 1799 return [];
@@ -1633,23 +1803,42 @@
1633 1803 styles: JSON.parse(JSON.stringify(breakpointStyles)),
1634 1804 selector,
1635 1805 mediaQuery,
1636 1806 featureSelectors: featureSelectors && typeof featureSelectors !== "string" ? featureSelectors : void 0,
1807 + fallbackGapValue,
1808 + hasLayoutSupport,
1637 1809 name,
1638 1810 elementName,
1639 1811 isStyleVariation,
1640 - variationName
1812 + variationName,
1813 + layoutSelector,
1814 + layoutHasBlockGapSupport
1641 1815 }
1642 1816 ];
1643 1817 }
1644 1818 );
1645 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 +}
1646 1834 var getNodesWithStyles = (tree, blockSelectors) => {
1647 1835 const nodes = [];
1648 1836 if (!tree?.styles) {
1649 1837 return nodes;
1650 1838 }
1651 - const styles = pickStyleKeys(tree.styles);
1839 + const responsiveMediaQueries = getResponsiveMediaQueries(tree);
1840 + const styles = pickStyleKeys(tree.styles, responsiveMediaQueries);
1652 1841 if (styles) {
1653 1842 nodes.push({
1654 1843 styles,
1655 1844 selector: ROOT_BLOCK_SELECTOR,
@@ -1671,9 +1860,13 @@
1671 1860 }
1672 1861 });
1673 1862 Object.entries(tree.styles?.blocks ?? {}).forEach(
1674 1863 ([blockName, node]) => {
1675 - const blockStyles = pickStyleAndPseudoKeys(node, blockName);
1864 + const blockStyles = pickStyleAndPseudoKeys(
1865 + node,
1866 + blockName,
1867 + responsiveMediaQueries
1868 + );
1676 1869 const typedNode = node;
1677 1870 const variationNodesToAdd = [];
1678 1871 const variationStyleNodesToAdd = [];
1679 1872 if (typedNode?.variations) {
@@ -1681,9 +1874,10 @@
1681 1874 ([variationName, variation]) => {
1682 1875 const typedVariation = variation;
1683 1876 const variationStyles = pickStyleAndPseudoKeys(
1684 1877 typedVariation,
1685 - blockName
1878 + blockName,
1879 + responsiveMediaQueries
1686 1880 );
1687 1881 if (typedVariation?.css) {
1688 1882 variationStyles.css = typedVariation.css;
1689 1883 }
@@ -1703,9 +1897,12 @@
1703 1897 name: blockName
1704 1898 });
1705 1899 }
1706 1900 Object.entries(
1707 - typedVariation?.elements ?? {}
1901 + getElementStylesByName(
1902 + typedVariation,
1903 + responsiveMediaQueries
1904 + )
1708 1905 ).forEach(([element, elementStyles]) => {
1709 1906 if (elementStyles && import_blocks.__EXPERIMENTAL_ELEMENTS[element]) {
1710 1907 variationNodesToAdd.push({
1711 1908 styles: elementStyles,
@@ -1736,9 +1933,10 @@
1736 1933 blockSelectors[variationBlockName]?.featureSelectors ?? {}
1737 1934 ) : void 0;
1738 1935 const variationBlockStyleNodes = pickStyleAndPseudoKeys(
1739 1936 variationBlockStyles,
1740 - variationBlockName
1937 + variationBlockName,
1938 + responsiveMediaQueries
1741 1939 );
1742 1940 if (variationBlockStyles?.css) {
1743 1941 variationBlockStyleNodes.css = variationBlockStyles.css;
1744 1942 }
@@ -1755,9 +1953,12 @@
1755 1953 hasLayoutSupport: blockSelectors[variationBlockName]?.hasLayoutSupport,
1756 1954 styles: variationBlockStyleNodes
1757 1955 });
1758 1956 Object.entries(
1759 - variationBlockStyles.elements ?? {}
1957 + getElementStylesByName(
1958 + variationBlockStyles,
1959 + responsiveMediaQueries
1960 + )
1760 1961 ).forEach(
1761 1962 ([
1762 1963 variationBlockElement,
1763 1964 variationBlockElementStyles
@@ -1791,24 +1992,24 @@
1791 1992 name: blockName
1792 1993 });
1793 1994 }
1794 1995 nodes.push(...variationStyleNodesToAdd);
1795 - Object.entries(typedNode?.elements ?? {}).forEach(
1796 - ([elementName, value]) => {
1797 - if (typeof blockSelectors !== "string" && value && blockSelectors?.[blockName] && import_blocks.__EXPERIMENTAL_ELEMENTS[elementName]) {
1798 - nodes.push({
1799 - styles: value,
1800 - selector: blockSelectors[blockName]?.selector.split(",").map((sel) => {
1801 - const elementSelectors = import_blocks.__EXPERIMENTAL_ELEMENTS[elementName].split(",");
1802 - return elementSelectors.map(
1803 - (elementSelector) => sel + " " + elementSelector
1804 - );
1805 - }).join(","),
1806 - elementName
1807 - });
1808 - }
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 + });
1809 2010 }
1810 - );
2011 + });
1811 2012 nodes.push(...variationNodesToAdd);
1812 2013 }
1813 2014 );
1814 2015 return nodes;
@@ -2050,12 +2251,19 @@
2050 2251 rootPadding: true,
2051 2252 variationStyles: false,
2052 2253 ...styleOptions
2053 2254 };
2054 - const nodesWithStyles = getNodesWithStyles(tree, blockSelectors);
2055 - const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
2056 - const useRootPaddingAlign = tree?.settings?.useRootPaddingAwareAlignments;
2057 - 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 || {};
2058 2266 const hasBodyStyles = options.marginReset || options.rootPadding || options.layoutStyles;
2059 2267 let ruleset = "";
2060 2268 if (options.presets && (contentSize || wideSize)) {
2061 2269 ruleset += `${ROOT_CSS_PROPERTIES_SELECTOR} {`;
@@ -2075,13 +2283,17 @@
2075 2283 }
2076 2284 ruleset += "}";
2077 2285 }
2078 2286 if (options.blockStyles) {
2287 + const responsiveMediaQueries = getResponsiveMediaQueries(tree);
2079 2288 nodesWithStyles.forEach((node) => {
2080 2289 if (node.isStyleVariation && !options.variationStyles) {
2081 2290 return;
2082 2291 }
2083 - const responsiveNodes = getResponsiveStyleNodes(node);
2292 + const responsiveNodes = getResponsiveStyleNodes(
2293 + node,
2294 + responsiveMediaQueries
2295 + );
2084 2296 [
2085 2297 node,
2086 2298 ...responsiveNodes,
2087 2299 ...getPseudoStyleNodes(node),
@@ -2087,9 +2299,9 @@
2087 2299 ...getPseudoStyleNodes(node),
2088 2300 ...responsiveNodes.flatMap(getPseudoStyleNodes)
2089 2301 ].forEach((expandedNode) => {
2090 2302 ruleset += renderStylesNode(expandedNode, {
2091 - tree,
2303 + tree: normalizedTree,
2092 2304 useRootPaddingAlign,
2093 2305 disableLayoutStyles,
2094 2306 hasBlockGapSupport,
2095 2307 hasFallbackGapSupport,
@@ -2103,9 +2315,9 @@
2103 2315 ruleset = ruleset + ".wp-site-blocks > .alignright { float: right; margin-left: 2em; }";
2104 2316 ruleset = ruleset + ".wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }";
2105 2317 }
2106 2318 if (options.blockGap && hasBlockGapSupport) {
2107 - const gapValue = getGapCSSValue(tree?.styles?.spacing?.blockGap) || "0.5em";
2319 + const gapValue = getGapCSSValue(normalizedTree?.styles?.spacing?.blockGap) || "0.5em";
2108 2320 ruleset = ruleset + `:root :where(.wp-site-blocks) > * { margin-block-start: ${gapValue}; margin-block-end: 0; }`;
2109 2321 ruleset = ruleset + ":root :where(.wp-site-blocks) > :first-child { margin-block-start: 0; }";
2110 2322 ruleset = ruleset + ":root :where(.wp-site-blocks) > :last-child { margin-block-end: 0; }";
2111 2323 }
@@ -2166,12 +2378,10 @@
2166 2378 duotoneSelector = scopeSelector(rootSelector, duotoneSupport);
2167 2379 }
2168 2380 }
2169 2381 const hasLayoutSupport = !!blockType?.supports?.layout || !!blockType?.supports?.__experimentalLayout;
2170 - const fallbackGapValue = (
2171 - // @ts-expect-error
2172 - blockType?.supports?.spacing?.blockGap?.__experimentalDefault
2173 - );
2382 + const blockGapSupport = blockType?.supports?.spacing?.blockGap;
2383 + const fallbackGapValue = typeof blockGapSupport === "object" && !Array.isArray(blockGapSupport) ? blockGapSupport.__experimentalDefault : void 0;
2174 2384 const blockStyleVariations = getBlockStyles(name);
2175 2385 const styleVariationSelectors = {};
2176 2386 blockStyleVariations?.forEach((variation) => {
2177 2387 const variationSuffix = variationInstanceId ? `-${variationInstanceId}` : "";
@@ -2261,9 +2471,9 @@
2261 2471 styleOptions = {}
2262 2472 } = options;
2263 2473 const blocks = blockTypes.length > 0 ? blockTypes : (0, import_blocks.getBlockTypes)();
2264 2474 const blockGap = getSetting(config, "spacing.blockGap");
2265 - const hasBlockGapSupport = hasBlockGapSupportOption ?? blockGap !== null;
2475 + const hasBlockGapSupport = hasBlockGapSupportOption ?? (blockGap !== null && blockGap !== void 0);
2266 2476 const hasFallbackGapSupport = hasFallbackGapSupportOption ?? !hasBlockGapSupport;
2267 2477 if (!config?.styles || !config?.settings) {
2268 2478 return [[], {}];
2269 2479 }
@@ -2325,8 +2535,9 @@
2325 2535 }
2326 2536
2327 2537 // packages/lazy-editor/build-module/hooks/use-editor-settings.mjs
2328 2538 var import_core_data3 = __toESM(require_core_data(), 1);
2539 +var import_blocks2 = __toESM(require_blocks(), 1);
2329 2540 var import_element2 = __toESM(require_element(), 1);
2330 2541 var import_data4 = __toESM(require_data(), 1);
2331 2542
2332 2543 // packages/lazy-editor/build-module/hooks/use-global-styles.mjs
@@ -2335,8 +2546,11 @@
2335 2546 var import_element = __toESM(require_element(), 1);
2336 2547 function useUserGlobalStyles(id) {
2337 2548 const { userGlobalStyles } = (0, import_data3.useSelect)(
2338 2549 (select2) => {
2550 + if (id === void 0) {
2551 + return { userGlobalStyles: void 0 };
2552 + }
2339 2553 const { getEntityRecord, getEditedEntityRecord, canUser } = select2(import_core_data2.store);
2340 2554 const userCanEditGlobalStyles = canUser("update", {
2341 2555 kind: "root",
2342 2556 name: "globalStyles",
@@ -2389,19 +2603,25 @@
2389 2603 "@wordpress/lazy-editor"
2390 2604 );
2391 2605
2392 2606 // packages/lazy-editor/build-module/hooks/use-editor-settings.mjs
2393 -function useEditorSettings({ stylesId }) {
2394 - const { editorSettings } = (0, import_data4.useSelect)(
2607 +function useEditorSettings({
2608 + stylesId
2609 +}) {
2610 + const { editorSettings, blockTypes } = (0, import_data4.useSelect)(
2395 2611 (select2) => ({
2396 2612 editorSettings: unlock(
2397 2613 select2(import_core_data3.store)
2398 - ).getEditorSettings()
2614 + ).getEditorSettings(),
2615 + blockTypes: select2(import_blocks2.store).getBlockTypes()
2399 2616 }),
2400 2617 []
2401 2618 );
2402 2619 const { user: globalStyles } = useUserGlobalStyles(stylesId);
2403 - const [globalStylesCSS] = generateGlobalStyles(globalStyles);
2620 + const [globalStylesCSS] = (0, import_element2.useMemo)(
2621 + () => generateGlobalStyles(globalStyles, blockTypes),
2622 + [globalStyles, blockTypes]
2623 + );
2404 2624 const hasEditorSettings = !!editorSettings;
2405 2625 const styles = (0, import_element2.useMemo)(() => {
2406 2626 if (!hasEditorSettings) {
2407 2627 return [];
@@ -2683,14 +2903,23 @@
2683 2903 }
2684 2904
2685 2905 // packages/lazy-editor/build-module/components/editor/index.mjs
2686 2906 var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
2687 -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);
2688 2914 function Editor({
2689 2915 postType,
2690 2916 postId,
2691 2917 settings,
2692 - backButton
2918 + backButton,
2919 + onActionPerformed,
2920 + initialViewport,
2921 + renderingMode
2693 2922 }) {
2694 2923 const homePage = (0, import_data6.useSelect)(
2695 2924 (select2) => {
2696 2925 if (postType || postId) {
@@ -2725,9 +2954,19 @@
2725 2954 const { isReady: assetsReady } = useEditorAssets();
2726 2955 const finalSettings = (0, import_element4.useMemo)(
2727 2956 () => ({
2728 2957 ...editorSettings,
2729 - ...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 + ]
2730 2969 }),
2731 2970 [editorSettings, settings]
2732 2971 );
2733 2972 if (!settingsReady || !assetsReady) {
@@ -2743,9 +2982,9 @@
2743 2982 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {})
2744 2983 }
2745 2984 );
2746 2985 }
2747 - return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2986 + return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2748 2987 PrivateEditor,
2749 2988 {
2750 2989 postType: resolvedPostType,
2751 2990 postId: resolvedPostId,
@@ -2751,9 +2990,16 @@
2751 2990 postId: resolvedPostId,
2752 2991 templateId,
2753 2992 settings: finalSettings,
2754 2993 styles: finalSettings.styles,
2755 - 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 + ]
2756 3002 }
2757 3003 );
2758 3004 }
2759 3005
@@ -2761,11 +3007,11 @@
2761 3007 var import_i18n = __toESM(require_i18n(), 1);
2762 3008 var import_element5 = __toESM(require_element(), 1);
2763 3009 var import_block_editor = __toESM(require_block_editor(), 1);
2764 3010 var import_editor2 = __toESM(require_editor(), 1);
2765 -var import_blocks2 = __toESM(require_blocks(), 1);
3011 +var import_blocks3 = __toESM(require_blocks(), 1);
2766 3012 var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
2767 -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']")) {
2768 3014 const style = document.createElement("style");
2769 3015 style.setAttribute("data-wp-hash", "95327475c1");
2770 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}"));
2771 3017 document.head.appendChild(style);
@@ -2778,9 +3024,9 @@
2778 3024 }) {
2779 3025 const descriptionId = (0, import_element5.useId)();
2780 3026 const backgroundColor = useStyle("color.background");
2781 3027 const actualBlocks = (0, import_element5.useMemo)(() => {
2782 - return blocks ?? (0, import_blocks2.parse)(content, {
3028 + return blocks ?? (0, import_blocks3.parse)(content, {
2783 3029 __unstableSkipMigrationLogs: true
2784 3030 });
2785 3031 }, [content, blocks]);
2786 3032 const isEmpty = !actualBlocks?.length;