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 +512 -260 23.2.2 → trunk View file →
@@ -121,8 +121,14 @@
121 121 templateId
122 122 ) : null;
123 123 return {
124 124 globalStylesId: coreDataSelect.__experimentalGetCurrentGlobalStylesId(),
125 + /*
126 + * `styles_id` is not part of the template REST schema, so it
127 + * cannot come from the record type. It is read defensively in
128 + * case a filtered response carries one; without it the hook
129 + * falls back to the global styles ID below.
130 + */
125 131 stylesId: template?.styles_id
126 132 };
127 133 },
128 134 [templateId]
@@ -218,10 +224,15 @@
218 224 "typography.textAlign",
219 225 "typography.textColumns",
220 226 "typography.textDecoration",
221 227 "typography.textIndent",
228 + "typography.textShadow",
229 + "typography.defaultTextShadowPresets",
230 + "typography.textShadowPresets",
222 231 "typography.textTransform",
223 - "typography.writingMode"
232 + "typography.writingMode",
233 + "viewport.mobile",
234 + "viewport.tablet"
224 235 ];
225 236 function getSetting(globalStyles, path, blockName) {
226 237 const appendedBlockPath = blockName ? ".blocks." + blockName : "";
227 238 const appendedPropertyPath = path ? "." + path : "";
@@ -434,8 +445,30 @@
434 445
435 446 // packages/global-styles-engine/build-module/utils/common.mjs
436 447 var ROOT_BLOCK_SELECTOR = "body";
437 448 var ROOT_CSS_PROPERTIES_SELECTOR = ":root";
449 +function splitSelectorList(selector) {
450 + if (!selector.includes(",")) {
451 + return [selector];
452 + }
453 + const selectors = [];
454 + let currentSelector = "";
455 + let parenthesesDepth = 0;
456 + for (const char of selector) {
457 + if (char === "(") {
458 + parenthesesDepth++;
459 + } else if (char === ")" && parenthesesDepth > 0) {
460 + parenthesesDepth--;
461 + } else if (char === "," && parenthesesDepth === 0) {
462 + selectors.push(currentSelector);
463 + currentSelector = "";
464 + continue;
465 + }
466 + currentSelector += char;
467 + }
468 + selectors.push(currentSelector);
469 + return selectors;
470 +}
438 471 var PRESET_METADATA = [
439 472 {
440 473 path: ["color", "palette"],
441 474 valueKey: "color",
@@ -491,8 +524,16 @@
491 524 { classSuffix: "font-family", propertyName: "font-family" }
492 525 ]
493 526 },
494 527 {
528 + path: ["typography", "textShadowPresets"],
529 + valueKey: "textShadow",
530 + cssVarInfix: "text-shadow",
531 + classes: [
532 + { classSuffix: "text-shadow", propertyName: "text-shadow" }
533 + ]
534 + },
535 + {
495 536 path: ["spacing", "spacingSizes"],
496 537 valueKey: "size",
497 538 cssVarInfix: "spacing",
498 539 valueFunc: ({ size }) => size,
@@ -514,10 +555,10 @@
514 555 function scopeSelector(scope, selector) {
515 556 if (!scope || !selector) {
516 557 return selector;
517 558 }
518 - const scopes = scope.split(",");
519 - const selectors = selector.split(",");
559 + const scopes = splitSelectorList(scope);
560 + const selectors = splitSelectorList(selector);
520 561 const selectorsScoped = [];
521 562 scopes.forEach((outer) => {
522 563 selectors.forEach((inner) => {
523 564 selectorsScoped.push(`${outer.trim()} ${inner.trim()}`);
@@ -551,9 +592,9 @@
551 592 function appendToSelector(selector, toAppend) {
552 593 if (!selector.includes(",")) {
553 594 return selector + toAppend;
554 595 }
555 - const selectors = selector.split(",");
596 + const selectors = splitSelectorList(selector);
556 597 const newSelectors = selectors.map((sel) => sel + toAppend);
557 598 return newSelectors.join(",");
558 599 }
559 600 function getBlockStyleVariationSelector(variation, blockSelector) {
@@ -560,15 +601,32 @@
560 601 const variationClass = `.is-style-${variation}`;
561 602 if (!blockSelector) {
562 603 return variationClass;
563 604 }
564 - const ancestorRegex = /((?::\([^)]+\))?\s*)([^\s:]+)/;
565 - const addVariationClass = (_match, group1, group2) => {
566 - return group1 + group2 + variationClass;
567 - };
568 - const result = blockSelector.split(",").map((part) => part.replace(ancestorRegex, addVariationClass));
605 + const ancestorRegex = /[^\s:]+/;
606 + const addVariationClass = (match) => match + variationClass;
607 + const result = splitSelectorList(blockSelector).map(
608 + (part) => part.replace(ancestorRegex, addVariationClass)
609 + );
569 610 return result.join(",");
570 611 }
612 +function getBlockStyleVariationFeatureSelector(variation, featureSelector) {
613 + const variationClass = `.is-style-${variation}`;
614 + const selectorParts = splitSelectorList(featureSelector).map(
615 + (selector) => {
616 + const trimmedSelector = selector.trim();
617 + const prefix = `${variationClass} `;
618 + if (trimmedSelector.startsWith(prefix)) {
619 + return trimmedSelector.slice(prefix.length);
620 + }
621 + return trimmedSelector;
622 + }
623 + );
624 + return getBlockStyleVariationSelector(
625 + variation,
626 + selectorParts.join(",")
627 + );
628 +}
571 629 function getResolvedRefValue(ruleValue, tree) {
572 630 if (!ruleValue || !tree) {
573 631 return ruleValue;
574 632 }
@@ -603,16 +661,71 @@
603 661 return ruleValue;
604 662 }
605 663 const resolvedValue = getResolvedRefValue(ruleValue, tree);
606 664 if (typeof resolvedValue === "object" && resolvedValue !== null && "url" in resolvedValue && resolvedValue?.url) {
607 - resolvedValue.url = getResolvedThemeFilePath(
608 - resolvedValue.url,
609 - tree?._links?.["wp:theme-file"]
610 - );
665 + return {
666 + ...resolvedValue,
667 + url: getResolvedThemeFilePath(
668 + resolvedValue.url,
669 + tree?._links?.["wp:theme-file"]
670 + )
671 + };
611 672 }
612 673 return resolvedValue;
613 674 }
614 675
676 +// packages/global-styles-engine/build-module/style-state-back-compat.mjs
677 +var LEGACY_STYLE_STATE_ALIASES = {
678 + "@mobile": "mobile",
679 + "@tablet": "tablet",
680 + "-current": "@current"
681 +};
682 +function isObjectRecord(value) {
683 + return !!value && typeof value === "object" && !Array.isArray(value);
684 +}
685 +function normalizeStyleStateNode(node) {
686 + if (!isObjectRecord(node)) {
687 + return node;
688 + }
689 + let normalized = node;
690 + Object.entries(LEGACY_STYLE_STATE_ALIASES).forEach(
691 + ([state, legacyState]) => {
692 + if (Object.hasOwn(node, legacyState)) {
693 + if (normalized === node) {
694 + normalized = { ...node };
695 + }
696 + if (!Object.hasOwn(node, state)) {
697 + normalized[state] = node[legacyState];
698 + }
699 + delete normalized[legacyState];
700 + }
701 + }
702 + );
703 + Object.entries(normalized).forEach(([key, value]) => {
704 + if (!isObjectRecord(value)) {
705 + return;
706 + }
707 + const normalizedValue = normalizeStyleStateNode(value);
708 + if (normalizedValue !== value) {
709 + if (normalized === node) {
710 + normalized = { ...node };
711 + }
712 + normalized[key] = normalizedValue;
713 + }
714 + });
715 + return normalized;
716 +}
717 +function normalizeStyleStateAliases(globalStyles) {
718 + if (false) {
719 + return globalStyles;
720 + }
721 + if (!globalStyles?.styles) {
722 + return globalStyles;
723 + }
724 + const styles = normalizeStyleStateNode(globalStyles.styles);
725 + return styles === globalStyles.styles ? globalStyles : { ...globalStyles, styles };
726 +}
727 +
615 728 // packages/global-styles-engine/build-module/core/render.mjs
616 729 var import_blocks = __toESM(require_blocks(), 1);
617 730 var import_style_engine2 = __toESM(require_style_engine(), 1);
618 731 var import_data2 = __toESM(require_data(), 1);
@@ -671,163 +784,176 @@
671 784 return null;
672 785 }
673 786
674 787 // node_modules/colord/index.mjs
675 -var r = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) };
676 -var t = function(r2) {
788 +for (r = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) }, t = function(r2) {
677 789 return "string" == typeof r2 ? r2.length > 0 : "number" == typeof r2;
678 -};
679 -var n = function(r2, t2, n2) {
790 +}, n = function(r2, t2, n2) {
680 791 return void 0 === t2 && (t2 = 0), void 0 === n2 && (n2 = Math.pow(10, t2)), Math.round(n2 * r2) / n2 + 0;
681 -};
682 -var e = function(r2, t2, n2) {
792 +}, u = function(r2, t2, n2) {
683 793 return void 0 === t2 && (t2 = 0), void 0 === n2 && (n2 = 1), r2 > n2 ? n2 : r2 > t2 ? r2 : t2;
684 -};
685 -var u = function(r2) {
686 - return (r2 = isFinite(r2) ? r2 % 360 : 0) > 0 ? r2 : r2 + 360;
687 -};
688 -var a = function(r2) {
689 - return { r: e(r2.r, 0, 255), g: e(r2.g, 0, 255), b: e(r2.b, 0, 255), a: e(r2.a) };
690 -};
691 -var o = function(r2) {
794 +}, e = function(r2) {
795 + return (r2 = isFinite(r2) ? r2 % 360 : 0) < 0 ? r2 + 360 : r2;
796 +}, o = function(r2, t2) {
797 + return void 0 === t2 && (t2 = 0), n(r2, t2) % 360;
798 +}, a = function(r2) {
799 + return { r: u(r2.r, 0, 255), g: u(r2.g, 0, 255), b: u(r2.b, 0, 255), a: u(r2.a) };
800 +}, i = function(r2) {
692 801 return { r: n(r2.r), g: n(r2.g), b: n(r2.b), a: n(r2.a, 3) };
802 +}, s = /^#([0-9a-f]{3,8})$/i, d = function(r2, t2) {
803 + var n2 = r2.charCodeAt(t2);
804 + return (15 & n2) + 9 * (n2 >> 6);
805 +}, h = function(r2, t2) {
806 + return d(r2, t2) << 4 | d(r2, t2 + 1);
807 +}, b = [], f = 0; f < 256; f++) b.push((f < 16 ? "0" : "") + f.toString(16));
808 +var r;
809 +var t;
810 +var n;
811 +var u;
812 +var e;
813 +var o;
814 +var a;
815 +var i;
816 +var s;
817 +var d;
818 +var h;
819 +var b;
820 +var f;
821 +var g = function(r) {
822 + return b[u(r, 0, 255)];
693 823 };
694 -var i = /^#([0-9a-f]{3,8})$/i;
695 -var s = function(r2) {
696 - var t2 = r2.toString(16);
697 - return t2.length < 2 ? "0" + t2 : t2;
824 +var c = function(r) {
825 + var t = r.r, n = r.g, u = r.b, e = r.a, o = Math.max(t, n, u), a = o - Math.min(t, n, u), i = a ? o === t ? (n - u) / a : o === n ? 2 + (u - t) / a : 4 + (t - n) / a : 0;
826 + return { h: 60 * (i < 0 ? i + 6 : i), s: o ? a / o * 100 : 0, v: o / 255 * 100, a: e };
698 827 };
699 -var h = function(r2) {
700 - var t2 = r2.r, n2 = r2.g, e2 = r2.b, u2 = r2.a, a2 = Math.max(t2, n2, e2), o2 = a2 - Math.min(t2, n2, e2), i2 = o2 ? a2 === t2 ? (n2 - e2) / o2 : a2 === n2 ? 2 + (e2 - t2) / o2 : 4 + (t2 - n2) / o2 : 0;
701 - return { h: 60 * (i2 < 0 ? i2 + 6 : i2), s: a2 ? o2 / a2 * 100 : 0, v: a2 / 255 * 100, a: u2 };
828 +var v = function(r) {
829 + var t = r.h, n = r.s, u = r.v, e = r.a;
830 + t = t / 360 * 6, n /= 100, u /= 100;
831 + var o = Math.floor(t), a = u * (1 - n), i = u * (1 - (t - o) * n), s = u * (1 - (1 - t + o) * n), d = o % 6;
832 + return { r: 255 * [u, i, a, a, s, u][d], g: 255 * [s, u, u, i, a, a][d], b: 255 * [a, a, s, u, u, i][d], a: e };
702 833 };
703 -var b = function(r2) {
704 - var t2 = r2.h, n2 = r2.s, e2 = r2.v, u2 = r2.a;
705 - t2 = t2 / 360 * 6, n2 /= 100, e2 /= 100;
706 - var a2 = Math.floor(t2), o2 = e2 * (1 - n2), i2 = e2 * (1 - (t2 - a2) * n2), s2 = e2 * (1 - (1 - t2 + a2) * n2), h2 = a2 % 6;
707 - return { r: 255 * [e2, i2, o2, o2, s2, e2][h2], g: 255 * [s2, e2, e2, i2, o2, o2][h2], b: 255 * [o2, o2, s2, e2, e2, i2][h2], a: u2 };
834 +var l = function(r) {
835 + return { h: e(r.h), s: u(r.s, 0, 100), l: u(r.l, 0, 100), a: u(r.a) };
708 836 };
709 -var g = function(r2) {
710 - return { h: u(r2.h), s: e(r2.s, 0, 100), l: e(r2.l, 0, 100), a: e(r2.a) };
837 +var p = function(r) {
838 + return { h: o(r.h), s: n(r.s), l: n(r.l), a: n(r.a, 3) };
711 839 };
712 -var d = function(r2) {
713 - return { h: n(r2.h), s: n(r2.s), l: n(r2.l), a: n(r2.a, 3) };
840 +var m = function(r) {
841 + return v((n = (t = r).s, { h: t.h, s: (n *= ((u = t.l) < 50 ? u : 100 - u) / 100) > 0 ? 2 * n / (u + n) * 100 : 0, v: u + n, a: t.a }));
842 + var t, n, u;
714 843 };
715 -var f = function(r2) {
716 - return b((n2 = (t2 = r2).s, { h: t2.h, s: (n2 *= ((e2 = t2.l) < 50 ? e2 : 100 - e2) / 100) > 0 ? 2 * n2 / (e2 + n2) * 100 : 0, v: e2 + n2, a: t2.a }));
717 - var t2, n2, e2;
844 +var y = function(r) {
845 + return { h: (t = c(r)).h, s: (e = (200 - (n = t.s)) * (u = t.v) / 100) > 0 && e < 200 ? n * u / 100 / (e <= 100 ? e : 200 - e) * 100 : 0, l: e / 2, a: t.a };
846 + var t, n, u, e;
718 847 };
719 -var c = function(r2) {
720 - return { h: (t2 = h(r2)).h, s: (u2 = (200 - (n2 = t2.s)) * (e2 = t2.v) / 100) > 0 && u2 < 200 ? n2 * e2 / 100 / (u2 <= 100 ? u2 : 200 - u2) * 100 : 0, l: u2 / 2, a: t2.a };
721 - var t2, n2, e2, u2;
722 -};
723 -var l = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i;
724 -var p = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i;
725 -var v = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i;
726 -var m = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i;
727 -var y = { string: [[function(r2) {
728 - var t2 = i.exec(r2);
729 - return t2 ? (r2 = t2[1]).length <= 4 ? { r: parseInt(r2[0] + r2[0], 16), g: parseInt(r2[1] + r2[1], 16), b: parseInt(r2[2] + r2[2], 16), a: 4 === r2.length ? n(parseInt(r2[3] + r2[3], 16) / 255, 2) : 1 } : 6 === r2.length || 8 === r2.length ? { r: parseInt(r2.substr(0, 2), 16), g: parseInt(r2.substr(2, 2), 16), b: parseInt(r2.substr(4, 2), 16), a: 8 === r2.length ? n(parseInt(r2.substr(6, 2), 16) / 255, 2) : 1 } : null : null;
730 -}, "hex"], [function(r2) {
731 - var t2 = v.exec(r2) || m.exec(r2);
732 - return t2 ? t2[2] !== t2[4] || t2[4] !== t2[6] ? null : a({ r: Number(t2[1]) / (t2[2] ? 100 / 255 : 1), g: Number(t2[3]) / (t2[4] ? 100 / 255 : 1), b: Number(t2[5]) / (t2[6] ? 100 / 255 : 1), a: void 0 === t2[7] ? 1 : Number(t2[7]) / (t2[8] ? 100 : 1) }) : null;
733 -}, "rgb"], [function(t2) {
734 - var n2 = l.exec(t2) || p.exec(t2);
735 - if (!n2) return null;
736 - var e2, u2, a2 = g({ h: (e2 = n2[1], u2 = n2[2], void 0 === u2 && (u2 = "deg"), Number(e2) * (r[u2] || 1)), s: Number(n2[3]), l: Number(n2[4]), a: void 0 === n2[5] ? 1 : Number(n2[5]) / (n2[6] ? 100 : 1) });
737 - return f(a2);
738 -}, "hsl"]], object: [[function(r2) {
739 - var n2 = r2.r, e2 = r2.g, u2 = r2.b, o2 = r2.a, i2 = void 0 === o2 ? 1 : o2;
740 - return t(n2) && t(e2) && t(u2) ? a({ r: Number(n2), g: Number(e2), b: Number(u2), a: Number(i2) }) : null;
741 -}, "rgb"], [function(r2) {
742 - var n2 = r2.h, e2 = r2.s, u2 = r2.l, a2 = r2.a, o2 = void 0 === a2 ? 1 : a2;
743 - if (!t(n2) || !t(e2) || !t(u2)) return null;
744 - var i2 = g({ h: Number(n2), s: Number(e2), l: Number(u2), a: Number(o2) });
745 - return f(i2);
746 -}, "hsl"], [function(r2) {
747 - var n2 = r2.h, a2 = r2.s, o2 = r2.v, i2 = r2.a, s2 = void 0 === i2 ? 1 : i2;
748 - if (!t(n2) || !t(a2) || !t(o2)) return null;
749 - var h2 = (function(r3) {
750 - return { h: u(r3.h), s: e(r3.s, 0, 100), v: e(r3.v, 0, 100), a: e(r3.a) };
751 - })({ h: Number(n2), s: Number(a2), v: Number(o2), a: Number(s2) });
752 - return b(h2);
848 +var N = /^hsla?\(\s*([+-]?(?:\d*\.\d+|\d+))(deg|rad|grad|turn)?\s*,\s*([+-]?(?:\d*\.\d+|\d+))%\s*,\s*([+-]?(?:\d*\.\d+|\d+))%\s*(?:,\s*([+-]?(?:\d*\.\d+|\d+))(%)?\s*)?\)$/i;
849 +var x = /^hsla?\(\s*([+-]?(?:\d*\.\d+|\d+))(deg|rad|grad|turn)?\s+([+-]?(?:\d*\.\d+|\d+))%\s+([+-]?(?:\d*\.\d+|\d+))%\s*(?:\/\s*([+-]?(?:\d*\.\d+|\d+))(%)?\s*)?\)$/i;
850 +var M = /^rgba?\(\s*([+-]?(?:\d*\.\d+|\d+))(%)?\s*,\s*([+-]?(?:\d*\.\d+|\d+))(%)?\s*,\s*([+-]?(?:\d*\.\d+|\d+))(%)?\s*(?:,\s*([+-]?(?:\d*\.\d+|\d+))(%)?\s*)?\)$/i;
851 +var H = /^rgba?\(\s*([+-]?(?:\d*\.\d+|\d+))(%)?\s+([+-]?(?:\d*\.\d+|\d+))(%)?\s+([+-]?(?:\d*\.\d+|\d+))(%)?\s*(?:\/\s*([+-]?(?:\d*\.\d+|\d+))(%)?\s*)?\)$/i;
852 +var $ = { string: [[function(r) {
853 + if (!s.test(r)) return null;
854 + var t = r.length;
855 + return t <= 5 ? { r: 17 * d(r, 1), g: 17 * d(r, 2), b: 17 * d(r, 3), a: 5 === t ? n(17 * d(r, 4) / 255, 2) : 1 } : 7 === t || 9 === t ? { r: h(r, 1), g: h(r, 3), b: h(r, 5), a: 9 === t ? n(h(r, 7) / 255, 2) : 1 } : null;
856 +}, "hex"], [function(r) {
857 + var t = M.exec(r) || H.exec(r);
858 + return t ? t[2] !== t[4] || t[4] !== t[6] ? null : a({ r: Number(t[1]) / (t[2] ? 100 / 255 : 1), g: Number(t[3]) / (t[4] ? 100 / 255 : 1), b: Number(t[5]) / (t[6] ? 100 / 255 : 1), a: void 0 === t[7] ? 1 : Number(t[7]) / (t[8] ? 100 : 1) }) : null;
859 +}, "rgb"], [function(t) {
860 + var n = N.exec(t) || x.exec(t);
861 + if (!n) return null;
862 + var u, e, o = l({ h: (u = n[1], e = n[2], void 0 === e && (e = "deg"), Number(u) * (r[e] || 1)), s: Number(n[3]), l: Number(n[4]), a: void 0 === n[5] ? 1 : Number(n[5]) / (n[6] ? 100 : 1) });
863 + return m(o);
864 +}, "hsl"]], object: [[function(r) {
865 + var n = r.r, u = r.g, e = r.b, o = r.a, i = void 0 === o ? 1 : o;
866 + return t(n) && t(u) && t(e) ? a({ r: Number(n), g: Number(u), b: Number(e), a: Number(i) }) : null;
867 +}, "rgb"], [function(r) {
868 + var n = r.h, u = r.s, e = r.l, o = r.a, a = void 0 === o ? 1 : o;
869 + if (!t(n) || !t(u) || !t(e)) return null;
870 + var i = l({ h: Number(n), s: Number(u), l: Number(e), a: Number(a) });
871 + return m(i);
872 +}, "hsl"], [function(r) {
873 + var n = r.h, o = r.s, a = r.v, i = r.a, s = void 0 === i ? 1 : i;
874 + if (!t(n) || !t(o) || !t(a)) return null;
875 + var d = (function(r2) {
876 + return { h: e(r2.h), s: u(r2.s, 0, 100), v: u(r2.v, 0, 100), a: u(r2.a) };
877 + })({ h: Number(n), s: Number(o), v: Number(a), a: Number(s) });
878 + return v(d);
753 879 }, "hsv"]] };
754 -var N = function(r2, t2) {
755 - for (var n2 = 0; n2 < t2.length; n2++) {
756 - var e2 = t2[n2][0](r2);
757 - if (e2) return [e2, t2[n2][1]];
880 +var j = function(r, t) {
881 + for (var n = 0; n < t.length; n++) {
882 + var u = t[n][0](r);
883 + if (u) return [u, t[n][1]];
758 884 }
759 885 return [null, void 0];
760 886 };
761 -var x = function(r2) {
762 - return "string" == typeof r2 ? N(r2.trim(), y.string) : "object" == typeof r2 && null !== r2 ? N(r2, y.object) : [null, void 0];
887 +var w = function(r) {
888 + return "string" == typeof r ? j(r.trim(), $.string) : "object" == typeof r && null !== r ? j(r, $.object) : [null, void 0];
763 889 };
764 -var M = function(r2, t2) {
765 - var n2 = c(r2);
766 - return { h: n2.h, s: e(n2.s + 100 * t2, 0, 100), l: n2.l, a: n2.a };
890 +var k = function(r, t) {
891 + var n = y(r);
892 + return { h: n.h, s: u(n.s + 100 * t, 0, 100), l: n.l, a: n.a };
767 893 };
768 -var H = function(r2) {
769 - return (299 * r2.r + 587 * r2.g + 114 * r2.b) / 1e3 / 255;
894 +var E = function(r) {
895 + return (299 * r.r + 587 * r.g + 114 * r.b) / 1e3 / 255;
770 896 };
771 -var $ = function(r2, t2) {
772 - var n2 = c(r2);
773 - return { h: n2.h, s: n2.s, l: e(n2.l + 100 * t2, 0, 100), a: n2.a };
897 +var R = function(r, t) {
898 + var n = y(r);
899 + return { h: n.h, s: n.s, l: u(n.l + 100 * t, 0, 100), a: n.a };
774 900 };
775 -var j = (function() {
776 - function r2(r3) {
777 - this.parsed = x(r3)[0], this.rgba = this.parsed || { r: 0, g: 0, b: 0, a: 1 };
901 +var q = (function() {
902 + function r(r2) {
903 + this.parsed = w(r2)[0], this.rgba = this.parsed || { r: 0, g: 0, b: 0, a: 1 };
778 904 }
779 - return r2.prototype.isValid = function() {
905 + return r.prototype.isValid = function() {
780 906 return null !== this.parsed;
781 - }, r2.prototype.brightness = function() {
782 - return n(H(this.rgba), 2);
783 - }, r2.prototype.isDark = function() {
784 - return H(this.rgba) < 0.5;
785 - }, r2.prototype.isLight = function() {
786 - return H(this.rgba) >= 0.5;
787 - }, r2.prototype.toHex = function() {
788 - return r3 = o(this.rgba), t2 = r3.r, e2 = r3.g, u2 = r3.b, i2 = (a2 = r3.a) < 1 ? s(n(255 * a2)) : "", "#" + s(t2) + s(e2) + s(u2) + i2;
789 - var r3, t2, e2, u2, a2, i2;
790 - }, r2.prototype.toRgb = function() {
791 - return o(this.rgba);
792 - }, r2.prototype.toRgbString = function() {
793 - return r3 = o(this.rgba), t2 = r3.r, n2 = r3.g, e2 = r3.b, (u2 = r3.a) < 1 ? "rgba(" + t2 + ", " + n2 + ", " + e2 + ", " + u2 + ")" : "rgb(" + t2 + ", " + n2 + ", " + e2 + ")";
794 - var r3, t2, n2, e2, u2;
795 - }, r2.prototype.toHsl = function() {
796 - return d(c(this.rgba));
797 - }, r2.prototype.toHslString = function() {
798 - return r3 = d(c(this.rgba)), t2 = r3.h, n2 = r3.s, e2 = r3.l, (u2 = r3.a) < 1 ? "hsla(" + t2 + ", " + n2 + "%, " + e2 + "%, " + u2 + ")" : "hsl(" + t2 + ", " + n2 + "%, " + e2 + "%)";
799 - var r3, t2, n2, e2, u2;
800 - }, r2.prototype.toHsv = function() {
801 - return r3 = h(this.rgba), { h: n(r3.h), s: n(r3.s), v: n(r3.v), a: n(r3.a, 3) };
802 - var r3;
803 - }, r2.prototype.invert = function() {
804 - return w({ r: 255 - (r3 = this.rgba).r, g: 255 - r3.g, b: 255 - r3.b, a: r3.a });
805 - var r3;
806 - }, r2.prototype.saturate = function(r3) {
807 - return void 0 === r3 && (r3 = 0.1), w(M(this.rgba, r3));
808 - }, r2.prototype.desaturate = function(r3) {
809 - return void 0 === r3 && (r3 = 0.1), w(M(this.rgba, -r3));
810 - }, r2.prototype.grayscale = function() {
811 - return w(M(this.rgba, -1));
812 - }, r2.prototype.lighten = function(r3) {
813 - return void 0 === r3 && (r3 = 0.1), w($(this.rgba, r3));
814 - }, r2.prototype.darken = function(r3) {
815 - return void 0 === r3 && (r3 = 0.1), w($(this.rgba, -r3));
816 - }, r2.prototype.rotate = function(r3) {
817 - return void 0 === r3 && (r3 = 15), this.hue(this.hue() + r3);
818 - }, r2.prototype.alpha = function(r3) {
819 - return "number" == typeof r3 ? w({ r: (t2 = this.rgba).r, g: t2.g, b: t2.b, a: r3 }) : n(this.rgba.a, 3);
820 - var t2;
821 - }, r2.prototype.hue = function(r3) {
822 - var t2 = c(this.rgba);
823 - return "number" == typeof r3 ? w({ h: r3, s: t2.s, l: t2.l, a: t2.a }) : n(t2.h);
824 - }, r2.prototype.isEqual = function(r3) {
825 - return this.toHex() === w(r3).toHex();
826 - }, r2;
907 + }, r.prototype.brightness = function() {
908 + return n(E(this.rgba), 2);
909 + }, r.prototype.isDark = function() {
910 + return E(this.rgba) < 0.5;
911 + }, r.prototype.isLight = function() {
912 + return E(this.rgba) >= 0.5;
913 + }, r.prototype.toHex = function() {
914 + return r2 = i(this.rgba), t = r2.r, u = r2.g, e = r2.b, a = (o = r2.a) < 1 ? g(n(255 * o)) : "", "#" + g(t) + g(u) + g(e) + a;
915 + var r2, t, u, e, o, a;
916 + }, r.prototype.toRgb = function() {
917 + return i(this.rgba);
918 + }, r.prototype.toRgbString = function() {
919 + return r2 = i(this.rgba), t = r2.r, n = r2.g, u = r2.b, (e = r2.a) < 1 ? "rgba(" + t + ", " + n + ", " + u + ", " + e + ")" : "rgb(" + t + ", " + n + ", " + u + ")";
920 + var r2, t, n, u, e;
921 + }, r.prototype.toHsl = function() {
922 + return p(y(this.rgba));
923 + }, r.prototype.toHslString = function() {
924 + return r2 = p(y(this.rgba)), t = r2.h, n = r2.s, u = r2.l, (e = r2.a) < 1 ? "hsla(" + t + ", " + n + "%, " + u + "%, " + e + ")" : "hsl(" + t + ", " + n + "%, " + u + "%)";
925 + var r2, t, n, u, e;
926 + }, r.prototype.toHsv = function() {
927 + return r2 = c(this.rgba), { h: o(r2.h), s: n(r2.s), v: n(r2.v), a: n(r2.a, 3) };
928 + var r2;
929 + }, r.prototype.invert = function() {
930 + return A({ r: 255 - (r2 = this.rgba).r, g: 255 - r2.g, b: 255 - r2.b, a: r2.a });
931 + var r2;
932 + }, r.prototype.saturate = function(r2) {
933 + return void 0 === r2 && (r2 = 0.1), A(k(this.rgba, r2));
934 + }, r.prototype.desaturate = function(r2) {
935 + return void 0 === r2 && (r2 = 0.1), A(k(this.rgba, -r2));
936 + }, r.prototype.grayscale = function() {
937 + return A(k(this.rgba, -1));
938 + }, r.prototype.lighten = function(r2) {
939 + return void 0 === r2 && (r2 = 0.1), A(R(this.rgba, r2));
940 + }, r.prototype.darken = function(r2) {
941 + return void 0 === r2 && (r2 = 0.1), A(R(this.rgba, -r2));
942 + }, r.prototype.rotate = function(r2) {
943 + return void 0 === r2 && (r2 = 15), this.hue(y(this.rgba).h + r2);
944 + }, r.prototype.alpha = function(r2) {
945 + return "number" == typeof r2 ? A({ r: (t = this.rgba).r, g: t.g, b: t.b, a: r2 }) : n(this.rgba.a, 3);
946 + var t;
947 + }, r.prototype.hue = function(r2) {
948 + var t = y(this.rgba);
949 + return "number" == typeof r2 ? A({ h: r2, s: t.s, l: t.l, a: t.a }) : o(t.h);
950 + }, r.prototype.isEqual = function(r2) {
951 + return this.toHex() === A(r2).toHex();
952 + }, r;
827 953 })();
828 -var w = function(r2) {
829 - return r2 instanceof j ? r2 : new j(r2);
954 +var A = function(r) {
955 + return r instanceof q ? r : new q(r);
830 956 };
831 957
832 958 // packages/global-styles-engine/build-module/utils/duotone.mjs
833 959 function getValuesFromColors(colors = []) {
@@ -837,9 +963,9 @@
837 963 b: [],
838 964 a: []
839 965 };
840 966 colors.forEach((color) => {
841 - const rgbColor = w(color).toRgb();
967 + const rgbColor = A(color).toRgb();
842 968 values.r.push(rgbColor.r / 255);
843 969 values.g.push(rgbColor.g / 255);
844 970 values.b.push(rgbColor.b / 255);
845 971 values.a.push(rgbColor.a);
@@ -923,11 +1049,13 @@
923 1049 backgroundSize: "cover",
924 1050 backgroundPosition: "50% 50%"
925 1051 // used only when backgroundSize is 'contain'.
926 1052 };
1053 +function hasImageUrl(backgroundImage) {
1054 + return typeof backgroundImage === "object" && backgroundImage !== null && "url" in backgroundImage && !!backgroundImage.url;
1055 +}
927 1056 function setBackgroundStyleDefaults(backgroundStyle) {
928 - if (!backgroundStyle || // @ts-expect-error
929 - !backgroundStyle?.backgroundImage?.url) {
1057 + if (!backgroundStyle || !hasImageUrl(backgroundStyle.backgroundImage)) {
930 1058 return;
931 1059 }
932 1060 let backgroundStylesWithDefaults;
933 1061 if (!backgroundStyle?.backgroundSize) {
@@ -1115,8 +1243,84 @@
1115 1243 ]
1116 1244 }
1117 1245 };
1118 1246
1247 +// packages/global-styles-engine/build-module/utils/viewport.mjs
1248 +var DEFAULT_VIEWPORT_BREAKPOINTS = {
1249 + mobile: "480px",
1250 + tablet: "782px"
1251 +};
1252 +var VIEWPORT_SIZE_REGEXP = /^(\d+|\d*\.\d+)(px|em|rem)$/;
1253 +var DEFAULT_FONT_SIZE = 16;
1254 +function isViewportSettings(configOrSettings) {
1255 + return "mobile" in configOrSettings || "tablet" in configOrSettings;
1256 +}
1257 +function getViewportSettings(configOrSettings) {
1258 + if (!configOrSettings || typeof configOrSettings !== "object") {
1259 + return {};
1260 + }
1261 + if (isViewportSettings(configOrSettings)) {
1262 + return configOrSettings;
1263 + }
1264 + return configOrSettings.settings?.viewport ?? {};
1265 +}
1266 +function isValidViewportSize(value) {
1267 + return typeof value === "string" && VIEWPORT_SIZE_REGEXP.test(value.trim());
1268 +}
1269 +function getViewportBreakpointValueInPixels(value) {
1270 + if (typeof value === "number") {
1271 + return value;
1272 + }
1273 + if (typeof value !== "string") {
1274 + return void 0;
1275 + }
1276 + const match = value.trim().match(VIEWPORT_SIZE_REGEXP);
1277 + if (!match) {
1278 + return void 0;
1279 + }
1280 + const numericValue = Number.parseFloat(match[1]);
1281 + const unit = match[2];
1282 + return unit === "px" ? numericValue : numericValue * DEFAULT_FONT_SIZE;
1283 +}
1284 +function getViewportBreakpoints(configOrSettings) {
1285 + const viewportSettings = getViewportSettings(configOrSettings);
1286 + const breakpoints = {};
1287 + const breakpointValuesInPixels = {};
1288 + Object.keys(DEFAULT_VIEWPORT_BREAKPOINTS).forEach((breakpoint) => {
1289 + const key = breakpoint;
1290 + const value = viewportSettings[key];
1291 + const px = getViewportBreakpointValueInPixels(value);
1292 + if (px !== void 0 && isValidViewportSize(value)) {
1293 + breakpoints[key] = value.trim();
1294 + breakpointValuesInPixels[key] = px;
1295 + }
1296 + });
1297 + const breakpointNames = Object.keys(breakpoints);
1298 + if (!breakpointNames.length) {
1299 + return { ...DEFAULT_VIEWPORT_BREAKPOINTS };
1300 + }
1301 + if (1 === breakpointNames.length) {
1302 + return breakpoints;
1303 + }
1304 + const mobile = breakpoints.mobile;
1305 + const tablet = breakpoints.tablet;
1306 + if (breakpointValuesInPixels.mobile >= breakpointValuesInPixels.tablet) {
1307 + return { mobile };
1308 + }
1309 + return { mobile, tablet };
1310 +}
1311 +function getResponsiveMediaQueries(configOrSettings) {
1312 + const breakpoints = getViewportBreakpoints(configOrSettings);
1313 + const mediaQueries = {};
1314 + if (breakpoints.mobile) {
1315 + mediaQueries["@mobile"] = `@media (width <= ${breakpoints.mobile})`;
1316 + }
1317 + if (breakpoints.tablet) {
1318 + mediaQueries["@tablet"] = breakpoints.mobile ? `@media (${breakpoints.mobile} < width <= ${breakpoints.tablet})` : `@media (width <= ${breakpoints.tablet})`;
1319 + }
1320 + return mediaQueries;
1321 +}
1322 +
1119 1323 // packages/global-styles-engine/build-module/core/render.mjs
1120 1324 var ELEMENT_CLASS_NAMES = {
1121 1325 button: "wp-element-button",
1122 1326 caption: "wp-element-caption"
@@ -1151,12 +1355,8 @@
1151 1355 ":focus-visible",
1152 1356 ":active"
1153 1357 ]
1154 1358 };
1155 -var RESPONSIVE_BREAKPOINTS = {
1156 - mobile: "@media (width <= 480px)",
1157 - tablet: "@media (480px < width <= 782px)"
1158 -};
1159 1359 function getPresetsClasses(blockSelector = "*", blockPresets = {}) {
1160 1360 return PRESET_METADATA.reduce(
1161 1361 (declarations, { path, cssVarInfix, classes }) => {
1162 1362 if (!classes) {
@@ -1178,11 +1378,9 @@
1178 1378 }) => {
1179 1379 const classSelectorToUse = `.has-${kebabCase(
1180 1380 slug
1181 1381 )}-${classSuffix}`;
1182 - const selectorToUse = blockSelector.split(",").map(
1183 - (selector) => `${selector}${classSelectorToUse}`
1184 - ).join(",");
1382 + const selectorToUse = blockSelector ? `:where(${blockSelector})${classSelectorToUse}` : classSelectorToUse;
1185 1383 const value = `var(--wp--preset--${cssVarInfix}--${kebabCase(
1186 1384 slug
1187 1385 )})`;
1188 1386 declarations += `${selectorToUse}{${propertyName}: ${value} !important;}`;
@@ -1206,9 +1404,9 @@
1206 1404 blockPresets,
1207 1405 metadata.path,
1208 1406 {}
1209 1407 );
1210 - return ["default", "theme"].filter((origin) => presetByOrigin[origin]).flatMap(
1408 + return ["default", "theme", "custom"].filter((origin) => presetByOrigin[origin]).flatMap(
1211 1409 (origin) => presetByOrigin[origin].map(
1212 1410 (preset) => getDuotoneFilter(
1213 1411 `wp-duotone-${preset.slug}`,
1214 1412 preset.colors
@@ -1230,18 +1428,8 @@
1230 1428 }
1231 1429 });
1232 1430 return result;
1233 1431 }
1234 -function concatFeatureVariationSelectorString(featureSelector, styleVariationSelector) {
1235 - const featureSelectors = featureSelector.split(",");
1236 - const combinedSelectors = [];
1237 - featureSelectors.forEach((selector) => {
1238 - combinedSelectors.push(
1239 - `${styleVariationSelector.trim()}${selector.trim()}`
1240 - );
1241 - });
1242 - return combinedSelectors.join(", ");
1243 -}
1244 1432 var updateParagraphTextIndentSelector = (featureDeclarations, settings, blockName) => {
1245 1433 if (blockName !== "core/paragraph") {
1246 1434 return featureDeclarations;
1247 1435 }
@@ -1438,9 +1626,10 @@
1438 1626 hasFallbackGapSupport,
1439 1627 fallbackGapValue
1440 1628 }) {
1441 1629 let ruleset = "";
1442 - let gapValue = hasBlockGapSupport ? getGapCSSValue(style?.spacing?.blockGap) : "";
1630 + const blockGapValue = style?.spacing?.blockGap;
1631 + let gapValue = hasBlockGapSupport ? getGapCSSValue(blockGapValue) : "";
1443 1632 if (hasFallbackGapSupport) {
1444 1633 if (selector === ROOT_BLOCK_SELECTOR) {
1445 1634 gapValue = !gapValue ? "0.5em" : gapValue;
1446 1635 } else if (!hasBlockGapSupport && fallbackGapValue) {
@@ -1446,8 +1635,9 @@
1446 1635 } else if (!hasBlockGapSupport && fallbackGapValue) {
1447 1636 gapValue = fallbackGapValue;
1448 1637 }
1449 1638 }
1639 + const rowGapValue = hasBlockGapSupport && blockGapValue && typeof blockGapValue !== "string" ? getGapCSSValue(blockGapValue.top) : gapValue;
1450 1640 if (gapValue && layoutDefinitions) {
1451 1641 Object.values(layoutDefinitions).forEach(
1452 1642 ({ className, name, spacingStyles }) => {
1453 1643 if (!hasBlockGapSupport && "flex" !== name && "grid" !== name) {
@@ -1452,8 +1642,11 @@
1452 1642 ({ className, name, spacingStyles }) => {
1453 1643 if (!hasBlockGapSupport && "flex" !== name && "grid" !== name) {
1454 1644 return;
1455 1645 }
1646 + const layoutGapValue = ["default", "constrained"].includes(
1647 + name
1648 + ) ? rowGapValue : gapValue;
1456 1649 if (spacingStyles?.length) {
1457 1650 spacingStyles.forEach((spacingStyle) => {
1458 1651 const declarations = [];
1459 1652 if (spacingStyle.rules) {
@@ -1459,9 +1652,9 @@
1459 1652 if (spacingStyle.rules) {
1460 1653 Object.entries(spacingStyle.rules).forEach(
1461 1654 ([cssProperty, cssValue]) => {
1462 1655 declarations.push(
1463 - `${cssProperty}: ${cssValue ? cssValue : gapValue}`
1656 + `${cssProperty}: ${cssValue ? cssValue : layoutGapValue}`
1464 1657 );
1465 1658 }
1466 1659 );
1467 1660 }
@@ -1526,12 +1719,16 @@
1526 1719 "outline",
1527 1720 "shadow",
1528 1721 "background"
1529 1722 ];
1530 -function pickStyleKeys(treeToPickFrom) {
1531 - return pickStyleAndPseudoKeys(treeToPickFrom);
1723 +function pickStyleKeys(treeToPickFrom, responsiveMediaQueries) {
1724 + return pickStyleAndPseudoKeys(
1725 + treeToPickFrom,
1726 + void 0,
1727 + responsiveMediaQueries
1728 + );
1532 1729 }
1533 -function pickStyleAndPseudoKeys(treeToPickFrom, blockName) {
1730 +function pickStyleAndPseudoKeys(treeToPickFrom, blockName, responsiveMediaQueries) {
1534 1731 if (!treeToPickFrom) {
1535 1732 return {};
1536 1733 }
1537 1734 const entries = Object.entries(treeToPickFrom);
@@ -1536,9 +1733,9 @@
1536 1733 }
1537 1734 const entries = Object.entries(treeToPickFrom);
1538 1735 const allowedPseudoSelectors = blockName ? VALID_BLOCK_PSEUDO_SELECTORS[blockName] ?? [] : [];
1539 1736 const pickedEntries = entries.filter(
1540 - ([key]) => STYLE_KEYS.includes(key) || allowedPseudoSelectors.includes(key) || RESPONSIVE_BREAKPOINTS[key]
1737 + ([key]) => STYLE_KEYS.includes(key) || allowedPseudoSelectors.includes(key) || responsiveMediaQueries[key]
1541 1738 );
1542 1739 const clonedEntries = pickedEntries.map(([key, style]) => [
1543 1740 key,
1544 1741 JSON.parse(JSON.stringify(style))
@@ -1551,9 +1748,10 @@
1551 1748 selector,
1552 1749 featureSelectors,
1553 1750 name,
1554 1751 elementName,
1555 - mediaQuery
1752 + mediaQuery,
1753 + variationName
1556 1754 } = node;
1557 1755 const pseudoSelectors = name ? VALID_BLOCK_PSEUDO_SELECTORS[name] ?? [] : VALID_ELEMENT_PSEUDO_SELECTORS[elementName ?? ""] ?? [];
1558 1756 if (!pseudoSelectors.length) {
1559 1757 return [];
@@ -1570,26 +1768,32 @@
1570 1768 selectorSuffix: pseudoSelector,
1571 1769 mediaQuery,
1572 1770 featureSelectors: featureSelectors && typeof featureSelectors !== "string" ? featureSelectors : void 0,
1573 1771 name,
1574 - elementName
1772 + elementName,
1773 + variationName
1575 1774 }
1576 1775 ];
1577 1776 });
1578 1777 }
1579 -function getResponsiveStyleNodes(node) {
1778 +function getResponsiveStyleNodes(node, responsiveMediaQueries) {
1580 1779 const {
1581 1780 styles,
1582 1781 selector,
1782 + fallbackGapValue,
1583 1783 featureSelectors,
1784 + hasLayoutSupport,
1785 + layoutHasBlockGapSupport,
1786 + layoutSelector,
1584 1787 name,
1585 1788 elementName,
1586 - isStyleVariation
1789 + isStyleVariation,
1790 + variationName
1587 1791 } = node;
1588 1792 if (!name && !elementName) {
1589 1793 return [];
1590 1794 }
1591 - return Object.entries(RESPONSIVE_BREAKPOINTS).flatMap(
1795 + return Object.entries(responsiveMediaQueries).flatMap(
1592 1796 ([breakpointKey, mediaQuery]) => {
1593 1797 const breakpointStyles = styles?.[breakpointKey];
1594 1798 if (!breakpointStyles || typeof breakpointStyles !== "object") {
1595 1799 return [];
@@ -1599,47 +1803,34 @@
1599 1803 styles: JSON.parse(JSON.stringify(breakpointStyles)),
1600 1804 selector,
1601 1805 mediaQuery,
1602 1806 featureSelectors: featureSelectors && typeof featureSelectors !== "string" ? featureSelectors : void 0,
1807 + fallbackGapValue,
1808 + hasLayoutSupport,
1603 1809 name,
1604 1810 elementName,
1605 - isStyleVariation
1811 + isStyleVariation,
1812 + variationName,
1813 + layoutSelector,
1814 + layoutHasBlockGapSupport
1606 1815 }
1607 1816 ];
1608 1817 }
1609 1818 );
1610 1819 }
1611 -function getVariationFeatureSelectors(featureSelectors, styleVariationSelector) {
1612 - if (!featureSelectors || typeof featureSelectors === "string") {
1613 - return void 0;
1614 - }
1615 - return Object.fromEntries(
1616 - Object.entries(featureSelectors).map(([feature, selector]) => {
1617 - if (typeof selector === "string") {
1618 - return [
1619 - feature,
1620 - concatFeatureVariationSelectorString(
1621 - selector,
1622 - styleVariationSelector
1623 - )
1624 - ];
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 + };
1625 1829 }
1626 - return [
1627 - feature,
1628 - Object.fromEntries(
1629 - Object.entries(selector).map(
1630 - ([subfeature, subfeatureSelector]) => [
1631 - subfeature,
1632 - concatFeatureVariationSelectorString(
1633 - subfeatureSelector,
1634 - styleVariationSelector
1635 - )
1636 - ]
1637 - )
1638 - )
1639 - ];
1640 - })
1641 - );
1830 + );
1831 + });
1832 + return elementStylesByName;
1642 1833 }
1643 1834 var getNodesWithStyles = (tree, blockSelectors) => {
1644 1835 const nodes = [];
1645 1836 if (!tree?.styles) {
@@ -1644,9 +1835,10 @@
1644 1835 const nodes = [];
1645 1836 if (!tree?.styles) {
1646 1837 return nodes;
1647 1838 }
1648 - const styles = pickStyleKeys(tree.styles);
1839 + const responsiveMediaQueries = getResponsiveMediaQueries(tree);
1840 + const styles = pickStyleKeys(tree.styles, responsiveMediaQueries);
1649 1841 if (styles) {
1650 1842 nodes.push({
1651 1843 styles,
1652 1844 selector: ROOT_BLOCK_SELECTOR,
@@ -1668,9 +1860,13 @@
1668 1860 }
1669 1861 });
1670 1862 Object.entries(tree.styles?.blocks ?? {}).forEach(
1671 1863 ([blockName, node]) => {
1672 - const blockStyles = pickStyleAndPseudoKeys(node, blockName);
1864 + const blockStyles = pickStyleAndPseudoKeys(
1865 + node,
1866 + blockName,
1867 + responsiveMediaQueries
1868 + );
1673 1869 const typedNode = node;
1674 1870 const variationNodesToAdd = [];
1675 1871 const variationStyleNodesToAdd = [];
1676 1872 if (typedNode?.variations) {
@@ -1678,9 +1874,10 @@
1678 1874 ([variationName, variation]) => {
1679 1875 const typedVariation = variation;
1680 1876 const variationStyles = pickStyleAndPseudoKeys(
1681 1877 typedVariation,
1682 - blockName
1878 + blockName,
1879 + responsiveMediaQueries
1683 1880 );
1684 1881 if (typedVariation?.css) {
1685 1882 variationStyles.css = typedVariation.css;
1686 1883 }
@@ -1689,15 +1886,13 @@
1689 1886 const blockSelector = blockSelectors[blockName];
1690 1887 variationStyleNodesToAdd.push({
1691 1888 styles: variationStyles,
1692 1889 selector: variationSelector,
1693 - featureSelectors: getVariationFeatureSelectors(
1694 - blockSelector?.featureSelectors,
1695 - variationSelector
1696 - ),
1890 + featureSelectors: blockSelector?.featureSelectors,
1697 1891 fallbackGapValue: blockSelector?.fallbackGapValue,
1698 1892 hasLayoutSupport: blockSelector?.hasLayoutSupport,
1699 1893 isStyleVariation: true,
1894 + variationName,
1700 1895 layoutSelector: variationSelector + blockSelector.selector,
1701 1896 layoutHasBlockGapSupport: true,
1702 1897 name: blockName
1703 1898 });
@@ -1702,9 +1897,12 @@
1702 1897 name: blockName
1703 1898 });
1704 1899 }
1705 1900 Object.entries(
1706 - typedVariation?.elements ?? {}
1901 + getElementStylesByName(
1902 + typedVariation,
1903 + responsiveMediaQueries
1904 + )
1707 1905 ).forEach(([element, elementStyles]) => {
1708 1906 if (elementStyles && import_blocks.__EXPERIMENTAL_ELEMENTS[element]) {
1709 1907 variationNodesToAdd.push({
1710 1908 styles: elementStyles,
@@ -1735,9 +1933,10 @@
1735 1933 blockSelectors[variationBlockName]?.featureSelectors ?? {}
1736 1934 ) : void 0;
1737 1935 const variationBlockStyleNodes = pickStyleAndPseudoKeys(
1738 1936 variationBlockStyles,
1739 - variationBlockName
1937 + variationBlockName,
1938 + responsiveMediaQueries
1740 1939 );
1741 1940 if (variationBlockStyles?.css) {
1742 1941 variationBlockStyleNodes.css = variationBlockStyles.css;
1743 1942 }
@@ -1754,9 +1953,12 @@
1754 1953 hasLayoutSupport: blockSelectors[variationBlockName]?.hasLayoutSupport,
1755 1954 styles: variationBlockStyleNodes
1756 1955 });
1757 1956 Object.entries(
1758 - variationBlockStyles.elements ?? {}
1957 + getElementStylesByName(
1958 + variationBlockStyles,
1959 + responsiveMediaQueries
1960 + )
1759 1961 ).forEach(
1760 1962 ([
1761 1963 variationBlockElement,
1762 1964 variationBlockElementStyles
@@ -1790,24 +1992,24 @@
1790 1992 name: blockName
1791 1993 });
1792 1994 }
1793 1995 nodes.push(...variationStyleNodesToAdd);
1794 - Object.entries(typedNode?.elements ?? {}).forEach(
1795 - ([elementName, value]) => {
1796 - if (typeof blockSelectors !== "string" && value && blockSelectors?.[blockName] && import_blocks.__EXPERIMENTAL_ELEMENTS[elementName]) {
1797 - nodes.push({
1798 - styles: value,
1799 - selector: blockSelectors[blockName]?.selector.split(",").map((sel) => {
1800 - const elementSelectors = import_blocks.__EXPERIMENTAL_ELEMENTS[elementName].split(",");
1801 - return elementSelectors.map(
1802 - (elementSelector) => sel + " " + elementSelector
1803 - );
1804 - }).join(","),
1805 - elementName
1806 - });
1807 - }
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 + });
1808 2010 }
1809 - );
2011 + });
1810 2012 nodes.push(...variationNodesToAdd);
1811 2013 }
1812 2014 );
1813 2015 return nodes;
@@ -1959,9 +2161,10 @@
1959 2161 featureSelectors,
1960 2162 layoutSelector,
1961 2163 layoutHasBlockGapSupport,
1962 2164 skipSelectorWrapper,
1963 - name
2165 + name,
2166 + variationName
1964 2167 } = node;
1965 2168 let ruleset = "";
1966 2169 const effectiveSelector = selectorSuffix ? appendToSelector(selector, selectorSuffix) : selector;
1967 2170 if (featureSelectors && typeof featureSelectors !== "string") {
@@ -1980,9 +2183,13 @@
1980 2183 );
1981 2184 Object.entries(featureDeclarations).forEach(
1982 2185 ([featureSelector, declarations]) => {
1983 2186 if (declarations.length) {
1984 - const selectorForRule = selectorSuffix ? appendToSelector(featureSelector, selectorSuffix) : featureSelector;
2187 + let selectorForRule = variationName ? getBlockStyleVariationFeatureSelector(
2188 + variationName,
2189 + featureSelector
2190 + ) : featureSelector;
2191 + selectorForRule = selectorSuffix ? appendToSelector(selectorForRule, selectorSuffix) : selectorForRule;
1985 2192 const rules = declarations.join(";");
1986 2193 ruleset += `:root :where(${selectorForRule}){${rules};}`;
1987 2194 }
1988 2195 }
@@ -2044,12 +2251,19 @@
2044 2251 rootPadding: true,
2045 2252 variationStyles: false,
2046 2253 ...styleOptions
2047 2254 };
2048 - const nodesWithStyles = getNodesWithStyles(tree, blockSelectors);
2049 - const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);
2050 - const useRootPaddingAlign = tree?.settings?.useRootPaddingAwareAlignments;
2051 - 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 || {};
2052 2266 const hasBodyStyles = options.marginReset || options.rootPadding || options.layoutStyles;
2053 2267 let ruleset = "";
2054 2268 if (options.presets && (contentSize || wideSize)) {
2055 2269 ruleset += `${ROOT_CSS_PROPERTIES_SELECTOR} {`;
@@ -2069,13 +2283,17 @@
2069 2283 }
2070 2284 ruleset += "}";
2071 2285 }
2072 2286 if (options.blockStyles) {
2287 + const responsiveMediaQueries = getResponsiveMediaQueries(tree);
2073 2288 nodesWithStyles.forEach((node) => {
2074 2289 if (node.isStyleVariation && !options.variationStyles) {
2075 2290 return;
2076 2291 }
2077 - const responsiveNodes = getResponsiveStyleNodes(node);
2292 + const responsiveNodes = getResponsiveStyleNodes(
2293 + node,
2294 + responsiveMediaQueries
2295 + );
2078 2296 [
2079 2297 node,
2080 2298 ...responsiveNodes,
2081 2299 ...getPseudoStyleNodes(node),
@@ -2081,9 +2299,9 @@
2081 2299 ...getPseudoStyleNodes(node),
2082 2300 ...responsiveNodes.flatMap(getPseudoStyleNodes)
2083 2301 ].forEach((expandedNode) => {
2084 2302 ruleset += renderStylesNode(expandedNode, {
2085 - tree,
2303 + tree: normalizedTree,
2086 2304 useRootPaddingAlign,
2087 2305 disableLayoutStyles,
2088 2306 hasBlockGapSupport,
2089 2307 hasFallbackGapSupport,
@@ -2097,9 +2315,9 @@
2097 2315 ruleset = ruleset + ".wp-site-blocks > .alignright { float: right; margin-left: 2em; }";
2098 2316 ruleset = ruleset + ".wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }";
2099 2317 }
2100 2318 if (options.blockGap && hasBlockGapSupport) {
2101 - const gapValue = getGapCSSValue(tree?.styles?.spacing?.blockGap) || "0.5em";
2319 + const gapValue = getGapCSSValue(normalizedTree?.styles?.spacing?.blockGap) || "0.5em";
2102 2320 ruleset = ruleset + `:root :where(.wp-site-blocks) > * { margin-block-start: ${gapValue}; margin-block-end: 0; }`;
2103 2321 ruleset = ruleset + ":root :where(.wp-site-blocks) > :first-child { margin-block-start: 0; }";
2104 2322 ruleset = ruleset + ":root :where(.wp-site-blocks) > :last-child { margin-block-end: 0; }";
2105 2323 }
@@ -2160,12 +2378,10 @@
2160 2378 duotoneSelector = scopeSelector(rootSelector, duotoneSupport);
2161 2379 }
2162 2380 }
2163 2381 const hasLayoutSupport = !!blockType?.supports?.layout || !!blockType?.supports?.__experimentalLayout;
2164 - const fallbackGapValue = (
2165 - // @ts-expect-error
2166 - blockType?.supports?.spacing?.blockGap?.__experimentalDefault
2167 - );
2382 + const blockGapSupport = blockType?.supports?.spacing?.blockGap;
2383 + const fallbackGapValue = typeof blockGapSupport === "object" && !Array.isArray(blockGapSupport) ? blockGapSupport.__experimentalDefault : void 0;
2168 2384 const blockStyleVariations = getBlockStyles(name);
2169 2385 const styleVariationSelectors = {};
2170 2386 blockStyleVariations?.forEach((variation) => {
2171 2387 const variationSuffix = variationInstanceId ? `-${variationInstanceId}` : "";
@@ -2255,9 +2471,9 @@
2255 2471 styleOptions = {}
2256 2472 } = options;
2257 2473 const blocks = blockTypes.length > 0 ? blockTypes : (0, import_blocks.getBlockTypes)();
2258 2474 const blockGap = getSetting(config, "spacing.blockGap");
2259 - const hasBlockGapSupport = hasBlockGapSupportOption ?? blockGap !== null;
2475 + const hasBlockGapSupport = hasBlockGapSupportOption ?? (blockGap !== null && blockGap !== void 0);
2260 2476 const hasFallbackGapSupport = hasFallbackGapSupportOption ?? !hasBlockGapSupport;
2261 2477 if (!config?.styles || !config?.settings) {
2262 2478 return [[], {}];
2263 2479 }
@@ -2319,8 +2535,9 @@
2319 2535 }
2320 2536
2321 2537 // packages/lazy-editor/build-module/hooks/use-editor-settings.mjs
2322 2538 var import_core_data3 = __toESM(require_core_data(), 1);
2539 +var import_blocks2 = __toESM(require_blocks(), 1);
2323 2540 var import_element2 = __toESM(require_element(), 1);
2324 2541 var import_data4 = __toESM(require_data(), 1);
2325 2542
2326 2543 // packages/lazy-editor/build-module/hooks/use-global-styles.mjs
@@ -2329,8 +2546,11 @@
2329 2546 var import_element = __toESM(require_element(), 1);
2330 2547 function useUserGlobalStyles(id) {
2331 2548 const { userGlobalStyles } = (0, import_data3.useSelect)(
2332 2549 (select2) => {
2550 + if (id === void 0) {
2551 + return { userGlobalStyles: void 0 };
2552 + }
2333 2553 const { getEntityRecord, getEditedEntityRecord, canUser } = select2(import_core_data2.store);
2334 2554 const userCanEditGlobalStyles = canUser("update", {
2335 2555 kind: "root",
2336 2556 name: "globalStyles",
@@ -2383,19 +2603,25 @@
2383 2603 "@wordpress/lazy-editor"
2384 2604 );
2385 2605
2386 2606 // packages/lazy-editor/build-module/hooks/use-editor-settings.mjs
2387 -function useEditorSettings({ stylesId }) {
2388 - const { editorSettings } = (0, import_data4.useSelect)(
2607 +function useEditorSettings({
2608 + stylesId
2609 +}) {
2610 + const { editorSettings, blockTypes } = (0, import_data4.useSelect)(
2389 2611 (select2) => ({
2390 2612 editorSettings: unlock(
2391 2613 select2(import_core_data3.store)
2392 - ).getEditorSettings()
2614 + ).getEditorSettings(),
2615 + blockTypes: select2(import_blocks2.store).getBlockTypes()
2393 2616 }),
2394 2617 []
2395 2618 );
2396 2619 const { user: globalStyles } = useUserGlobalStyles(stylesId);
2397 - const [globalStylesCSS] = generateGlobalStyles(globalStyles);
2620 + const [globalStylesCSS] = (0, import_element2.useMemo)(
2621 + () => generateGlobalStyles(globalStyles, blockTypes),
2622 + [globalStyles, blockTypes]
2623 + );
2398 2624 const hasEditorSettings = !!editorSettings;
2399 2625 const styles = (0, import_element2.useMemo)(() => {
2400 2626 if (!hasEditorSettings) {
2401 2627 return [];
@@ -2677,14 +2903,23 @@
2677 2903 }
2678 2904
2679 2905 // packages/lazy-editor/build-module/components/editor/index.mjs
2680 2906 var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
2681 -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);
2682 2914 function Editor({
2683 2915 postType,
2684 2916 postId,
2685 2917 settings,
2686 - backButton
2918 + backButton,
2919 + onActionPerformed,
2920 + initialViewport,
2921 + renderingMode
2687 2922 }) {
2688 2923 const homePage = (0, import_data6.useSelect)(
2689 2924 (select2) => {
2690 2925 if (postType || postId) {
@@ -2719,9 +2954,19 @@
2719 2954 const { isReady: assetsReady } = useEditorAssets();
2720 2955 const finalSettings = (0, import_element4.useMemo)(
2721 2956 () => ({
2722 2957 ...editorSettings,
2723 - ...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 + ]
2724 2969 }),
2725 2970 [editorSettings, settings]
2726 2971 );
2727 2972 if (!settingsReady || !assetsReady) {
@@ -2737,9 +2982,9 @@
2737 2982 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {})
2738 2983 }
2739 2984 );
2740 2985 }
2741 - return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2986 + return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
2742 2987 PrivateEditor,
2743 2988 {
2744 2989 postType: resolvedPostType,
2745 2990 postId: resolvedPostId,
@@ -2745,9 +2990,16 @@
2745 2990 postId: resolvedPostId,
2746 2991 templateId,
2747 2992 settings: finalSettings,
2748 2993 styles: finalSettings.styles,
2749 - 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 + ]
2750 3002 }
2751 3003 );
2752 3004 }
2753 3005
@@ -2755,11 +3007,11 @@
2755 3007 var import_i18n = __toESM(require_i18n(), 1);
2756 3008 var import_element5 = __toESM(require_element(), 1);
2757 3009 var import_block_editor = __toESM(require_block_editor(), 1);
2758 3010 var import_editor2 = __toESM(require_editor(), 1);
2759 -var import_blocks2 = __toESM(require_blocks(), 1);
3011 +var import_blocks3 = __toESM(require_blocks(), 1);
2760 3012 var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
2761 -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']")) {
2762 3014 const style = document.createElement("style");
2763 3015 style.setAttribute("data-wp-hash", "95327475c1");
2764 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}"));
2765 3017 document.head.appendChild(style);
@@ -2772,9 +3024,9 @@
2772 3024 }) {
2773 3025 const descriptionId = (0, import_element5.useId)();
2774 3026 const backgroundColor = useStyle("color.background");
2775 3027 const actualBlocks = (0, import_element5.useMemo)(() => {
2776 - return blocks ?? (0, import_blocks2.parse)(content, {
3028 + return blocks ?? (0, import_blocks3.parse)(content, {
2777 3029 __unstableSkipMigrationLogs: true
2778 3030 });
2779 3031 }, [content, blocks]);
2780 3032 const isEmpty = !actualBlocks?.length;