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 +512 -260 23.2.2 → 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"
@@ -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;