| @@ -121,8 +121,14 @@ | ||
| 121 | 121 | templateId |
| 122 | 122 | ) : null; |
| 123 | 123 | return { |
| 124 | 124 | globalStylesId: coreDataSelect.__experimentalGetCurrentGlobalStylesId(), |
| 125 | + /* | |
| 126 | + * `styles_id` is not part of the template REST schema, so it | |
| 127 | + * cannot come from the record type. It is read defensively in | |
| 128 | + * case a filtered response carries one; without it the hook | |
| 129 | + * falls back to the global styles ID below. | |
| 130 | + */ | |
| 125 | 131 | stylesId: template?.styles_id |
| 126 | 132 | }; |
| 127 | 133 | }, |
| 128 | 134 | [templateId] |
| @@ -218,10 +224,15 @@ | ||
| 218 | 224 | "typography.textAlign", |
| 219 | 225 | "typography.textColumns", |
| 220 | 226 | "typography.textDecoration", |
| 221 | 227 | "typography.textIndent", |
| 228 | + "typography.textShadow", | |
| 229 | + "typography.defaultTextShadowPresets", | |
| 230 | + "typography.textShadowPresets", | |
| 222 | 231 | "typography.textTransform", |
| 223 | - "typography.writingMode" | |
| 232 | + "typography.writingMode", | |
| 233 | + "viewport.mobile", | |
| 234 | + "viewport.tablet" | |
| 224 | 235 | ]; |
| 225 | 236 | function getSetting(globalStyles, path, blockName) { |
| 226 | 237 | const appendedBlockPath = blockName ? ".blocks." + blockName : ""; |
| 227 | 238 | const appendedPropertyPath = path ? "." + path : ""; |
| @@ -513,8 +524,16 @@ | ||
| 513 | 524 | { classSuffix: "font-family", propertyName: "font-family" } |
| 514 | 525 | ] |
| 515 | 526 | }, |
| 516 | 527 | { |
| 528 | + path: ["typography", "textShadowPresets"], | |
| 529 | + valueKey: "textShadow", | |
| 530 | + cssVarInfix: "text-shadow", | |
| 531 | + classes: [ | |
| 532 | + { classSuffix: "text-shadow", propertyName: "text-shadow" } | |
| 533 | + ] | |
| 534 | + }, | |
| 535 | + { | |
| 517 | 536 | path: ["spacing", "spacingSizes"], |
| 518 | 537 | valueKey: "size", |
| 519 | 538 | cssVarInfix: "spacing", |
| 520 | 539 | valueFunc: ({ size }) => size, |
| @@ -582,12 +601,10 @@ | ||
| 582 | 601 | const variationClass = `.is-style-${variation}`; |
| 583 | 602 | if (!blockSelector) { |
| 584 | 603 | return variationClass; |
| 585 | 604 | } |
| 586 | - const ancestorRegex = /((?::\([^)]+\))?\s*)([^\s:]+)/; | |
| 587 | - const addVariationClass = (_match, group1, group2) => { | |
| 588 | - return group1 + group2 + variationClass; | |
| 589 | - }; | |
| 605 | + const ancestorRegex = /[^\s:]+/; | |
| 606 | + const addVariationClass = (match) => match + variationClass; | |
| 590 | 607 | const result = splitSelectorList(blockSelector).map( |
| 591 | 608 | (part) => part.replace(ancestorRegex, addVariationClass) |
| 592 | 609 | ); |
| 593 | 610 | return result.join(","); |
| @@ -644,12 +661,15 @@ | ||
| 644 | 661 | return ruleValue; |
| 645 | 662 | } |
| 646 | 663 | const resolvedValue = getResolvedRefValue(ruleValue, tree); |
| 647 | 664 | if (typeof resolvedValue === "object" && resolvedValue !== null && "url" in resolvedValue && resolvedValue?.url) { |
| 648 | - resolvedValue.url = getResolvedThemeFilePath( | |
| 649 | - resolvedValue.url, | |
| 650 | - tree?._links?.["wp:theme-file"] | |
| 651 | - ); | |
| 665 | + return { | |
| 666 | + ...resolvedValue, | |
| 667 | + url: getResolvedThemeFilePath( | |
| 668 | + resolvedValue.url, | |
| 669 | + tree?._links?.["wp:theme-file"] | |
| 670 | + ) | |
| 671 | + }; | |
| 652 | 672 | } |
| 653 | 673 | return resolvedValue; |
| 654 | 674 | } |
| 655 | 675 | |
| @@ -764,163 +784,176 @@ | ||
| 764 | 784 | return null; |
| 765 | 785 | } |
| 766 | 786 | |
| 767 | 787 | // node_modules/colord/index.mjs |
| 768 | -var r = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) }; | |
| 769 | -var t = function(r2) { | |
| 788 | +for (r = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) }, t = function(r2) { | |
| 770 | 789 | return "string" == typeof r2 ? r2.length > 0 : "number" == typeof r2; |
| 771 | -}; | |
| 772 | -var n = function(r2, t2, n2) { | |
| 790 | +}, n = function(r2, t2, n2) { | |
| 773 | 791 | return void 0 === t2 && (t2 = 0), void 0 === n2 && (n2 = Math.pow(10, t2)), Math.round(n2 * r2) / n2 + 0; |
| 774 | -}; | |
| 775 | -var e = function(r2, t2, n2) { | |
| 792 | +}, u = function(r2, t2, n2) { | |
| 776 | 793 | return void 0 === t2 && (t2 = 0), void 0 === n2 && (n2 = 1), r2 > n2 ? n2 : r2 > t2 ? r2 : t2; |
| 777 | -}; | |
| 778 | -var u = function(r2) { | |
| 779 | - return (r2 = isFinite(r2) ? r2 % 360 : 0) > 0 ? r2 : r2 + 360; | |
| 780 | -}; | |
| 781 | -var a = function(r2) { | |
| 782 | - return { r: e(r2.r, 0, 255), g: e(r2.g, 0, 255), b: e(r2.b, 0, 255), a: e(r2.a) }; | |
| 783 | -}; | |
| 784 | -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) { | |
| 785 | 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)]; | |
| 786 | 823 | }; |
| 787 | -var i = /^#([0-9a-f]{3,8})$/i; | |
| 788 | -var s = function(r2) { | |
| 789 | - var t2 = r2.toString(16); | |
| 790 | - 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 }; | |
| 791 | 827 | }; |
| 792 | -var h = function(r2) { | |
| 793 | - 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; | |
| 794 | - 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 }; | |
| 795 | 833 | }; |
| 796 | -var b = function(r2) { | |
| 797 | - var t2 = r2.h, n2 = r2.s, e2 = r2.v, u2 = r2.a; | |
| 798 | - t2 = t2 / 360 * 6, n2 /= 100, e2 /= 100; | |
| 799 | - 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; | |
| 800 | - 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) }; | |
| 801 | 836 | }; |
| 802 | -var g = function(r2) { | |
| 803 | - 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) }; | |
| 804 | 839 | }; |
| 805 | -var d = function(r2) { | |
| 806 | - 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; | |
| 807 | 843 | }; |
| 808 | -var f = function(r2) { | |
| 809 | - 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 })); | |
| 810 | - 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; | |
| 811 | 847 | }; |
| 812 | -var c = function(r2) { | |
| 813 | - 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 }; | |
| 814 | - var t2, n2, e2, u2; | |
| 815 | -}; | |
| 816 | -var l = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i; | |
| 817 | -var p = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i; | |
| 818 | -var v = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i; | |
| 819 | -var m = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i; | |
| 820 | -var y = { string: [[function(r2) { | |
| 821 | - var t2 = i.exec(r2); | |
| 822 | - 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; | |
| 823 | -}, "hex"], [function(r2) { | |
| 824 | - var t2 = v.exec(r2) || m.exec(r2); | |
| 825 | - 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; | |
| 826 | -}, "rgb"], [function(t2) { | |
| 827 | - var n2 = l.exec(t2) || p.exec(t2); | |
| 828 | - if (!n2) return null; | |
| 829 | - 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) }); | |
| 830 | - return f(a2); | |
| 831 | -}, "hsl"]], object: [[function(r2) { | |
| 832 | - var n2 = r2.r, e2 = r2.g, u2 = r2.b, o2 = r2.a, i2 = void 0 === o2 ? 1 : o2; | |
| 833 | - return t(n2) && t(e2) && t(u2) ? a({ r: Number(n2), g: Number(e2), b: Number(u2), a: Number(i2) }) : null; | |
| 834 | -}, "rgb"], [function(r2) { | |
| 835 | - var n2 = r2.h, e2 = r2.s, u2 = r2.l, a2 = r2.a, o2 = void 0 === a2 ? 1 : a2; | |
| 836 | - if (!t(n2) || !t(e2) || !t(u2)) return null; | |
| 837 | - var i2 = g({ h: Number(n2), s: Number(e2), l: Number(u2), a: Number(o2) }); | |
| 838 | - return f(i2); | |
| 839 | -}, "hsl"], [function(r2) { | |
| 840 | - var n2 = r2.h, a2 = r2.s, o2 = r2.v, i2 = r2.a, s2 = void 0 === i2 ? 1 : i2; | |
| 841 | - if (!t(n2) || !t(a2) || !t(o2)) return null; | |
| 842 | - var h2 = (function(r3) { | |
| 843 | - return { h: u(r3.h), s: e(r3.s, 0, 100), v: e(r3.v, 0, 100), a: e(r3.a) }; | |
| 844 | - })({ h: Number(n2), s: Number(a2), v: Number(o2), a: Number(s2) }); | |
| 845 | - 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); | |
| 846 | 879 | }, "hsv"]] }; |
| 847 | -var N = function(r2, t2) { | |
| 848 | - for (var n2 = 0; n2 < t2.length; n2++) { | |
| 849 | - var e2 = t2[n2][0](r2); | |
| 850 | - 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]]; | |
| 851 | 884 | } |
| 852 | 885 | return [null, void 0]; |
| 853 | 886 | }; |
| 854 | -var x = function(r2) { | |
| 855 | - 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]; | |
| 856 | 889 | }; |
| 857 | -var M = function(r2, t2) { | |
| 858 | - var n2 = c(r2); | |
| 859 | - 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 }; | |
| 860 | 893 | }; |
| 861 | -var H = function(r2) { | |
| 862 | - 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; | |
| 863 | 896 | }; |
| 864 | -var $ = function(r2, t2) { | |
| 865 | - var n2 = c(r2); | |
| 866 | - 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 }; | |
| 867 | 900 | }; |
| 868 | -var j = (function() { | |
| 869 | - function r2(r3) { | |
| 870 | - 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 }; | |
| 871 | 904 | } |
| 872 | - return r2.prototype.isValid = function() { | |
| 905 | + return r.prototype.isValid = function() { | |
| 873 | 906 | return null !== this.parsed; |
| 874 | - }, r2.prototype.brightness = function() { | |
| 875 | - return n(H(this.rgba), 2); | |
| 876 | - }, r2.prototype.isDark = function() { | |
| 877 | - return H(this.rgba) < 0.5; | |
| 878 | - }, r2.prototype.isLight = function() { | |
| 879 | - return H(this.rgba) >= 0.5; | |
| 880 | - }, r2.prototype.toHex = function() { | |
| 881 | - 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; | |
| 882 | - var r3, t2, e2, u2, a2, i2; | |
| 883 | - }, r2.prototype.toRgb = function() { | |
| 884 | - return o(this.rgba); | |
| 885 | - }, r2.prototype.toRgbString = function() { | |
| 886 | - 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 + ")"; | |
| 887 | - var r3, t2, n2, e2, u2; | |
| 888 | - }, r2.prototype.toHsl = function() { | |
| 889 | - return d(c(this.rgba)); | |
| 890 | - }, r2.prototype.toHslString = function() { | |
| 891 | - 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 + "%)"; | |
| 892 | - var r3, t2, n2, e2, u2; | |
| 893 | - }, r2.prototype.toHsv = function() { | |
| 894 | - return r3 = h(this.rgba), { h: n(r3.h), s: n(r3.s), v: n(r3.v), a: n(r3.a, 3) }; | |
| 895 | - var r3; | |
| 896 | - }, r2.prototype.invert = function() { | |
| 897 | - return w({ r: 255 - (r3 = this.rgba).r, g: 255 - r3.g, b: 255 - r3.b, a: r3.a }); | |
| 898 | - var r3; | |
| 899 | - }, r2.prototype.saturate = function(r3) { | |
| 900 | - return void 0 === r3 && (r3 = 0.1), w(M(this.rgba, r3)); | |
| 901 | - }, r2.prototype.desaturate = function(r3) { | |
| 902 | - return void 0 === r3 && (r3 = 0.1), w(M(this.rgba, -r3)); | |
| 903 | - }, r2.prototype.grayscale = function() { | |
| 904 | - return w(M(this.rgba, -1)); | |
| 905 | - }, r2.prototype.lighten = function(r3) { | |
| 906 | - return void 0 === r3 && (r3 = 0.1), w($(this.rgba, r3)); | |
| 907 | - }, r2.prototype.darken = function(r3) { | |
| 908 | - return void 0 === r3 && (r3 = 0.1), w($(this.rgba, -r3)); | |
| 909 | - }, r2.prototype.rotate = function(r3) { | |
| 910 | - return void 0 === r3 && (r3 = 15), this.hue(this.hue() + r3); | |
| 911 | - }, r2.prototype.alpha = function(r3) { | |
| 912 | - return "number" == typeof r3 ? w({ r: (t2 = this.rgba).r, g: t2.g, b: t2.b, a: r3 }) : n(this.rgba.a, 3); | |
| 913 | - var t2; | |
| 914 | - }, r2.prototype.hue = function(r3) { | |
| 915 | - var t2 = c(this.rgba); | |
| 916 | - return "number" == typeof r3 ? w({ h: r3, s: t2.s, l: t2.l, a: t2.a }) : n(t2.h); | |
| 917 | - }, r2.prototype.isEqual = function(r3) { | |
| 918 | - return this.toHex() === w(r3).toHex(); | |
| 919 | - }, 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; | |
| 920 | 953 | })(); |
| 921 | -var w = function(r2) { | |
| 922 | - return r2 instanceof j ? r2 : new j(r2); | |
| 954 | +var A = function(r) { | |
| 955 | + return r instanceof q ? r : new q(r); | |
| 923 | 956 | }; |
| 924 | 957 | |
| 925 | 958 | // packages/global-styles-engine/build-module/utils/duotone.mjs |
| 926 | 959 | function getValuesFromColors(colors = []) { |
| @@ -930,9 +963,9 @@ | ||
| 930 | 963 | b: [], |
| 931 | 964 | a: [] |
| 932 | 965 | }; |
| 933 | 966 | colors.forEach((color) => { |
| 934 | - const rgbColor = w(color).toRgb(); | |
| 967 | + const rgbColor = A(color).toRgb(); | |
| 935 | 968 | values.r.push(rgbColor.r / 255); |
| 936 | 969 | values.g.push(rgbColor.g / 255); |
| 937 | 970 | values.b.push(rgbColor.b / 255); |
| 938 | 971 | values.a.push(rgbColor.a); |
| @@ -1016,11 +1049,13 @@ | ||
| 1016 | 1049 | backgroundSize: "cover", |
| 1017 | 1050 | backgroundPosition: "50% 50%" |
| 1018 | 1051 | // used only when backgroundSize is 'contain'. |
| 1019 | 1052 | }; |
| 1053 | +function hasImageUrl(backgroundImage) { | |
| 1054 | + return typeof backgroundImage === "object" && backgroundImage !== null && "url" in backgroundImage && !!backgroundImage.url; | |
| 1055 | +} | |
| 1020 | 1056 | function setBackgroundStyleDefaults(backgroundStyle) { |
| 1021 | - if (!backgroundStyle || // @ts-expect-error | |
| 1022 | - !backgroundStyle?.backgroundImage?.url) { | |
| 1057 | + if (!backgroundStyle || !hasImageUrl(backgroundStyle.backgroundImage)) { | |
| 1023 | 1058 | return; |
| 1024 | 1059 | } |
| 1025 | 1060 | let backgroundStylesWithDefaults; |
| 1026 | 1061 | if (!backgroundStyle?.backgroundSize) { |
| @@ -1208,8 +1243,84 @@ | ||
| 1208 | 1243 | ] |
| 1209 | 1244 | } |
| 1210 | 1245 | }; |
| 1211 | 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 | + | |
| 1212 | 1323 | // packages/global-styles-engine/build-module/core/render.mjs |
| 1213 | 1324 | var ELEMENT_CLASS_NAMES = { |
| 1214 | 1325 | button: "wp-element-button", |
| 1215 | 1326 | caption: "wp-element-caption" |
| @@ -1244,12 +1355,8 @@ | ||
| 1244 | 1355 | ":focus-visible", |
| 1245 | 1356 | ":active" |
| 1246 | 1357 | ] |
| 1247 | 1358 | }; |
| 1248 | -var RESPONSIVE_BREAKPOINTS = { | |
| 1249 | - "@mobile": "@media (width <= 480px)", | |
| 1250 | - "@tablet": "@media (480px < width <= 782px)" | |
| 1251 | -}; | |
| 1252 | 1359 | function getPresetsClasses(blockSelector = "*", blockPresets = {}) { |
| 1253 | 1360 | return PRESET_METADATA.reduce( |
| 1254 | 1361 | (declarations, { path, cssVarInfix, classes }) => { |
| 1255 | 1362 | if (!classes) { |
| @@ -1271,11 +1378,9 @@ | ||
| 1271 | 1378 | }) => { |
| 1272 | 1379 | const classSelectorToUse = `.has-${kebabCase( |
| 1273 | 1380 | slug |
| 1274 | 1381 | )}-${classSuffix}`; |
| 1275 | - const selectorToUse = blockSelector.split(",").map( | |
| 1276 | - (selector) => `${selector}${classSelectorToUse}` | |
| 1277 | - ).join(","); | |
| 1382 | + const selectorToUse = blockSelector ? `:where(${blockSelector})${classSelectorToUse}` : classSelectorToUse; | |
| 1278 | 1383 | const value = `var(--wp--preset--${cssVarInfix}--${kebabCase( |
| 1279 | 1384 | slug |
| 1280 | 1385 | )})`; |
| 1281 | 1386 | declarations += `${selectorToUse}{${propertyName}: ${value} !important;}`; |
| @@ -1299,9 +1404,9 @@ | ||
| 1299 | 1404 | blockPresets, |
| 1300 | 1405 | metadata.path, |
| 1301 | 1406 | {} |
| 1302 | 1407 | ); |
| 1303 | - return ["default", "theme"].filter((origin) => presetByOrigin[origin]).flatMap( | |
| 1408 | + return ["default", "theme", "custom"].filter((origin) => presetByOrigin[origin]).flatMap( | |
| 1304 | 1409 | (origin) => presetByOrigin[origin].map( |
| 1305 | 1410 | (preset) => getDuotoneFilter( |
| 1306 | 1411 | `wp-duotone-${preset.slug}`, |
| 1307 | 1412 | preset.colors |
| @@ -1521,9 +1626,10 @@ | ||
| 1521 | 1626 | hasFallbackGapSupport, |
| 1522 | 1627 | fallbackGapValue |
| 1523 | 1628 | }) { |
| 1524 | 1629 | let ruleset = ""; |
| 1525 | - let gapValue = hasBlockGapSupport ? getGapCSSValue(style?.spacing?.blockGap) : ""; | |
| 1630 | + const blockGapValue = style?.spacing?.blockGap; | |
| 1631 | + let gapValue = hasBlockGapSupport ? getGapCSSValue(blockGapValue) : ""; | |
| 1526 | 1632 | if (hasFallbackGapSupport) { |
| 1527 | 1633 | if (selector === ROOT_BLOCK_SELECTOR) { |
| 1528 | 1634 | gapValue = !gapValue ? "0.5em" : gapValue; |
| 1529 | 1635 | } else if (!hasBlockGapSupport && fallbackGapValue) { |
| @@ -1529,8 +1635,9 @@ | ||
| 1529 | 1635 | } else if (!hasBlockGapSupport && fallbackGapValue) { |
| 1530 | 1636 | gapValue = fallbackGapValue; |
| 1531 | 1637 | } |
| 1532 | 1638 | } |
| 1639 | + const rowGapValue = hasBlockGapSupport && blockGapValue && typeof blockGapValue !== "string" ? getGapCSSValue(blockGapValue.top) : gapValue; | |
| 1533 | 1640 | if (gapValue && layoutDefinitions) { |
| 1534 | 1641 | Object.values(layoutDefinitions).forEach( |
| 1535 | 1642 | ({ className, name, spacingStyles }) => { |
| 1536 | 1643 | if (!hasBlockGapSupport && "flex" !== name && "grid" !== name) { |
| @@ -1535,8 +1642,11 @@ | ||
| 1535 | 1642 | ({ className, name, spacingStyles }) => { |
| 1536 | 1643 | if (!hasBlockGapSupport && "flex" !== name && "grid" !== name) { |
| 1537 | 1644 | return; |
| 1538 | 1645 | } |
| 1646 | + const layoutGapValue = ["default", "constrained"].includes( | |
| 1647 | + name | |
| 1648 | + ) ? rowGapValue : gapValue; | |
| 1539 | 1649 | if (spacingStyles?.length) { |
| 1540 | 1650 | spacingStyles.forEach((spacingStyle) => { |
| 1541 | 1651 | const declarations = []; |
| 1542 | 1652 | if (spacingStyle.rules) { |
| @@ -1542,9 +1652,9 @@ | ||
| 1542 | 1652 | if (spacingStyle.rules) { |
| 1543 | 1653 | Object.entries(spacingStyle.rules).forEach( |
| 1544 | 1654 | ([cssProperty, cssValue]) => { |
| 1545 | 1655 | declarations.push( |
| 1546 | - `${cssProperty}: ${cssValue ? cssValue : gapValue}` | |
| 1656 | + `${cssProperty}: ${cssValue ? cssValue : layoutGapValue}` | |
| 1547 | 1657 | ); |
| 1548 | 1658 | } |
| 1549 | 1659 | ); |
| 1550 | 1660 | } |
| @@ -1609,12 +1719,16 @@ | ||
| 1609 | 1719 | "outline", |
| 1610 | 1720 | "shadow", |
| 1611 | 1721 | "background" |
| 1612 | 1722 | ]; |
| 1613 | -function pickStyleKeys(treeToPickFrom) { | |
| 1614 | - return pickStyleAndPseudoKeys(treeToPickFrom); | |
| 1723 | +function pickStyleKeys(treeToPickFrom, responsiveMediaQueries) { | |
| 1724 | + return pickStyleAndPseudoKeys( | |
| 1725 | + treeToPickFrom, | |
| 1726 | + void 0, | |
| 1727 | + responsiveMediaQueries | |
| 1728 | + ); | |
| 1615 | 1729 | } |
| 1616 | -function pickStyleAndPseudoKeys(treeToPickFrom, blockName) { | |
| 1730 | +function pickStyleAndPseudoKeys(treeToPickFrom, blockName, responsiveMediaQueries) { | |
| 1617 | 1731 | if (!treeToPickFrom) { |
| 1618 | 1732 | return {}; |
| 1619 | 1733 | } |
| 1620 | 1734 | const entries = Object.entries(treeToPickFrom); |
| @@ -1619,9 +1733,9 @@ | ||
| 1619 | 1733 | } |
| 1620 | 1734 | const entries = Object.entries(treeToPickFrom); |
| 1621 | 1735 | const allowedPseudoSelectors = blockName ? VALID_BLOCK_PSEUDO_SELECTORS[blockName] ?? [] : []; |
| 1622 | 1736 | const pickedEntries = entries.filter( |
| 1623 | - ([key]) => STYLE_KEYS.includes(key) || allowedPseudoSelectors.includes(key) || RESPONSIVE_BREAKPOINTS[key] | |
| 1737 | + ([key]) => STYLE_KEYS.includes(key) || allowedPseudoSelectors.includes(key) || responsiveMediaQueries[key] | |
| 1624 | 1738 | ); |
| 1625 | 1739 | const clonedEntries = pickedEntries.map(([key, style]) => [ |
| 1626 | 1740 | key, |
| 1627 | 1741 | JSON.parse(JSON.stringify(style)) |
| @@ -1660,13 +1774,17 @@ | ||
| 1660 | 1774 | } |
| 1661 | 1775 | ]; |
| 1662 | 1776 | }); |
| 1663 | 1777 | } |
| 1664 | -function getResponsiveStyleNodes(node) { | |
| 1778 | +function getResponsiveStyleNodes(node, responsiveMediaQueries) { | |
| 1665 | 1779 | const { |
| 1666 | 1780 | styles, |
| 1667 | 1781 | selector, |
| 1782 | + fallbackGapValue, | |
| 1668 | 1783 | featureSelectors, |
| 1784 | + hasLayoutSupport, | |
| 1785 | + layoutHasBlockGapSupport, | |
| 1786 | + layoutSelector, | |
| 1669 | 1787 | name, |
| 1670 | 1788 | elementName, |
| 1671 | 1789 | isStyleVariation, |
| 1672 | 1790 | variationName |
| @@ -1673,9 +1791,9 @@ | ||
| 1673 | 1791 | } = node; |
| 1674 | 1792 | if (!name && !elementName) { |
| 1675 | 1793 | return []; |
| 1676 | 1794 | } |
| 1677 | - return Object.entries(RESPONSIVE_BREAKPOINTS).flatMap( | |
| 1795 | + return Object.entries(responsiveMediaQueries).flatMap( | |
| 1678 | 1796 | ([breakpointKey, mediaQuery]) => { |
| 1679 | 1797 | const breakpointStyles = styles?.[breakpointKey]; |
| 1680 | 1798 | if (!breakpointStyles || typeof breakpointStyles !== "object") { |
| 1681 | 1799 | return []; |
| @@ -1685,23 +1803,42 @@ | ||
| 1685 | 1803 | styles: JSON.parse(JSON.stringify(breakpointStyles)), |
| 1686 | 1804 | selector, |
| 1687 | 1805 | mediaQuery, |
| 1688 | 1806 | featureSelectors: featureSelectors && typeof featureSelectors !== "string" ? featureSelectors : void 0, |
| 1807 | + fallbackGapValue, | |
| 1808 | + hasLayoutSupport, | |
| 1689 | 1809 | name, |
| 1690 | 1810 | elementName, |
| 1691 | 1811 | isStyleVariation, |
| 1692 | - variationName | |
| 1812 | + variationName, | |
| 1813 | + layoutSelector, | |
| 1814 | + layoutHasBlockGapSupport | |
| 1693 | 1815 | } |
| 1694 | 1816 | ]; |
| 1695 | 1817 | } |
| 1696 | 1818 | ); |
| 1697 | 1819 | } |
| 1820 | +function getElementStylesByName(styleNode, responsiveMediaQueries) { | |
| 1821 | + const elementStylesByName = { ...styleNode?.elements ?? {} }; | |
| 1822 | + Object.keys(responsiveMediaQueries).forEach((breakpointKey) => { | |
| 1823 | + Object.entries(styleNode?.[breakpointKey]?.elements ?? {}).forEach( | |
| 1824 | + ([elementName, styles]) => { | |
| 1825 | + elementStylesByName[elementName] = { | |
| 1826 | + ...elementStylesByName[elementName] ?? {}, | |
| 1827 | + [breakpointKey]: styles | |
| 1828 | + }; | |
| 1829 | + } | |
| 1830 | + ); | |
| 1831 | + }); | |
| 1832 | + return elementStylesByName; | |
| 1833 | +} | |
| 1698 | 1834 | var getNodesWithStyles = (tree, blockSelectors) => { |
| 1699 | 1835 | const nodes = []; |
| 1700 | 1836 | if (!tree?.styles) { |
| 1701 | 1837 | return nodes; |
| 1702 | 1838 | } |
| 1703 | - const styles = pickStyleKeys(tree.styles); | |
| 1839 | + const responsiveMediaQueries = getResponsiveMediaQueries(tree); | |
| 1840 | + const styles = pickStyleKeys(tree.styles, responsiveMediaQueries); | |
| 1704 | 1841 | if (styles) { |
| 1705 | 1842 | nodes.push({ |
| 1706 | 1843 | styles, |
| 1707 | 1844 | selector: ROOT_BLOCK_SELECTOR, |
| @@ -1723,9 +1860,13 @@ | ||
| 1723 | 1860 | } |
| 1724 | 1861 | }); |
| 1725 | 1862 | Object.entries(tree.styles?.blocks ?? {}).forEach( |
| 1726 | 1863 | ([blockName, node]) => { |
| 1727 | - const blockStyles = pickStyleAndPseudoKeys(node, blockName); | |
| 1864 | + const blockStyles = pickStyleAndPseudoKeys( | |
| 1865 | + node, | |
| 1866 | + blockName, | |
| 1867 | + responsiveMediaQueries | |
| 1868 | + ); | |
| 1728 | 1869 | const typedNode = node; |
| 1729 | 1870 | const variationNodesToAdd = []; |
| 1730 | 1871 | const variationStyleNodesToAdd = []; |
| 1731 | 1872 | if (typedNode?.variations) { |
| @@ -1733,9 +1874,10 @@ | ||
| 1733 | 1874 | ([variationName, variation]) => { |
| 1734 | 1875 | const typedVariation = variation; |
| 1735 | 1876 | const variationStyles = pickStyleAndPseudoKeys( |
| 1736 | 1877 | typedVariation, |
| 1737 | - blockName | |
| 1878 | + blockName, | |
| 1879 | + responsiveMediaQueries | |
| 1738 | 1880 | ); |
| 1739 | 1881 | if (typedVariation?.css) { |
| 1740 | 1882 | variationStyles.css = typedVariation.css; |
| 1741 | 1883 | } |
| @@ -1755,9 +1897,12 @@ | ||
| 1755 | 1897 | name: blockName |
| 1756 | 1898 | }); |
| 1757 | 1899 | } |
| 1758 | 1900 | Object.entries( |
| 1759 | - typedVariation?.elements ?? {} | |
| 1901 | + getElementStylesByName( | |
| 1902 | + typedVariation, | |
| 1903 | + responsiveMediaQueries | |
| 1904 | + ) | |
| 1760 | 1905 | ).forEach(([element, elementStyles]) => { |
| 1761 | 1906 | if (elementStyles && import_blocks.__EXPERIMENTAL_ELEMENTS[element]) { |
| 1762 | 1907 | variationNodesToAdd.push({ |
| 1763 | 1908 | styles: elementStyles, |
| @@ -1788,9 +1933,10 @@ | ||
| 1788 | 1933 | blockSelectors[variationBlockName]?.featureSelectors ?? {} |
| 1789 | 1934 | ) : void 0; |
| 1790 | 1935 | const variationBlockStyleNodes = pickStyleAndPseudoKeys( |
| 1791 | 1936 | variationBlockStyles, |
| 1792 | - variationBlockName | |
| 1937 | + variationBlockName, | |
| 1938 | + responsiveMediaQueries | |
| 1793 | 1939 | ); |
| 1794 | 1940 | if (variationBlockStyles?.css) { |
| 1795 | 1941 | variationBlockStyleNodes.css = variationBlockStyles.css; |
| 1796 | 1942 | } |
| @@ -1807,9 +1953,12 @@ | ||
| 1807 | 1953 | hasLayoutSupport: blockSelectors[variationBlockName]?.hasLayoutSupport, |
| 1808 | 1954 | styles: variationBlockStyleNodes |
| 1809 | 1955 | }); |
| 1810 | 1956 | Object.entries( |
| 1811 | - variationBlockStyles.elements ?? {} | |
| 1957 | + getElementStylesByName( | |
| 1958 | + variationBlockStyles, | |
| 1959 | + responsiveMediaQueries | |
| 1960 | + ) | |
| 1812 | 1961 | ).forEach( |
| 1813 | 1962 | ([ |
| 1814 | 1963 | variationBlockElement, |
| 1815 | 1964 | variationBlockElementStyles |
| @@ -1843,24 +1992,24 @@ | ||
| 1843 | 1992 | name: blockName |
| 1844 | 1993 | }); |
| 1845 | 1994 | } |
| 1846 | 1995 | nodes.push(...variationStyleNodesToAdd); |
| 1847 | - Object.entries(typedNode?.elements ?? {}).forEach( | |
| 1848 | - ([elementName, value]) => { | |
| 1849 | - if (typeof blockSelectors !== "string" && value && blockSelectors?.[blockName] && import_blocks.__EXPERIMENTAL_ELEMENTS[elementName]) { | |
| 1850 | - nodes.push({ | |
| 1851 | - styles: value, | |
| 1852 | - selector: blockSelectors[blockName]?.selector.split(",").map((sel) => { | |
| 1853 | - const elementSelectors = import_blocks.__EXPERIMENTAL_ELEMENTS[elementName].split(","); | |
| 1854 | - return elementSelectors.map( | |
| 1855 | - (elementSelector) => sel + " " + elementSelector | |
| 1856 | - ); | |
| 1857 | - }).join(","), | |
| 1858 | - elementName | |
| 1859 | - }); | |
| 1860 | - } | |
| 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 | + }); | |
| 1861 | 2010 | } |
| 1862 | - ); | |
| 2011 | + }); | |
| 1863 | 2012 | nodes.push(...variationNodesToAdd); |
| 1864 | 2013 | } |
| 1865 | 2014 | ); |
| 1866 | 2015 | return nodes; |
| @@ -2134,13 +2283,17 @@ | ||
| 2134 | 2283 | } |
| 2135 | 2284 | ruleset += "}"; |
| 2136 | 2285 | } |
| 2137 | 2286 | if (options.blockStyles) { |
| 2287 | + const responsiveMediaQueries = getResponsiveMediaQueries(tree); | |
| 2138 | 2288 | nodesWithStyles.forEach((node) => { |
| 2139 | 2289 | if (node.isStyleVariation && !options.variationStyles) { |
| 2140 | 2290 | return; |
| 2141 | 2291 | } |
| 2142 | - const responsiveNodes = getResponsiveStyleNodes(node); | |
| 2292 | + const responsiveNodes = getResponsiveStyleNodes( | |
| 2293 | + node, | |
| 2294 | + responsiveMediaQueries | |
| 2295 | + ); | |
| 2143 | 2296 | [ |
| 2144 | 2297 | node, |
| 2145 | 2298 | ...responsiveNodes, |
| 2146 | 2299 | ...getPseudoStyleNodes(node), |
| @@ -2225,12 +2378,10 @@ | ||
| 2225 | 2378 | duotoneSelector = scopeSelector(rootSelector, duotoneSupport); |
| 2226 | 2379 | } |
| 2227 | 2380 | } |
| 2228 | 2381 | const hasLayoutSupport = !!blockType?.supports?.layout || !!blockType?.supports?.__experimentalLayout; |
| 2229 | - const fallbackGapValue = ( | |
| 2230 | - // @ts-expect-error | |
| 2231 | - blockType?.supports?.spacing?.blockGap?.__experimentalDefault | |
| 2232 | - ); | |
| 2382 | + const blockGapSupport = blockType?.supports?.spacing?.blockGap; | |
| 2383 | + const fallbackGapValue = typeof blockGapSupport === "object" && !Array.isArray(blockGapSupport) ? blockGapSupport.__experimentalDefault : void 0; | |
| 2233 | 2384 | const blockStyleVariations = getBlockStyles(name); |
| 2234 | 2385 | const styleVariationSelectors = {}; |
| 2235 | 2386 | blockStyleVariations?.forEach((variation) => { |
| 2236 | 2387 | const variationSuffix = variationInstanceId ? `-${variationInstanceId}` : ""; |
| @@ -2320,9 +2471,9 @@ | ||
| 2320 | 2471 | styleOptions = {} |
| 2321 | 2472 | } = options; |
| 2322 | 2473 | const blocks = blockTypes.length > 0 ? blockTypes : (0, import_blocks.getBlockTypes)(); |
| 2323 | 2474 | const blockGap = getSetting(config, "spacing.blockGap"); |
| 2324 | - const hasBlockGapSupport = hasBlockGapSupportOption ?? blockGap !== null; | |
| 2475 | + const hasBlockGapSupport = hasBlockGapSupportOption ?? (blockGap !== null && blockGap !== void 0); | |
| 2325 | 2476 | const hasFallbackGapSupport = hasFallbackGapSupportOption ?? !hasBlockGapSupport; |
| 2326 | 2477 | if (!config?.styles || !config?.settings) { |
| 2327 | 2478 | return [[], {}]; |
| 2328 | 2479 | } |
| @@ -2384,8 +2535,9 @@ | ||
| 2384 | 2535 | } |
| 2385 | 2536 | |
| 2386 | 2537 | // packages/lazy-editor/build-module/hooks/use-editor-settings.mjs |
| 2387 | 2538 | var import_core_data3 = __toESM(require_core_data(), 1); |
| 2539 | +var import_blocks2 = __toESM(require_blocks(), 1); | |
| 2388 | 2540 | var import_element2 = __toESM(require_element(), 1); |
| 2389 | 2541 | var import_data4 = __toESM(require_data(), 1); |
| 2390 | 2542 | |
| 2391 | 2543 | // packages/lazy-editor/build-module/hooks/use-global-styles.mjs |
| @@ -2394,8 +2546,11 @@ | ||
| 2394 | 2546 | var import_element = __toESM(require_element(), 1); |
| 2395 | 2547 | function useUserGlobalStyles(id) { |
| 2396 | 2548 | const { userGlobalStyles } = (0, import_data3.useSelect)( |
| 2397 | 2549 | (select2) => { |
| 2550 | + if (id === void 0) { | |
| 2551 | + return { userGlobalStyles: void 0 }; | |
| 2552 | + } | |
| 2398 | 2553 | const { getEntityRecord, getEditedEntityRecord, canUser } = select2(import_core_data2.store); |
| 2399 | 2554 | const userCanEditGlobalStyles = canUser("update", { |
| 2400 | 2555 | kind: "root", |
| 2401 | 2556 | name: "globalStyles", |
| @@ -2448,19 +2603,25 @@ | ||
| 2448 | 2603 | "@wordpress/lazy-editor" |
| 2449 | 2604 | ); |
| 2450 | 2605 | |
| 2451 | 2606 | // packages/lazy-editor/build-module/hooks/use-editor-settings.mjs |
| 2452 | -function useEditorSettings({ stylesId }) { | |
| 2453 | - const { editorSettings } = (0, import_data4.useSelect)( | |
| 2607 | +function useEditorSettings({ | |
| 2608 | + stylesId | |
| 2609 | +}) { | |
| 2610 | + const { editorSettings, blockTypes } = (0, import_data4.useSelect)( | |
| 2454 | 2611 | (select2) => ({ |
| 2455 | 2612 | editorSettings: unlock( |
| 2456 | 2613 | select2(import_core_data3.store) |
| 2457 | - ).getEditorSettings() | |
| 2614 | + ).getEditorSettings(), | |
| 2615 | + blockTypes: select2(import_blocks2.store).getBlockTypes() | |
| 2458 | 2616 | }), |
| 2459 | 2617 | [] |
| 2460 | 2618 | ); |
| 2461 | 2619 | const { user: globalStyles } = useUserGlobalStyles(stylesId); |
| 2462 | - const [globalStylesCSS] = generateGlobalStyles(globalStyles); | |
| 2620 | + const [globalStylesCSS] = (0, import_element2.useMemo)( | |
| 2621 | + () => generateGlobalStyles(globalStyles, blockTypes), | |
| 2622 | + [globalStyles, blockTypes] | |
| 2623 | + ); | |
| 2463 | 2624 | const hasEditorSettings = !!editorSettings; |
| 2464 | 2625 | const styles = (0, import_element2.useMemo)(() => { |
| 2465 | 2626 | if (!hasEditorSettings) { |
| 2466 | 2627 | return []; |
| @@ -2742,14 +2903,23 @@ | ||
| 2742 | 2903 | } |
| 2743 | 2904 | |
| 2744 | 2905 | // packages/lazy-editor/build-module/components/editor/index.mjs |
| 2745 | 2906 | var import_jsx_runtime = __toESM(require_jsx_runtime(), 1); |
| 2746 | -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); | |
| 2747 | 2914 | function Editor({ |
| 2748 | 2915 | postType, |
| 2749 | 2916 | postId, |
| 2750 | 2917 | settings, |
| 2751 | - backButton | |
| 2918 | + backButton, | |
| 2919 | + onActionPerformed, | |
| 2920 | + initialViewport, | |
| 2921 | + renderingMode | |
| 2752 | 2922 | }) { |
| 2753 | 2923 | const homePage = (0, import_data6.useSelect)( |
| 2754 | 2924 | (select2) => { |
| 2755 | 2925 | if (postType || postId) { |
| @@ -2784,9 +2954,19 @@ | ||
| 2784 | 2954 | const { isReady: assetsReady } = useEditorAssets(); |
| 2785 | 2955 | const finalSettings = (0, import_element4.useMemo)( |
| 2786 | 2956 | () => ({ |
| 2787 | 2957 | ...editorSettings, |
| 2788 | - ...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 | + ] | |
| 2789 | 2969 | }), |
| 2790 | 2970 | [editorSettings, settings] |
| 2791 | 2971 | ); |
| 2792 | 2972 | if (!settingsReady || !assetsReady) { |
| @@ -2802,9 +2982,9 @@ | ||
| 2802 | 2982 | children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {}) |
| 2803 | 2983 | } |
| 2804 | 2984 | ); |
| 2805 | 2985 | } |
| 2806 | - return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | |
| 2986 | + return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)( | |
| 2807 | 2987 | PrivateEditor, |
| 2808 | 2988 | { |
| 2809 | 2989 | postType: resolvedPostType, |
| 2810 | 2990 | postId: resolvedPostId, |
| @@ -2810,9 +2990,16 @@ | ||
| 2810 | 2990 | postId: resolvedPostId, |
| 2811 | 2991 | templateId, |
| 2812 | 2992 | settings: finalSettings, |
| 2813 | 2993 | styles: finalSettings.styles, |
| 2814 | - 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 | + ] | |
| 2815 | 3002 | } |
| 2816 | 3003 | ); |
| 2817 | 3004 | } |
| 2818 | 3005 | |
| @@ -2820,11 +3007,11 @@ | ||
| 2820 | 3007 | var import_i18n = __toESM(require_i18n(), 1); |
| 2821 | 3008 | var import_element5 = __toESM(require_element(), 1); |
| 2822 | 3009 | var import_block_editor = __toESM(require_block_editor(), 1); |
| 2823 | 3010 | var import_editor2 = __toESM(require_editor(), 1); |
| 2824 | -var import_blocks2 = __toESM(require_blocks(), 1); | |
| 3011 | +var import_blocks3 = __toESM(require_blocks(), 1); | |
| 2825 | 3012 | var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1); |
| 2826 | -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']")) { | |
| 2827 | 3014 | const style = document.createElement("style"); |
| 2828 | 3015 | style.setAttribute("data-wp-hash", "95327475c1"); |
| 2829 | 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}")); |
| 2830 | 3017 | document.head.appendChild(style); |
| @@ -2837,9 +3024,9 @@ | ||
| 2837 | 3024 | }) { |
| 2838 | 3025 | const descriptionId = (0, import_element5.useId)(); |
| 2839 | 3026 | const backgroundColor = useStyle("color.background"); |
| 2840 | 3027 | const actualBlocks = (0, import_element5.useMemo)(() => { |
| 2841 | - return blocks ?? (0, import_blocks2.parse)(content, { | |
| 3028 | + return blocks ?? (0, import_blocks3.parse)(content, { | |
| 2842 | 3029 | __unstableSkipMigrationLogs: true |
| 2843 | 3030 | }); |
| 2844 | 3031 | }, [content, blocks]); |
| 2845 | 3032 | const isEmpty = !actualBlocks?.length; |
