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