| [ Index ] |
PHP Cross Reference of WordPress Trunk (Updated Daily) |
[Summary view] [Print] [Text view]
1 var __create = Object.create; 2 var __defProp = Object.defineProperty; 3 var __getOwnPropDesc = Object.getOwnPropertyDescriptor; 4 var __getOwnPropNames = Object.getOwnPropertyNames; 5 var __getProtoOf = Object.getPrototypeOf; 6 var __hasOwnProp = Object.prototype.hasOwnProperty; 7 var __commonJS = (cb, mod) => function __require() { 8 return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports; 9 }; 10 var __copyProps = (to, from, except, desc) => { 11 if (from && typeof from === "object" || typeof from === "function") { 12 for (let key of __getOwnPropNames(from)) 13 if (!__hasOwnProp.call(to, key) && key !== except) 14 __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); 15 } 16 return to; 17 }; 18 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( 19 // If the importer is in node compatibility mode or this is not an ESM 20 // file that has been converted to a CommonJS file using a Babel- 21 // compatible transform (i.e. "__esModule" has not been set), then set 22 // "default" to the CommonJS "module.exports" for node compatibility. 23 isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, 24 mod 25 )); 26 27 // package-external:@wordpress/editor 28 var require_editor = __commonJS({ 29 "package-external:@wordpress/editor"(exports, module) { 30 module.exports = window.wp.editor; 31 } 32 }); 33 34 // package-external:@wordpress/core-data 35 var require_core_data = __commonJS({ 36 "package-external:@wordpress/core-data"(exports, module) { 37 module.exports = window.wp.coreData; 38 } 39 }); 40 41 // package-external:@wordpress/data 42 var require_data = __commonJS({ 43 "package-external:@wordpress/data"(exports, module) { 44 module.exports = window.wp.data; 45 } 46 }); 47 48 // package-external:@wordpress/components 49 var require_components = __commonJS({ 50 "package-external:@wordpress/components"(exports, module) { 51 module.exports = window.wp.components; 52 } 53 }); 54 55 // package-external:@wordpress/element 56 var require_element = __commonJS({ 57 "package-external:@wordpress/element"(exports, module) { 58 module.exports = window.wp.element; 59 } 60 }); 61 62 // package-external:@wordpress/style-engine 63 var require_style_engine = __commonJS({ 64 "package-external:@wordpress/style-engine"(exports, module) { 65 module.exports = window.wp.styleEngine; 66 } 67 }); 68 69 // package-external:@wordpress/i18n 70 var require_i18n = __commonJS({ 71 "package-external:@wordpress/i18n"(exports, module) { 72 module.exports = window.wp.i18n; 73 } 74 }); 75 76 // package-external:@wordpress/blocks 77 var require_blocks = __commonJS({ 78 "package-external:@wordpress/blocks"(exports, module) { 79 module.exports = window.wp.blocks; 80 } 81 }); 82 83 // package-external:@wordpress/private-apis 84 var require_private_apis = __commonJS({ 85 "package-external:@wordpress/private-apis"(exports, module) { 86 module.exports = window.wp.privateApis; 87 } 88 }); 89 90 // vendor-external:react/jsx-runtime 91 var require_jsx_runtime = __commonJS({ 92 "vendor-external:react/jsx-runtime"(exports, module) { 93 module.exports = window.ReactJSXRuntime; 94 } 95 }); 96 97 // package-external:@wordpress/block-editor 98 var require_block_editor = __commonJS({ 99 "package-external:@wordpress/block-editor"(exports, module) { 100 module.exports = window.wp.blockEditor; 101 } 102 }); 103 104 // packages/lazy-editor/build-module/components/editor/index.mjs 105 var import_editor = __toESM(require_editor(), 1); 106 var import_core_data5 = __toESM(require_core_data(), 1); 107 var import_data6 = __toESM(require_data(), 1); 108 var import_components = __toESM(require_components(), 1); 109 var import_element4 = __toESM(require_element(), 1); 110 111 // packages/lazy-editor/build-module/hooks/use-styles-id.mjs 112 var import_core_data = __toESM(require_core_data(), 1); 113 var import_data = __toESM(require_data(), 1); 114 function useStylesId({ templateId } = {}) { 115 const { globalStylesId, stylesId } = (0, import_data.useSelect)( 116 (select2) => { 117 const coreDataSelect = select2(import_core_data.store); 118 const template = templateId ? coreDataSelect.getEntityRecord( 119 "postType", 120 "wp_template", 121 templateId 122 ) : null; 123 return { 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 */ 131 stylesId: template?.styles_id 132 }; 133 }, 134 [templateId] 135 ); 136 return stylesId || globalStylesId; 137 } 138 139 // packages/global-styles-engine/build-module/utils/object.mjs 140 function setImmutably(object, path, value) { 141 path = Array.isArray(path) ? [...path] : [path]; 142 object = Array.isArray(object) ? [...object] : { ...object }; 143 const leaf = path.pop(); 144 let prev = object; 145 for (const key of path) { 146 const lvl = prev[key]; 147 prev = prev[key] = Array.isArray(lvl) ? [...lvl] : { ...lvl }; 148 } 149 prev[leaf] = value; 150 return object; 151 } 152 var getValueFromObjectPath = (object, path, defaultValue) => { 153 const arrayPath = Array.isArray(path) ? path : path.split("."); 154 let value = object; 155 arrayPath.forEach((fieldName) => { 156 value = value?.[fieldName]; 157 }); 158 return value ?? defaultValue; 159 }; 160 161 // packages/global-styles-engine/build-module/settings/get-setting.mjs 162 var VALID_SETTINGS = [ 163 "appearanceTools", 164 "useRootPaddingAwareAlignments", 165 "background.backgroundImage", 166 "background.backgroundRepeat", 167 "background.backgroundSize", 168 "background.backgroundPosition", 169 "background.gradient", 170 "border.color", 171 "border.radius", 172 "border.radiusSizes", 173 "border.style", 174 "border.width", 175 "shadow.presets", 176 "shadow.defaultPresets", 177 "color.background", 178 "color.button", 179 "color.caption", 180 "color.custom", 181 "color.customDuotone", 182 "color.customGradient", 183 "color.defaultDuotone", 184 "color.defaultGradients", 185 "color.defaultPalette", 186 "color.duotone", 187 "color.gradients", 188 "color.heading", 189 "color.link", 190 "color.palette", 191 "color.text", 192 "custom", 193 "dimensions.aspectRatio", 194 "dimensions.height", 195 "dimensions.minHeight", 196 "dimensions.minWidth", 197 "dimensions.width", 198 "dimensions.dimensionSizes", 199 "layout.contentSize", 200 "layout.definitions", 201 "layout.wideSize", 202 "lightbox.enabled", 203 "lightbox.allowEditing", 204 "position.fixed", 205 "position.sticky", 206 "spacing.customSpacingSize", 207 "spacing.defaultSpacingSizes", 208 "spacing.spacingSizes", 209 "spacing.spacingScale", 210 "spacing.blockGap", 211 "spacing.margin", 212 "spacing.padding", 213 "spacing.units", 214 "typography.fluid", 215 "typography.customFontSize", 216 "typography.defaultFontSizes", 217 "typography.dropCap", 218 "typography.fontFamilies", 219 "typography.fontSizes", 220 "typography.fontStyle", 221 "typography.fontWeight", 222 "typography.letterSpacing", 223 "typography.lineHeight", 224 "typography.textAlign", 225 "typography.textColumns", 226 "typography.textDecoration", 227 "typography.textIndent", 228 "typography.textTransform", 229 "typography.writingMode", 230 "viewport.mobile", 231 "viewport.tablet" 232 ]; 233 function getSetting(globalStyles, path, blockName) { 234 const appendedBlockPath = blockName ? ".blocks." + blockName : ""; 235 const appendedPropertyPath = path ? "." + path : ""; 236 const contextualPath = `settings$appendedBlockPath}$appendedPropertyPath}`; 237 const globalPath = `settings$appendedPropertyPath}`; 238 if (path) { 239 return getValueFromObjectPath(globalStyles, contextualPath) ?? getValueFromObjectPath(globalStyles, globalPath); 240 } 241 let result = {}; 242 VALID_SETTINGS.forEach((setting) => { 243 const value = getValueFromObjectPath( 244 globalStyles, 245 `settings$appendedBlockPath}.$setting}` 246 ) ?? getValueFromObjectPath(globalStyles, `settings.$setting}`); 247 if (value !== void 0) { 248 result = setImmutably(result, setting.split("."), value); 249 } 250 }); 251 return result; 252 } 253 254 // packages/global-styles-engine/build-module/utils/common.mjs 255 var import_style_engine = __toESM(require_style_engine(), 1); 256 257 // packages/global-styles-engine/build-module/utils/fluid.mjs 258 var DEFAULT_MAXIMUM_VIEWPORT_WIDTH = "1600px"; 259 var DEFAULT_MINIMUM_VIEWPORT_WIDTH = "320px"; 260 var DEFAULT_SCALE_FACTOR = 1; 261 var DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MIN = 0.25; 262 var DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MAX = 0.75; 263 var DEFAULT_MINIMUM_FONT_SIZE_LIMIT = "14px"; 264 function getComputedFluidTypographyValue({ 265 minimumFontSize, 266 maximumFontSize, 267 fontSize, 268 minimumViewportWidth = DEFAULT_MINIMUM_VIEWPORT_WIDTH, 269 maximumViewportWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH, 270 scaleFactor = DEFAULT_SCALE_FACTOR, 271 minimumFontSizeLimit 272 }) { 273 minimumFontSizeLimit = !!getTypographyValueAndUnit(minimumFontSizeLimit) ? minimumFontSizeLimit : DEFAULT_MINIMUM_FONT_SIZE_LIMIT; 274 if (fontSize) { 275 const fontSizeParsed = getTypographyValueAndUnit(fontSize); 276 if (!fontSizeParsed?.unit || !fontSizeParsed?.value) { 277 return null; 278 } 279 const minimumFontSizeLimitParsed = getTypographyValueAndUnit( 280 minimumFontSizeLimit, 281 { 282 coerceTo: fontSizeParsed.unit 283 } 284 ); 285 if (!!minimumFontSizeLimitParsed?.value && !minimumFontSize && !maximumFontSize) { 286 if (fontSizeParsed?.value <= minimumFontSizeLimitParsed?.value) { 287 return null; 288 } 289 } 290 if (!maximumFontSize) { 291 maximumFontSize = `$fontSizeParsed.value}$fontSizeParsed.unit}`; 292 } 293 if (!minimumFontSize) { 294 const fontSizeValueInPx = fontSizeParsed.unit === "px" ? fontSizeParsed.value : fontSizeParsed.value * 16; 295 const minimumFontSizeFactor = Math.min( 296 Math.max( 297 1 - 0.075 * Math.log2(fontSizeValueInPx), 298 DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MIN 299 ), 300 DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MAX 301 ); 302 const calculatedMinimumFontSize = roundToPrecision( 303 fontSizeParsed.value * minimumFontSizeFactor, 304 3 305 ); 306 if (!!minimumFontSizeLimitParsed?.value && calculatedMinimumFontSize < minimumFontSizeLimitParsed?.value) { 307 minimumFontSize = `$minimumFontSizeLimitParsed.value}$minimumFontSizeLimitParsed.unit}`; 308 } else { 309 minimumFontSize = `$calculatedMinimumFontSize}$fontSizeParsed.unit}`; 310 } 311 } 312 } 313 const minimumFontSizeParsed = getTypographyValueAndUnit(minimumFontSize); 314 const fontSizeUnit = minimumFontSizeParsed?.unit || "rem"; 315 const maximumFontSizeParsed = getTypographyValueAndUnit(maximumFontSize, { 316 coerceTo: fontSizeUnit 317 }); 318 if (!minimumFontSizeParsed || !maximumFontSizeParsed) { 319 return null; 320 } 321 const minimumFontSizeRem = getTypographyValueAndUnit(minimumFontSize, { 322 coerceTo: "rem" 323 }); 324 const maximumViewportWidthParsed = getTypographyValueAndUnit( 325 maximumViewportWidth, 326 { coerceTo: fontSizeUnit } 327 ); 328 const minimumViewportWidthParsed = getTypographyValueAndUnit( 329 minimumViewportWidth, 330 { coerceTo: fontSizeUnit } 331 ); 332 if (!maximumViewportWidthParsed || !minimumViewportWidthParsed || !minimumFontSizeRem) { 333 return null; 334 } 335 const linearDenominator = maximumViewportWidthParsed.value - minimumViewportWidthParsed.value; 336 if (!linearDenominator) { 337 return null; 338 } 339 const minViewportWidthOffsetValue = roundToPrecision( 340 minimumViewportWidthParsed.value / 100, 341 3 342 ); 343 const viewportWidthOffset = roundToPrecision(minViewportWidthOffsetValue, 3) + fontSizeUnit; 344 const linearFactor = 100 * ((maximumFontSizeParsed.value - minimumFontSizeParsed.value) / linearDenominator); 345 const linearFactorScaled = roundToPrecision( 346 (linearFactor || 1) * scaleFactor, 347 3 348 ); 349 const fluidTargetFontSize = `$minimumFontSizeRem.value}$minimumFontSizeRem.unit} + ((1vw - $viewportWidthOffset}) * $linearFactorScaled})`; 350 return `clamp($minimumFontSize}, $fluidTargetFontSize}, $maximumFontSize})`; 351 } 352 function getTypographyValueAndUnit(rawValue, options = {}) { 353 if (typeof rawValue !== "string" && typeof rawValue !== "number") { 354 return null; 355 } 356 if (isFinite(rawValue)) { 357 rawValue = `$rawValue}px`; 358 } 359 const { coerceTo, rootSizeValue, acceptableUnits } = { 360 coerceTo: "", 361 // Default browser font size. Later we could inject some JS to compute this `getComputedStyle( document.querySelector( "html" ) ).fontSize`. 362 rootSizeValue: 16, 363 acceptableUnits: ["rem", "px", "em"], 364 ...options 365 }; 366 const acceptableUnitsGroup = acceptableUnits?.join("|"); 367 const regexUnits = new RegExp( 368 `^(\\d*\\.?\\d+)($acceptableUnitsGroup}){1,1}$` 369 ); 370 const matches = rawValue.toString().match(regexUnits); 371 if (!matches || matches.length < 3) { 372 return null; 373 } 374 let [, value, unit] = matches; 375 let returnValue = parseFloat(value); 376 if ("px" === coerceTo && ("em" === unit || "rem" === unit)) { 377 returnValue = returnValue * rootSizeValue; 378 unit = coerceTo; 379 } 380 if ("px" === unit && ("em" === coerceTo || "rem" === coerceTo)) { 381 returnValue = returnValue / rootSizeValue; 382 unit = coerceTo; 383 } 384 if (("em" === coerceTo || "rem" === coerceTo) && ("em" === unit || "rem" === unit)) { 385 unit = coerceTo; 386 } 387 if (!unit) { 388 return null; 389 } 390 return { 391 value: roundToPrecision(returnValue, 3), 392 unit 393 }; 394 } 395 function roundToPrecision(value, digits = 3) { 396 const base = Math.pow(10, digits); 397 return Math.round(value * base) / base; 398 } 399 400 // packages/global-styles-engine/build-module/utils/typography.mjs 401 function isFluidTypographyEnabled(typographySettings) { 402 const fluidSettings = typographySettings?.fluid; 403 return true === fluidSettings || fluidSettings && typeof fluidSettings === "object" && Object.keys(fluidSettings).length > 0; 404 } 405 function getFluidTypographyOptionsFromSettings(settings) { 406 const typographySettings = settings?.typography ?? {}; 407 const layoutSettings = settings?.layout; 408 const defaultMaxViewportWidth = getTypographyValueAndUnit( 409 layoutSettings?.wideSize 410 ) ? layoutSettings?.wideSize : null; 411 return isFluidTypographyEnabled(typographySettings) && defaultMaxViewportWidth ? { 412 fluid: { 413 maxViewportWidth: defaultMaxViewportWidth, 414 ...typeof typographySettings.fluid === "object" ? typographySettings.fluid : {} 415 } 416 } : { 417 fluid: typographySettings?.fluid 418 }; 419 } 420 function getTypographyFontSizeValue(preset, settings) { 421 const { size: defaultSize } = preset; 422 if (!defaultSize || "0" === defaultSize || false === preset?.fluid) { 423 return defaultSize; 424 } 425 if (!isFluidTypographyEnabled(settings?.typography) && !isFluidTypographyEnabled(preset)) { 426 return defaultSize; 427 } 428 const fluidTypographySettings = getFluidTypographyOptionsFromSettings(settings)?.fluid ?? {}; 429 const fluidFontSizeValue = getComputedFluidTypographyValue({ 430 minimumFontSize: typeof preset?.fluid === "boolean" ? void 0 : preset?.fluid?.min, 431 maximumFontSize: typeof preset?.fluid === "boolean" ? void 0 : preset?.fluid?.max, 432 fontSize: defaultSize, 433 minimumFontSizeLimit: typeof fluidTypographySettings === "object" ? fluidTypographySettings?.minFontSize : void 0, 434 maximumViewportWidth: typeof fluidTypographySettings === "object" ? fluidTypographySettings?.maxViewportWidth : void 0, 435 minimumViewportWidth: typeof fluidTypographySettings === "object" ? fluidTypographySettings?.minViewportWidth : void 0 436 }); 437 if (!!fluidFontSizeValue) { 438 return fluidFontSizeValue; 439 } 440 return defaultSize; 441 } 442 443 // packages/global-styles-engine/build-module/utils/common.mjs 444 var ROOT_BLOCK_SELECTOR = "body"; 445 var ROOT_CSS_PROPERTIES_SELECTOR = ":root"; 446 function splitSelectorList(selector) { 447 if (!selector.includes(",")) { 448 return [selector]; 449 } 450 const selectors = []; 451 let currentSelector = ""; 452 let parenthesesDepth = 0; 453 for (const char of selector) { 454 if (char === "(") { 455 parenthesesDepth++; 456 } else if (char === ")" && parenthesesDepth > 0) { 457 parenthesesDepth--; 458 } else if (char === "," && parenthesesDepth === 0) { 459 selectors.push(currentSelector); 460 currentSelector = ""; 461 continue; 462 } 463 currentSelector += char; 464 } 465 selectors.push(currentSelector); 466 return selectors; 467 } 468 var PRESET_METADATA = [ 469 { 470 path: ["color", "palette"], 471 valueKey: "color", 472 cssVarInfix: "color", 473 classes: [ 474 { classSuffix: "color", propertyName: "color" }, 475 { 476 classSuffix: "background-color", 477 propertyName: "background-color" 478 }, 479 { 480 classSuffix: "border-color", 481 propertyName: "border-color" 482 } 483 ] 484 }, 485 { 486 path: ["color", "gradients"], 487 valueKey: "gradient", 488 cssVarInfix: "gradient", 489 classes: [ 490 { 491 classSuffix: "gradient-background", 492 propertyName: "background" 493 } 494 ] 495 }, 496 { 497 path: ["color", "duotone"], 498 valueKey: "colors", 499 cssVarInfix: "duotone", 500 valueFunc: ({ slug }) => `url( '#wp-duotone-$slug}' )`, 501 classes: [] 502 }, 503 { 504 path: ["shadow", "presets"], 505 valueKey: "shadow", 506 cssVarInfix: "shadow", 507 classes: [] 508 }, 509 { 510 path: ["typography", "fontSizes"], 511 valueFunc: (preset, settings) => getTypographyFontSizeValue(preset, settings), 512 valueKey: "size", 513 cssVarInfix: "font-size", 514 classes: [{ classSuffix: "font-size", propertyName: "font-size" }] 515 }, 516 { 517 path: ["typography", "fontFamilies"], 518 valueKey: "fontFamily", 519 cssVarInfix: "font-family", 520 classes: [ 521 { classSuffix: "font-family", propertyName: "font-family" } 522 ] 523 }, 524 { 525 path: ["spacing", "spacingSizes"], 526 valueKey: "size", 527 cssVarInfix: "spacing", 528 valueFunc: ({ size }) => size, 529 classes: [] 530 }, 531 { 532 path: ["border", "radiusSizes"], 533 valueKey: "size", 534 cssVarInfix: "border-radius", 535 classes: [] 536 }, 537 { 538 path: ["dimensions", "dimensionSizes"], 539 valueKey: "size", 540 cssVarInfix: "dimension", 541 classes: [] 542 } 543 ]; 544 function scopeSelector(scope, selector) { 545 if (!scope || !selector) { 546 return selector; 547 } 548 const scopes = splitSelectorList(scope); 549 const selectors = splitSelectorList(selector); 550 const selectorsScoped = []; 551 scopes.forEach((outer) => { 552 selectors.forEach((inner) => { 553 selectorsScoped.push(`$outer.trim()} $inner.trim()}`); 554 }); 555 }); 556 return selectorsScoped.join(", "); 557 } 558 function scopeFeatureSelectors(scope, selectors) { 559 if (!scope || !selectors) { 560 return; 561 } 562 const featureSelectors = {}; 563 Object.entries(selectors).forEach(([feature, selector]) => { 564 if (typeof selector === "string") { 565 featureSelectors[feature] = scopeSelector(scope, selector); 566 } 567 if (typeof selector === "object") { 568 featureSelectors[feature] = {}; 569 Object.entries(selector).forEach( 570 ([subfeature, subfeatureSelector]) => { 571 featureSelectors[feature][subfeature] = scopeSelector( 572 scope, 573 subfeatureSelector 574 ); 575 } 576 ); 577 } 578 }); 579 return featureSelectors; 580 } 581 function appendToSelector(selector, toAppend) { 582 if (!selector.includes(",")) { 583 return selector + toAppend; 584 } 585 const selectors = splitSelectorList(selector); 586 const newSelectors = selectors.map((sel) => sel + toAppend); 587 return newSelectors.join(","); 588 } 589 function getBlockStyleVariationSelector(variation, blockSelector) { 590 const variationClass = `.is-style-$variation}`; 591 if (!blockSelector) { 592 return variationClass; 593 } 594 const ancestorRegex = /[^\s:]+/; 595 const addVariationClass = (match) => match + variationClass; 596 const result = splitSelectorList(blockSelector).map( 597 (part) => part.replace(ancestorRegex, addVariationClass) 598 ); 599 return result.join(","); 600 } 601 function getBlockStyleVariationFeatureSelector(variation, featureSelector) { 602 const variationClass = `.is-style-$variation}`; 603 const selectorParts = splitSelectorList(featureSelector).map( 604 (selector) => { 605 const trimmedSelector = selector.trim(); 606 const prefix = `$variationClass} `; 607 if (trimmedSelector.startsWith(prefix)) { 608 return trimmedSelector.slice(prefix.length); 609 } 610 return trimmedSelector; 611 } 612 ); 613 return getBlockStyleVariationSelector( 614 variation, 615 selectorParts.join(",") 616 ); 617 } 618 function getResolvedRefValue(ruleValue, tree) { 619 if (!ruleValue || !tree) { 620 return ruleValue; 621 } 622 if (typeof ruleValue === "object" && "ref" in ruleValue && ruleValue?.ref) { 623 const resolvedRuleValue = (0, import_style_engine.getCSSValueFromRawStyle)( 624 getValueFromObjectPath(tree, ruleValue.ref) 625 ); 626 if (typeof resolvedRuleValue === "object" && resolvedRuleValue !== null && "ref" in resolvedRuleValue && resolvedRuleValue?.ref) { 627 return void 0; 628 } 629 if (resolvedRuleValue === void 0) { 630 return ruleValue; 631 } 632 return resolvedRuleValue; 633 } 634 return ruleValue; 635 } 636 function getResolvedThemeFilePath(file, themeFileURIs) { 637 if (!file || !themeFileURIs || !Array.isArray(themeFileURIs)) { 638 return file; 639 } 640 const uri = themeFileURIs.find( 641 (themeFileUri) => themeFileUri?.name === file 642 ); 643 if (!uri?.href) { 644 return file; 645 } 646 return uri?.href; 647 } 648 function getResolvedValue(ruleValue, tree) { 649 if (!ruleValue || !tree) { 650 return ruleValue; 651 } 652 const resolvedValue = getResolvedRefValue(ruleValue, tree); 653 if (typeof resolvedValue === "object" && resolvedValue !== null && "url" in resolvedValue && resolvedValue?.url) { 654 return { 655 ...resolvedValue, 656 url: getResolvedThemeFilePath( 657 resolvedValue.url, 658 tree?._links?.["wp:theme-file"] 659 ) 660 }; 661 } 662 return resolvedValue; 663 } 664 665 // packages/global-styles-engine/build-module/style-state-back-compat.mjs 666 var LEGACY_STYLE_STATE_ALIASES = { 667 "@mobile": "mobile", 668 "@tablet": "tablet", 669 "-current": "@current" 670 }; 671 function isObjectRecord(value) { 672 return !!value && typeof value === "object" && !Array.isArray(value); 673 } 674 function normalizeStyleStateNode(node) { 675 if (!isObjectRecord(node)) { 676 return node; 677 } 678 let normalized = node; 679 Object.entries(LEGACY_STYLE_STATE_ALIASES).forEach( 680 ([state, legacyState]) => { 681 if (Object.hasOwn(node, legacyState)) { 682 if (normalized === node) { 683 normalized = { ...node }; 684 } 685 if (!Object.hasOwn(node, state)) { 686 normalized[state] = node[legacyState]; 687 } 688 delete normalized[legacyState]; 689 } 690 } 691 ); 692 Object.entries(normalized).forEach(([key, value]) => { 693 if (!isObjectRecord(value)) { 694 return; 695 } 696 const normalizedValue = normalizeStyleStateNode(value); 697 if (normalizedValue !== value) { 698 if (normalized === node) { 699 normalized = { ...node }; 700 } 701 normalized[key] = normalizedValue; 702 } 703 }); 704 return normalized; 705 } 706 function normalizeStyleStateAliases(globalStyles) { 707 if (true) { 708 return globalStyles; 709 } 710 if (!globalStyles?.styles) { 711 return globalStyles; 712 } 713 const styles = normalizeStyleStateNode(globalStyles.styles); 714 return styles === globalStyles.styles ? globalStyles : { ...globalStyles, styles }; 715 } 716 717 // packages/global-styles-engine/build-module/core/render.mjs 718 var import_blocks = __toESM(require_blocks(), 1); 719 var import_style_engine2 = __toESM(require_style_engine(), 1); 720 var import_data2 = __toESM(require_data(), 1); 721 722 // packages/global-styles-engine/build-module/core/selectors.mjs 723 function getBlockSelector(blockType, target = "root", options = {}) { 724 if (!target) { 725 return null; 726 } 727 const { fallback = false } = options; 728 const { name, selectors, supports } = blockType; 729 const hasSelectors = selectors && Object.keys(selectors).length > 0; 730 const path = Array.isArray(target) ? target.join(".") : target; 731 let rootSelector = null; 732 if (hasSelectors && selectors.root) { 733 rootSelector = selectors?.root; 734 } else if (supports?.__experimentalSelector) { 735 rootSelector = supports.__experimentalSelector; 736 } else { 737 rootSelector = ".wp-block-" + name.replace("core/", "").replace("/", "-"); 738 } 739 if (path === "root") { 740 return rootSelector; 741 } 742 const pathArray = Array.isArray(target) ? target : target.split("."); 743 if (pathArray.length === 1) { 744 const fallbackSelector = fallback ? rootSelector : null; 745 if (hasSelectors) { 746 const featureSelector2 = getValueFromObjectPath( 747 selectors, 748 `$path}.root`, 749 null 750 ) || getValueFromObjectPath(selectors, path, null); 751 return featureSelector2 || fallbackSelector; 752 } 753 const featureSelector = supports ? getValueFromObjectPath( 754 supports, 755 `$path}.__experimentalSelector`, 756 null 757 ) : void 0; 758 if (!featureSelector) { 759 return fallbackSelector; 760 } 761 return scopeSelector(rootSelector, featureSelector); 762 } 763 let subfeatureSelector; 764 if (hasSelectors) { 765 subfeatureSelector = getValueFromObjectPath(selectors, path, null); 766 } 767 if (subfeatureSelector) { 768 return subfeatureSelector; 769 } 770 if (fallback) { 771 return getBlockSelector(blockType, pathArray[0], options); 772 } 773 return null; 774 } 775 776 // node_modules/colord/index.mjs 777 var r = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) }; 778 var t = function(r2) { 779 return "string" == typeof r2 ? r2.length > 0 : "number" == typeof r2; 780 }; 781 var n = function(r2, t2, n2) { 782 return void 0 === t2 && (t2 = 0), void 0 === n2 && (n2 = Math.pow(10, t2)), Math.round(n2 * r2) / n2 + 0; 783 }; 784 var e = function(r2, t2, n2) { 785 return void 0 === t2 && (t2 = 0), void 0 === n2 && (n2 = 1), r2 > n2 ? n2 : r2 > t2 ? r2 : t2; 786 }; 787 var u = function(r2) { 788 return (r2 = isFinite(r2) ? r2 % 360 : 0) > 0 ? r2 : r2 + 360; 789 }; 790 var a = function(r2) { 791 return { r: e(r2.r, 0, 255), g: e(r2.g, 0, 255), b: e(r2.b, 0, 255), a: e(r2.a) }; 792 }; 793 var o = function(r2) { 794 return { r: n(r2.r), g: n(r2.g), b: n(r2.b), a: n(r2.a, 3) }; 795 }; 796 var i = /^#([0-9a-f]{3,8})$/i; 797 var s = function(r2) { 798 var t2 = r2.toString(16); 799 return t2.length < 2 ? "0" + t2 : t2; 800 }; 801 var h = function(r2) { 802 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; 803 return { h: 60 * (i2 < 0 ? i2 + 6 : i2), s: a2 ? o2 / a2 * 100 : 0, v: a2 / 255 * 100, a: u2 }; 804 }; 805 var b = function(r2) { 806 var t2 = r2.h, n2 = r2.s, e2 = r2.v, u2 = r2.a; 807 t2 = t2 / 360 * 6, n2 /= 100, e2 /= 100; 808 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; 809 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 }; 810 }; 811 var g = function(r2) { 812 return { h: u(r2.h), s: e(r2.s, 0, 100), l: e(r2.l, 0, 100), a: e(r2.a) }; 813 }; 814 var d = function(r2) { 815 return { h: n(r2.h), s: n(r2.s), l: n(r2.l), a: n(r2.a, 3) }; 816 }; 817 var f = function(r2) { 818 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 })); 819 var t2, n2, e2; 820 }; 821 var c = function(r2) { 822 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 }; 823 var t2, n2, e2, u2; 824 }; 825 var l = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i; 826 var p = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i; 827 var v = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i; 828 var m = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i; 829 var y = { string: [[function(r2) { 830 var t2 = i.exec(r2); 831 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; 832 }, "hex"], [function(r2) { 833 var t2 = v.exec(r2) || m.exec(r2); 834 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; 835 }, "rgb"], [function(t2) { 836 var n2 = l.exec(t2) || p.exec(t2); 837 if (!n2) return null; 838 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) }); 839 return f(a2); 840 }, "hsl"]], object: [[function(r2) { 841 var n2 = r2.r, e2 = r2.g, u2 = r2.b, o2 = r2.a, i2 = void 0 === o2 ? 1 : o2; 842 return t(n2) && t(e2) && t(u2) ? a({ r: Number(n2), g: Number(e2), b: Number(u2), a: Number(i2) }) : null; 843 }, "rgb"], [function(r2) { 844 var n2 = r2.h, e2 = r2.s, u2 = r2.l, a2 = r2.a, o2 = void 0 === a2 ? 1 : a2; 845 if (!t(n2) || !t(e2) || !t(u2)) return null; 846 var i2 = g({ h: Number(n2), s: Number(e2), l: Number(u2), a: Number(o2) }); 847 return f(i2); 848 }, "hsl"], [function(r2) { 849 var n2 = r2.h, a2 = r2.s, o2 = r2.v, i2 = r2.a, s2 = void 0 === i2 ? 1 : i2; 850 if (!t(n2) || !t(a2) || !t(o2)) return null; 851 var h2 = (function(r3) { 852 return { h: u(r3.h), s: e(r3.s, 0, 100), v: e(r3.v, 0, 100), a: e(r3.a) }; 853 })({ h: Number(n2), s: Number(a2), v: Number(o2), a: Number(s2) }); 854 return b(h2); 855 }, "hsv"]] }; 856 var N = function(r2, t2) { 857 for (var n2 = 0; n2 < t2.length; n2++) { 858 var e2 = t2[n2][0](r2); 859 if (e2) return [e2, t2[n2][1]]; 860 } 861 return [null, void 0]; 862 }; 863 var x = function(r2) { 864 return "string" == typeof r2 ? N(r2.trim(), y.string) : "object" == typeof r2 && null !== r2 ? N(r2, y.object) : [null, void 0]; 865 }; 866 var M = function(r2, t2) { 867 var n2 = c(r2); 868 return { h: n2.h, s: e(n2.s + 100 * t2, 0, 100), l: n2.l, a: n2.a }; 869 }; 870 var H = function(r2) { 871 return (299 * r2.r + 587 * r2.g + 114 * r2.b) / 1e3 / 255; 872 }; 873 var $ = function(r2, t2) { 874 var n2 = c(r2); 875 return { h: n2.h, s: n2.s, l: e(n2.l + 100 * t2, 0, 100), a: n2.a }; 876 }; 877 var j = (function() { 878 function r2(r3) { 879 this.parsed = x(r3)[0], this.rgba = this.parsed || { r: 0, g: 0, b: 0, a: 1 }; 880 } 881 return r2.prototype.isValid = function() { 882 return null !== this.parsed; 883 }, r2.prototype.brightness = function() { 884 return n(H(this.rgba), 2); 885 }, r2.prototype.isDark = function() { 886 return H(this.rgba) < 0.5; 887 }, r2.prototype.isLight = function() { 888 return H(this.rgba) >= 0.5; 889 }, r2.prototype.toHex = function() { 890 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; 891 var r3, t2, e2, u2, a2, i2; 892 }, r2.prototype.toRgb = function() { 893 return o(this.rgba); 894 }, r2.prototype.toRgbString = function() { 895 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 + ")"; 896 var r3, t2, n2, e2, u2; 897 }, r2.prototype.toHsl = function() { 898 return d(c(this.rgba)); 899 }, r2.prototype.toHslString = function() { 900 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 + "%)"; 901 var r3, t2, n2, e2, u2; 902 }, r2.prototype.toHsv = function() { 903 return r3 = h(this.rgba), { h: n(r3.h), s: n(r3.s), v: n(r3.v), a: n(r3.a, 3) }; 904 var r3; 905 }, r2.prototype.invert = function() { 906 return w({ r: 255 - (r3 = this.rgba).r, g: 255 - r3.g, b: 255 - r3.b, a: r3.a }); 907 var r3; 908 }, r2.prototype.saturate = function(r3) { 909 return void 0 === r3 && (r3 = 0.1), w(M(this.rgba, r3)); 910 }, r2.prototype.desaturate = function(r3) { 911 return void 0 === r3 && (r3 = 0.1), w(M(this.rgba, -r3)); 912 }, r2.prototype.grayscale = function() { 913 return w(M(this.rgba, -1)); 914 }, r2.prototype.lighten = function(r3) { 915 return void 0 === r3 && (r3 = 0.1), w($(this.rgba, r3)); 916 }, r2.prototype.darken = function(r3) { 917 return void 0 === r3 && (r3 = 0.1), w($(this.rgba, -r3)); 918 }, r2.prototype.rotate = function(r3) { 919 return void 0 === r3 && (r3 = 15), this.hue(this.hue() + r3); 920 }, r2.prototype.alpha = function(r3) { 921 return "number" == typeof r3 ? w({ r: (t2 = this.rgba).r, g: t2.g, b: t2.b, a: r3 }) : n(this.rgba.a, 3); 922 var t2; 923 }, r2.prototype.hue = function(r3) { 924 var t2 = c(this.rgba); 925 return "number" == typeof r3 ? w({ h: r3, s: t2.s, l: t2.l, a: t2.a }) : n(t2.h); 926 }, r2.prototype.isEqual = function(r3) { 927 return this.toHex() === w(r3).toHex(); 928 }, r2; 929 })(); 930 var w = function(r2) { 931 return r2 instanceof j ? r2 : new j(r2); 932 }; 933 934 // packages/global-styles-engine/build-module/utils/duotone.mjs 935 function getValuesFromColors(colors = []) { 936 const values = { 937 r: [], 938 g: [], 939 b: [], 940 a: [] 941 }; 942 colors.forEach((color) => { 943 const rgbColor = w(color).toRgb(); 944 values.r.push(rgbColor.r / 255); 945 values.g.push(rgbColor.g / 255); 946 values.b.push(rgbColor.b / 255); 947 values.a.push(rgbColor.a); 948 }); 949 return values; 950 } 951 function getDuotoneFilter(id, colors) { 952 const values = getValuesFromColors(colors); 953 return ` 954 <svg 955 xmlns:xlink="http://www.w3.org/1999/xlink" 956 viewBox="0 0 0 0" 957 width="0" 958 height="0" 959 focusable="false" 960 role="none" 961 aria-hidden="true" 962 style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" 963 > 964 <defs> 965 <filter id="$id}"> 966 <!-- 967 Use sRGB instead of linearRGB so transparency looks correct. 968 Use perceptual brightness to convert to grayscale. 969 --> 970 <feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 "></feColorMatrix> 971 <!-- Use sRGB instead of linearRGB to be consistent with how CSS gradients work. --> 972 <feComponentTransfer color-interpolation-filters="sRGB"> 973 <feFuncR type="table" tableValues="$values.r.join(" ")}"></feFuncR> 974 <feFuncG type="table" tableValues="$values.g.join(" ")}"></feFuncG> 975 <feFuncB type="table" tableValues="$values.b.join(" ")}"></feFuncB> 976 <feFuncA type="table" tableValues="$values.a.join(" ")}"></feFuncA> 977 </feComponentTransfer> 978 <!-- Re-mask the image with the original transparency since the feColorMatrix above loses that information. --> 979 <feComposite in2="SourceGraphic" operator="in"></feComposite> 980 </filter> 981 </defs> 982 </svg>`; 983 } 984 985 // packages/global-styles-engine/build-module/utils/string.mjs 986 function kebabCase(str) { 987 return str.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/([0-9])([a-zA-Z])/g, "$1-$2").replace(/([a-zA-Z])([0-9])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase(); 988 } 989 990 // packages/global-styles-engine/build-module/utils/spacing.mjs 991 function getSpacingPresetCssVar(value) { 992 if (!value) { 993 return; 994 } 995 const slug = value.match(/var:preset\|spacing\|(.+)/); 996 if (!slug) { 997 return value; 998 } 999 return `var(--wp--preset--spacing--$slug[1]})`; 1000 } 1001 1002 // packages/global-styles-engine/build-module/utils/gap.mjs 1003 function getGapBoxControlValueFromStyle(blockGapValue) { 1004 if (!blockGapValue) { 1005 return null; 1006 } 1007 const isValueString = typeof blockGapValue === "string"; 1008 return { 1009 top: isValueString ? blockGapValue : blockGapValue?.top, 1010 left: isValueString ? blockGapValue : blockGapValue?.left 1011 }; 1012 } 1013 function getGapCSSValue(blockGapValue, defaultValue = "0") { 1014 const blockGapBoxControlValue = getGapBoxControlValueFromStyle(blockGapValue); 1015 if (!blockGapBoxControlValue) { 1016 return null; 1017 } 1018 const row = getSpacingPresetCssVar(blockGapBoxControlValue?.top) || defaultValue; 1019 const column = getSpacingPresetCssVar(blockGapBoxControlValue?.left) || defaultValue; 1020 return row === column ? row : `$row} $column}`; 1021 } 1022 1023 // packages/global-styles-engine/build-module/utils/background.mjs 1024 var BACKGROUND_BLOCK_DEFAULT_VALUES = { 1025 backgroundSize: "cover", 1026 backgroundPosition: "50% 50%" 1027 // used only when backgroundSize is 'contain'. 1028 }; 1029 function hasImageUrl(backgroundImage) { 1030 return typeof backgroundImage === "object" && backgroundImage !== null && "url" in backgroundImage && !!backgroundImage.url; 1031 } 1032 function setBackgroundStyleDefaults(backgroundStyle) { 1033 if (!backgroundStyle || !hasImageUrl(backgroundStyle.backgroundImage)) { 1034 return; 1035 } 1036 let backgroundStylesWithDefaults; 1037 if (!backgroundStyle?.backgroundSize) { 1038 backgroundStylesWithDefaults = { 1039 backgroundSize: BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundSize 1040 }; 1041 } 1042 if ("contain" === backgroundStyle?.backgroundSize && !backgroundStyle?.backgroundPosition) { 1043 backgroundStylesWithDefaults = { 1044 backgroundPosition: BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundPosition 1045 }; 1046 } 1047 return backgroundStylesWithDefaults; 1048 } 1049 1050 // packages/global-styles-engine/build-module/utils/layout.mjs 1051 var LAYOUT_DEFINITIONS = { 1052 default: { 1053 name: "default", 1054 slug: "flow", 1055 className: "is-layout-flow", 1056 baseStyles: [ 1057 { 1058 selector: " > .alignleft", 1059 rules: { 1060 float: "left", 1061 "margin-inline-start": "0", 1062 "margin-inline-end": "2em" 1063 } 1064 }, 1065 { 1066 selector: " > .alignright", 1067 rules: { 1068 float: "right", 1069 "margin-inline-start": "2em", 1070 "margin-inline-end": "0" 1071 } 1072 }, 1073 { 1074 selector: " > .aligncenter", 1075 rules: { 1076 "margin-left": "auto !important", 1077 "margin-right": "auto !important" 1078 } 1079 } 1080 ], 1081 spacingStyles: [ 1082 { 1083 selector: " > :first-child", 1084 rules: { 1085 "margin-block-start": "0" 1086 } 1087 }, 1088 { 1089 selector: " > :last-child", 1090 rules: { 1091 "margin-block-end": "0" 1092 } 1093 }, 1094 { 1095 selector: " > *", 1096 rules: { 1097 "margin-block-start": null, 1098 "margin-block-end": "0" 1099 } 1100 } 1101 ] 1102 }, 1103 constrained: { 1104 name: "constrained", 1105 slug: "constrained", 1106 className: "is-layout-constrained", 1107 baseStyles: [ 1108 { 1109 selector: " > .alignleft", 1110 rules: { 1111 float: "left", 1112 "margin-inline-start": "0", 1113 "margin-inline-end": "2em" 1114 } 1115 }, 1116 { 1117 selector: " > .alignright", 1118 rules: { 1119 float: "right", 1120 "margin-inline-start": "2em", 1121 "margin-inline-end": "0" 1122 } 1123 }, 1124 { 1125 selector: " > .aligncenter", 1126 rules: { 1127 "margin-left": "auto !important", 1128 "margin-right": "auto !important" 1129 } 1130 }, 1131 { 1132 selector: " > :where(:not(.alignleft):not(.alignright):not(.alignfull))", 1133 rules: { 1134 "max-width": "var(--wp--style--global--content-size)", 1135 "margin-left": "auto !important", 1136 "margin-right": "auto !important" 1137 } 1138 }, 1139 { 1140 selector: " > .alignwide", 1141 rules: { 1142 "max-width": "var(--wp--style--global--wide-size)" 1143 } 1144 } 1145 ], 1146 spacingStyles: [ 1147 { 1148 selector: " > :first-child", 1149 rules: { 1150 "margin-block-start": "0" 1151 } 1152 }, 1153 { 1154 selector: " > :last-child", 1155 rules: { 1156 "margin-block-end": "0" 1157 } 1158 }, 1159 { 1160 selector: " > *", 1161 rules: { 1162 "margin-block-start": null, 1163 "margin-block-end": "0" 1164 } 1165 } 1166 ] 1167 }, 1168 flex: { 1169 name: "flex", 1170 slug: "flex", 1171 className: "is-layout-flex", 1172 displayMode: "flex", 1173 baseStyles: [ 1174 { 1175 selector: "", 1176 rules: { 1177 "flex-wrap": "wrap", 1178 "align-items": "center" 1179 } 1180 }, 1181 { 1182 selector: " > :is(*, div)", 1183 // :is(*, div) instead of just * increases the specificity by 001. 1184 rules: { 1185 margin: "0" 1186 } 1187 } 1188 ], 1189 spacingStyles: [ 1190 { 1191 selector: "", 1192 rules: { 1193 gap: null 1194 } 1195 } 1196 ] 1197 }, 1198 grid: { 1199 name: "grid", 1200 slug: "grid", 1201 className: "is-layout-grid", 1202 displayMode: "grid", 1203 baseStyles: [ 1204 { 1205 selector: " > :is(*, div)", 1206 // :is(*, div) instead of just * increases the specificity by 001. 1207 rules: { 1208 margin: "0" 1209 } 1210 } 1211 ], 1212 spacingStyles: [ 1213 { 1214 selector: "", 1215 rules: { 1216 gap: null 1217 } 1218 } 1219 ] 1220 } 1221 }; 1222 1223 // packages/global-styles-engine/build-module/utils/viewport.mjs 1224 var DEFAULT_VIEWPORT_BREAKPOINTS = { 1225 mobile: "480px", 1226 tablet: "782px" 1227 }; 1228 var VIEWPORT_SIZE_REGEXP = /^(\d+|\d*\.\d+)(px|em|rem)$/; 1229 var DEFAULT_FONT_SIZE = 16; 1230 function isViewportSettings(configOrSettings) { 1231 return "mobile" in configOrSettings || "tablet" in configOrSettings; 1232 } 1233 function getViewportSettings(configOrSettings) { 1234 if (!configOrSettings || typeof configOrSettings !== "object") { 1235 return {}; 1236 } 1237 if (isViewportSettings(configOrSettings)) { 1238 return configOrSettings; 1239 } 1240 return configOrSettings.settings?.viewport ?? {}; 1241 } 1242 function isValidViewportSize(value) { 1243 return typeof value === "string" && VIEWPORT_SIZE_REGEXP.test(value.trim()); 1244 } 1245 function getViewportBreakpointValueInPixels(value) { 1246 if (typeof value === "number") { 1247 return value; 1248 } 1249 if (typeof value !== "string") { 1250 return void 0; 1251 } 1252 const match = value.trim().match(VIEWPORT_SIZE_REGEXP); 1253 if (!match) { 1254 return void 0; 1255 } 1256 const numericValue = Number.parseFloat(match[1]); 1257 const unit = match[2]; 1258 return unit === "px" ? numericValue : numericValue * DEFAULT_FONT_SIZE; 1259 } 1260 function getViewportBreakpoints(configOrSettings) { 1261 const viewportSettings = getViewportSettings(configOrSettings); 1262 const breakpoints = {}; 1263 const breakpointValuesInPixels = {}; 1264 Object.keys(DEFAULT_VIEWPORT_BREAKPOINTS).forEach((breakpoint) => { 1265 const key = breakpoint; 1266 const value = viewportSettings[key]; 1267 const px = getViewportBreakpointValueInPixels(value); 1268 if (px !== void 0 && isValidViewportSize(value)) { 1269 breakpoints[key] = value.trim(); 1270 breakpointValuesInPixels[key] = px; 1271 } 1272 }); 1273 const breakpointNames = Object.keys(breakpoints); 1274 if (!breakpointNames.length) { 1275 return { ...DEFAULT_VIEWPORT_BREAKPOINTS }; 1276 } 1277 if (1 === breakpointNames.length) { 1278 return breakpoints; 1279 } 1280 const mobile = breakpoints.mobile; 1281 const tablet = breakpoints.tablet; 1282 if (breakpointValuesInPixels.mobile >= breakpointValuesInPixels.tablet) { 1283 return { mobile }; 1284 } 1285 return { mobile, tablet }; 1286 } 1287 function getResponsiveMediaQueries(configOrSettings) { 1288 const breakpoints = getViewportBreakpoints(configOrSettings); 1289 const mediaQueries = {}; 1290 if (breakpoints.mobile) { 1291 mediaQueries["@mobile"] = `@media (width <= $breakpoints.mobile})`; 1292 } 1293 if (breakpoints.tablet) { 1294 mediaQueries["@tablet"] = breakpoints.mobile ? `@media ($breakpoints.mobile} < width <= $breakpoints.tablet})` : `@media (width <= $breakpoints.tablet})`; 1295 } 1296 return mediaQueries; 1297 } 1298 1299 // packages/global-styles-engine/build-module/core/render.mjs 1300 var ELEMENT_CLASS_NAMES = { 1301 button: "wp-element-button", 1302 caption: "wp-element-caption" 1303 }; 1304 var BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = { 1305 __experimentalBorder: "border", 1306 color: "color", 1307 dimensions: "dimensions", 1308 spacing: "spacing", 1309 typography: "typography" 1310 }; 1311 var VALID_BLOCK_PSEUDO_SELECTORS = { 1312 "core/button": [":hover", ":focus", ":focus-visible", ":active"], 1313 "core/navigation-link": [":hover", ":focus", ":focus-visible", ":active"] 1314 }; 1315 var VALID_ELEMENT_PSEUDO_SELECTORS = { 1316 link: [ 1317 ":link", 1318 ":any-link", 1319 ":visited", 1320 ":hover", 1321 ":focus", 1322 ":focus-visible", 1323 ":active" 1324 ], 1325 button: [ 1326 ":link", 1327 ":any-link", 1328 ":visited", 1329 ":hover", 1330 ":focus", 1331 ":focus-visible", 1332 ":active" 1333 ] 1334 }; 1335 function getPresetsClasses(blockSelector = "*", blockPresets = {}) { 1336 return PRESET_METADATA.reduce( 1337 (declarations, { path, cssVarInfix, classes }) => { 1338 if (!classes) { 1339 return declarations; 1340 } 1341 const presetByOrigin = getValueFromObjectPath( 1342 blockPresets, 1343 path, 1344 [] 1345 ); 1346 ["default", "theme", "custom"].forEach((origin) => { 1347 if (presetByOrigin[origin]) { 1348 presetByOrigin[origin].forEach( 1349 ({ slug }) => { 1350 classes.forEach( 1351 ({ 1352 classSuffix, 1353 propertyName 1354 }) => { 1355 const classSelectorToUse = `.has-$kebabCase( 1356 slug 1357 )}-$classSuffix}`; 1358 const selectorToUse = blockSelector ? `:where($blockSelector})$classSelectorToUse}` : classSelectorToUse; 1359 const value = `var(--wp--preset--$cssVarInfix}--$kebabCase( 1360 slug 1361 )})`; 1362 declarations += `$selectorToUse}{$propertyName}: $value} !important;}`; 1363 } 1364 ); 1365 } 1366 ); 1367 } 1368 }); 1369 return declarations; 1370 }, 1371 "" 1372 ); 1373 } 1374 function getPresetsSvgFilters(blockPresets = {}) { 1375 return PRESET_METADATA.filter( 1376 // Duotone are the only type of filters for now. 1377 (metadata) => metadata.path.at(-1) === "duotone" 1378 ).flatMap((metadata) => { 1379 const presetByOrigin = getValueFromObjectPath( 1380 blockPresets, 1381 metadata.path, 1382 {} 1383 ); 1384 return ["default", "theme", "custom"].filter((origin) => presetByOrigin[origin]).flatMap( 1385 (origin) => presetByOrigin[origin].map( 1386 (preset) => getDuotoneFilter( 1387 `wp-duotone-$preset.slug}`, 1388 preset.colors 1389 ) 1390 ) 1391 ).join(""); 1392 }); 1393 } 1394 function flattenTree(input = {}, prefix, token) { 1395 let result = []; 1396 Object.keys(input).forEach((key) => { 1397 const newKey = prefix + kebabCase(key.replace("/", "-")); 1398 const newLeaf = input[key]; 1399 if (newLeaf instanceof Object) { 1400 const newPrefix = newKey + token; 1401 result = [...result, ...flattenTree(newLeaf, newPrefix, token)]; 1402 } else { 1403 result.push(`$newKey}: $newLeaf}`); 1404 } 1405 }); 1406 return result; 1407 } 1408 var updateParagraphTextIndentSelector = (featureDeclarations, settings, blockName) => { 1409 if (blockName !== "core/paragraph") { 1410 return featureDeclarations; 1411 } 1412 const blockSettings = settings?.blocks?.["core/paragraph"]; 1413 const textIndentSetting = blockSettings?.typography?.textIndent ?? settings?.typography?.textIndent ?? "subsequent"; 1414 if (textIndentSetting !== "all") { 1415 return featureDeclarations; 1416 } 1417 const oldSelector = ".wp-block-paragraph + .wp-block-paragraph"; 1418 const newSelector = ".wp-block-paragraph"; 1419 if (oldSelector in featureDeclarations) { 1420 const declarations = featureDeclarations[oldSelector]; 1421 const updated = { ...featureDeclarations }; 1422 delete updated[oldSelector]; 1423 updated[newSelector] = declarations; 1424 return updated; 1425 } 1426 return featureDeclarations; 1427 }; 1428 var updateButtonWidthDeclarations = (featureDeclarations, settings) => { 1429 const buttonSelector = ".wp-block-button"; 1430 if (!(buttonSelector in featureDeclarations)) { 1431 return featureDeclarations; 1432 } 1433 const updated = { ...featureDeclarations }; 1434 updated[buttonSelector] = updated[buttonSelector].map( 1435 (declaration) => { 1436 const match = declaration.match(/^width:\s*(.+)$/); 1437 if (!match) { 1438 return declaration; 1439 } 1440 const value = match[1]; 1441 let percentage = null; 1442 if (value.endsWith("%")) { 1443 percentage = parseFloat(value); 1444 } 1445 const presetPrefix = "var(--wp--preset--dimension--"; 1446 if (percentage === null && value.startsWith(presetPrefix) && value.endsWith(")")) { 1447 const slug = value.slice(presetPrefix.length, -1); 1448 const dimensionSizes = { 1449 ...settings?.dimensions?.dimensionSizes ?? {}, 1450 ...settings?.blocks?.["core/button"]?.dimensions?.dimensionSizes ?? {} 1451 }; 1452 for (const origin of Object.values(dimensionSizes)) { 1453 if (!Array.isArray(origin)) { 1454 continue; 1455 } 1456 for (const preset of origin) { 1457 if (preset.slug === slug && typeof preset.size === "string" && preset.size.endsWith("%")) { 1458 percentage = parseFloat(preset.size); 1459 break; 1460 } 1461 } 1462 if (percentage !== null) { 1463 break; 1464 } 1465 } 1466 } 1467 if (percentage === null || isNaN(percentage)) { 1468 return declaration; 1469 } 1470 return `width: calc($percentage} * 1% - (var(--wp--style--block-gap, 0.5em) * (1 - $percentage} / 100)))`; 1471 } 1472 ); 1473 return updated; 1474 }; 1475 var getFeatureDeclarations = (selectors, styles) => { 1476 const declarations = {}; 1477 Object.entries(selectors).forEach(([feature, selector]) => { 1478 if (feature === "root" || !styles?.[feature]) { 1479 return; 1480 } 1481 const isShorthand = typeof selector === "string"; 1482 if (!isShorthand && typeof selector === "object" && selector !== null) { 1483 Object.entries(selector).forEach( 1484 ([subfeature, subfeatureSelector]) => { 1485 if (subfeature === "root" || !styles?.[feature][subfeature]) { 1486 return; 1487 } 1488 const subfeatureStyles = { 1489 [feature]: { 1490 [subfeature]: styles[feature][subfeature] 1491 } 1492 }; 1493 const newDeclarations = getStylesDeclarations(subfeatureStyles); 1494 declarations[subfeatureSelector] = [ 1495 ...declarations[subfeatureSelector] || [], 1496 ...newDeclarations 1497 ]; 1498 delete styles[feature][subfeature]; 1499 } 1500 ); 1501 } 1502 if (isShorthand || typeof selector === "object" && selector !== null && "root" in selector) { 1503 const featureSelector = isShorthand ? selector : selector.root; 1504 const featureStyles = { [feature]: styles[feature] }; 1505 const newDeclarations = getStylesDeclarations(featureStyles); 1506 declarations[featureSelector] = [ 1507 ...declarations[featureSelector] || [], 1508 ...newDeclarations 1509 ]; 1510 delete styles[feature]; 1511 } 1512 }); 1513 return declarations; 1514 }; 1515 function getStylesDeclarations(blockStyles = {}, selector = "", useRootPaddingAlign, tree = {}, disableRootPadding = false) { 1516 const isRoot = ROOT_BLOCK_SELECTOR === selector; 1517 const output = Object.entries( 1518 import_blocks.__EXPERIMENTAL_STYLE_PROPERTY 1519 ).reduce( 1520 (declarations, [key, { value, properties, useEngine, rootOnly }]) => { 1521 if (rootOnly && !isRoot) { 1522 return declarations; 1523 } 1524 const pathToValue = value; 1525 if (pathToValue[0] === "elements" || useEngine) { 1526 return declarations; 1527 } 1528 const styleValue = getValueFromObjectPath( 1529 blockStyles, 1530 pathToValue 1531 ); 1532 if (key === "--wp--style--root--padding" && (typeof styleValue === "string" || !useRootPaddingAlign)) { 1533 return declarations; 1534 } 1535 if (properties && typeof styleValue !== "string") { 1536 Object.entries(properties).forEach((entry) => { 1537 const [name, prop] = entry; 1538 if (!getValueFromObjectPath(styleValue, [prop], false)) { 1539 return; 1540 } 1541 const cssProperty = name.startsWith("--") ? name : kebabCase(name); 1542 declarations.push( 1543 `$cssProperty}: ${(0, import_style_engine2.getCSSValueFromRawStyle)( 1544 getValueFromObjectPath(styleValue, [prop]) 1545 )}` 1546 ); 1547 }); 1548 } else if (getValueFromObjectPath(blockStyles, pathToValue, false)) { 1549 const cssProperty = key.startsWith("--") ? key : kebabCase(key); 1550 declarations.push( 1551 `$cssProperty}: ${(0, import_style_engine2.getCSSValueFromRawStyle)( 1552 getValueFromObjectPath(blockStyles, pathToValue) 1553 )}` 1554 ); 1555 } 1556 return declarations; 1557 }, 1558 [] 1559 ); 1560 if (!!blockStyles.background) { 1561 if (blockStyles.background?.backgroundImage) { 1562 blockStyles.background.backgroundImage = getResolvedValue( 1563 blockStyles.background.backgroundImage, 1564 tree 1565 ); 1566 } 1567 if (!isRoot && !!blockStyles.background?.backgroundImage?.id) { 1568 blockStyles = { 1569 ...blockStyles, 1570 background: { 1571 ...blockStyles.background, 1572 ...setBackgroundStyleDefaults(blockStyles.background) 1573 } 1574 }; 1575 } 1576 } 1577 const extraRules = (0, import_style_engine2.getCSSRules)(blockStyles); 1578 extraRules.forEach((rule) => { 1579 if (isRoot && (useRootPaddingAlign || disableRootPadding) && rule.key.startsWith("padding")) { 1580 return; 1581 } 1582 const cssProperty = rule.key.startsWith("--") ? rule.key : kebabCase(rule.key); 1583 let ruleValue = getResolvedValue(rule.value, tree); 1584 if (cssProperty === "font-size") { 1585 ruleValue = getTypographyFontSizeValue( 1586 { name: "", slug: "", size: ruleValue }, 1587 tree?.settings 1588 ); 1589 } 1590 if (cssProperty === "aspect-ratio") { 1591 output.push("min-height: unset"); 1592 } 1593 output.push(`$cssProperty}: $ruleValue}`); 1594 }); 1595 return output; 1596 } 1597 function getLayoutStyles({ 1598 layoutDefinitions = LAYOUT_DEFINITIONS, 1599 style, 1600 selector, 1601 hasBlockGapSupport, 1602 hasFallbackGapSupport, 1603 fallbackGapValue 1604 }) { 1605 let ruleset = ""; 1606 const blockGapValue = style?.spacing?.blockGap; 1607 let gapValue = hasBlockGapSupport ? getGapCSSValue(blockGapValue) : ""; 1608 if (hasFallbackGapSupport) { 1609 if (selector === ROOT_BLOCK_SELECTOR) { 1610 gapValue = !gapValue ? "0.5em" : gapValue; 1611 } else if (!hasBlockGapSupport && fallbackGapValue) { 1612 gapValue = fallbackGapValue; 1613 } 1614 } 1615 const rowGapValue = hasBlockGapSupport && blockGapValue && typeof blockGapValue !== "string" ? getGapCSSValue(blockGapValue.top) : gapValue; 1616 if (gapValue && layoutDefinitions) { 1617 Object.values(layoutDefinitions).forEach( 1618 ({ className, name, spacingStyles }) => { 1619 if (!hasBlockGapSupport && "flex" !== name && "grid" !== name) { 1620 return; 1621 } 1622 const layoutGapValue = ["default", "constrained"].includes( 1623 name 1624 ) ? rowGapValue : gapValue; 1625 if (spacingStyles?.length) { 1626 spacingStyles.forEach((spacingStyle) => { 1627 const declarations = []; 1628 if (spacingStyle.rules) { 1629 Object.entries(spacingStyle.rules).forEach( 1630 ([cssProperty, cssValue]) => { 1631 declarations.push( 1632 `$cssProperty}: $cssValue ? cssValue : layoutGapValue}` 1633 ); 1634 } 1635 ); 1636 } 1637 if (declarations.length) { 1638 let combinedSelector = ""; 1639 if (!hasBlockGapSupport) { 1640 combinedSelector = selector === ROOT_BLOCK_SELECTOR ? `:where(.$className}$spacingStyle?.selector || ""})` : `:where($selector}.$className}$spacingStyle?.selector || ""})`; 1641 } else { 1642 combinedSelector = selector === ROOT_BLOCK_SELECTOR ? `:root :where(.$className})$spacingStyle?.selector || ""}` : `:root :where($selector}-$className})$spacingStyle?.selector || ""}`; 1643 } 1644 ruleset += `$combinedSelector} { $declarations.join( 1645 "; " 1646 )}; }`; 1647 } 1648 }); 1649 } 1650 } 1651 ); 1652 if (selector === ROOT_BLOCK_SELECTOR && hasBlockGapSupport) { 1653 ruleset += `$ROOT_CSS_PROPERTIES_SELECTOR} { --wp--style--block-gap: $gapValue}; }`; 1654 } 1655 } 1656 if (selector === ROOT_BLOCK_SELECTOR && layoutDefinitions) { 1657 const validDisplayModes = ["block", "flex", "grid"]; 1658 Object.values(layoutDefinitions).forEach( 1659 ({ className, displayMode, baseStyles }) => { 1660 if (displayMode && validDisplayModes.includes(displayMode)) { 1661 ruleset += `$selector} .$className} { display:$displayMode}; }`; 1662 } 1663 if (baseStyles?.length) { 1664 baseStyles.forEach((baseStyle) => { 1665 const declarations = []; 1666 if (baseStyle.rules) { 1667 Object.entries(baseStyle.rules).forEach( 1668 ([cssProperty, cssValue]) => { 1669 declarations.push( 1670 `$cssProperty}: $cssValue}` 1671 ); 1672 } 1673 ); 1674 } 1675 if (declarations.length) { 1676 const combinedSelector = `.$className}$baseStyle?.selector || ""}`; 1677 ruleset += `$combinedSelector} { $declarations.join( 1678 "; " 1679 )}; }`; 1680 } 1681 }); 1682 } 1683 } 1684 ); 1685 } 1686 return ruleset; 1687 } 1688 var STYLE_KEYS = [ 1689 "border", 1690 "color", 1691 "dimensions", 1692 "spacing", 1693 "typography", 1694 "filter", 1695 "outline", 1696 "shadow", 1697 "background" 1698 ]; 1699 function pickStyleKeys(treeToPickFrom, responsiveMediaQueries) { 1700 return pickStyleAndPseudoKeys( 1701 treeToPickFrom, 1702 void 0, 1703 responsiveMediaQueries 1704 ); 1705 } 1706 function pickStyleAndPseudoKeys(treeToPickFrom, blockName, responsiveMediaQueries) { 1707 if (!treeToPickFrom) { 1708 return {}; 1709 } 1710 const entries = Object.entries(treeToPickFrom); 1711 const allowedPseudoSelectors = blockName ? VALID_BLOCK_PSEUDO_SELECTORS[blockName] ?? [] : []; 1712 const pickedEntries = entries.filter( 1713 ([key]) => STYLE_KEYS.includes(key) || allowedPseudoSelectors.includes(key) || responsiveMediaQueries[key] 1714 ); 1715 const clonedEntries = pickedEntries.map(([key, style]) => [ 1716 key, 1717 JSON.parse(JSON.stringify(style)) 1718 ]); 1719 return Object.fromEntries(clonedEntries); 1720 } 1721 function getPseudoStyleNodes(node) { 1722 const { 1723 styles, 1724 selector, 1725 featureSelectors, 1726 name, 1727 elementName, 1728 mediaQuery, 1729 variationName 1730 } = node; 1731 const pseudoSelectors = name ? VALID_BLOCK_PSEUDO_SELECTORS[name] ?? [] : VALID_ELEMENT_PSEUDO_SELECTORS[elementName ?? ""] ?? []; 1732 if (!pseudoSelectors.length) { 1733 return []; 1734 } 1735 return pseudoSelectors.flatMap((pseudoSelector) => { 1736 const pseudoStyles = styles?.[pseudoSelector]; 1737 if (!pseudoStyles || typeof pseudoStyles !== "object") { 1738 return []; 1739 } 1740 return [ 1741 { 1742 styles: JSON.parse(JSON.stringify(pseudoStyles)), 1743 selector, 1744 selectorSuffix: pseudoSelector, 1745 mediaQuery, 1746 featureSelectors: featureSelectors && typeof featureSelectors !== "string" ? featureSelectors : void 0, 1747 name, 1748 elementName, 1749 variationName 1750 } 1751 ]; 1752 }); 1753 } 1754 function getResponsiveStyleNodes(node, responsiveMediaQueries) { 1755 const { 1756 styles, 1757 selector, 1758 fallbackGapValue, 1759 featureSelectors, 1760 hasLayoutSupport, 1761 layoutHasBlockGapSupport, 1762 layoutSelector, 1763 name, 1764 elementName, 1765 isStyleVariation, 1766 variationName 1767 } = node; 1768 if (!name && !elementName) { 1769 return []; 1770 } 1771 return Object.entries(responsiveMediaQueries).flatMap( 1772 ([breakpointKey, mediaQuery]) => { 1773 const breakpointStyles = styles?.[breakpointKey]; 1774 if (!breakpointStyles || typeof breakpointStyles !== "object") { 1775 return []; 1776 } 1777 return [ 1778 { 1779 styles: JSON.parse(JSON.stringify(breakpointStyles)), 1780 selector, 1781 mediaQuery, 1782 featureSelectors: featureSelectors && typeof featureSelectors !== "string" ? featureSelectors : void 0, 1783 fallbackGapValue, 1784 hasLayoutSupport, 1785 name, 1786 elementName, 1787 isStyleVariation, 1788 variationName, 1789 layoutSelector, 1790 layoutHasBlockGapSupport 1791 } 1792 ]; 1793 } 1794 ); 1795 } 1796 function getElementStylesByName(styleNode, responsiveMediaQueries) { 1797 const elementStylesByName = { ...styleNode?.elements ?? {} }; 1798 Object.keys(responsiveMediaQueries).forEach((breakpointKey) => { 1799 Object.entries(styleNode?.[breakpointKey]?.elements ?? {}).forEach( 1800 ([elementName, styles]) => { 1801 elementStylesByName[elementName] = { 1802 ...elementStylesByName[elementName] ?? {}, 1803 [breakpointKey]: styles 1804 }; 1805 } 1806 ); 1807 }); 1808 return elementStylesByName; 1809 } 1810 var getNodesWithStyles = (tree, blockSelectors) => { 1811 const nodes = []; 1812 if (!tree?.styles) { 1813 return nodes; 1814 } 1815 const responsiveMediaQueries = getResponsiveMediaQueries(tree); 1816 const styles = pickStyleKeys(tree.styles, responsiveMediaQueries); 1817 if (styles) { 1818 nodes.push({ 1819 styles, 1820 selector: ROOT_BLOCK_SELECTOR, 1821 // Root selector (body) styles should not be wrapped in `:root where()` to keep 1822 // specificity at (0,0,1) and maintain backwards compatibility. 1823 skipSelectorWrapper: true 1824 }); 1825 } 1826 Object.entries(import_blocks.__EXPERIMENTAL_ELEMENTS).forEach(([name, selector]) => { 1827 if (tree.styles?.elements?.[name]) { 1828 nodes.push({ 1829 styles: tree.styles?.elements?.[name] ?? {}, 1830 selector, 1831 elementName: name, 1832 // Top level elements that don't use a class name should not receive the 1833 // `:root :where()` wrapper to maintain backwards compatibility. 1834 skipSelectorWrapper: !ELEMENT_CLASS_NAMES[name] 1835 }); 1836 } 1837 }); 1838 Object.entries(tree.styles?.blocks ?? {}).forEach( 1839 ([blockName, node]) => { 1840 const blockStyles = pickStyleAndPseudoKeys( 1841 node, 1842 blockName, 1843 responsiveMediaQueries 1844 ); 1845 const typedNode = node; 1846 const variationNodesToAdd = []; 1847 const variationStyleNodesToAdd = []; 1848 if (typedNode?.variations) { 1849 Object.entries(typedNode.variations).forEach( 1850 ([variationName, variation]) => { 1851 const typedVariation = variation; 1852 const variationStyles = pickStyleAndPseudoKeys( 1853 typedVariation, 1854 blockName, 1855 responsiveMediaQueries 1856 ); 1857 if (typedVariation?.css) { 1858 variationStyles.css = typedVariation.css; 1859 } 1860 const variationSelector = typeof blockSelectors !== "string" ? blockSelectors[blockName]?.styleVariationSelectors?.[variationName] : void 0; 1861 if (variationSelector && typeof blockSelectors !== "string") { 1862 const blockSelector = blockSelectors[blockName]; 1863 variationStyleNodesToAdd.push({ 1864 styles: variationStyles, 1865 selector: variationSelector, 1866 featureSelectors: blockSelector?.featureSelectors, 1867 fallbackGapValue: blockSelector?.fallbackGapValue, 1868 hasLayoutSupport: blockSelector?.hasLayoutSupport, 1869 isStyleVariation: true, 1870 variationName, 1871 layoutSelector: variationSelector + blockSelector.selector, 1872 layoutHasBlockGapSupport: true, 1873 name: blockName 1874 }); 1875 } 1876 Object.entries( 1877 getElementStylesByName( 1878 typedVariation, 1879 responsiveMediaQueries 1880 ) 1881 ).forEach(([element, elementStyles]) => { 1882 if (elementStyles && import_blocks.__EXPERIMENTAL_ELEMENTS[element]) { 1883 variationNodesToAdd.push({ 1884 styles: elementStyles, 1885 selector: scopeSelector( 1886 variationSelector, 1887 import_blocks.__EXPERIMENTAL_ELEMENTS[element] 1888 ), 1889 elementName: element, 1890 isStyleVariation: true 1891 }); 1892 } 1893 }); 1894 Object.entries(typedVariation?.blocks ?? {}).forEach( 1895 ([ 1896 variationBlockName, 1897 variationBlockStyles 1898 ]) => { 1899 const variationBlockSelector = typeof blockSelectors !== "string" ? scopeSelector( 1900 variationSelector, 1901 blockSelectors[variationBlockName]?.selector 1902 ) : void 0; 1903 const variationDuotoneSelector = typeof blockSelectors !== "string" ? scopeSelector( 1904 variationSelector, 1905 blockSelectors[variationBlockName]?.duotoneSelector 1906 ) : void 0; 1907 const variationFeatureSelectors = typeof blockSelectors !== "string" ? scopeFeatureSelectors( 1908 variationSelector, 1909 blockSelectors[variationBlockName]?.featureSelectors ?? {} 1910 ) : void 0; 1911 const variationBlockStyleNodes = pickStyleAndPseudoKeys( 1912 variationBlockStyles, 1913 variationBlockName, 1914 responsiveMediaQueries 1915 ); 1916 if (variationBlockStyles?.css) { 1917 variationBlockStyleNodes.css = variationBlockStyles.css; 1918 } 1919 if (!variationBlockSelector || typeof blockSelectors === "string") { 1920 return; 1921 } 1922 variationNodesToAdd.push({ 1923 selector: variationBlockSelector, 1924 name: variationBlockName, 1925 isStyleVariation: true, 1926 duotoneSelector: variationDuotoneSelector, 1927 featureSelectors: variationFeatureSelectors, 1928 fallbackGapValue: blockSelectors[variationBlockName]?.fallbackGapValue, 1929 hasLayoutSupport: blockSelectors[variationBlockName]?.hasLayoutSupport, 1930 styles: variationBlockStyleNodes 1931 }); 1932 Object.entries( 1933 getElementStylesByName( 1934 variationBlockStyles, 1935 responsiveMediaQueries 1936 ) 1937 ).forEach( 1938 ([ 1939 variationBlockElement, 1940 variationBlockElementStyles 1941 ]) => { 1942 if (variationBlockElementStyles && import_blocks.__EXPERIMENTAL_ELEMENTS[variationBlockElement]) { 1943 variationNodesToAdd.push({ 1944 styles: variationBlockElementStyles, 1945 selector: scopeSelector( 1946 variationBlockSelector, 1947 import_blocks.__EXPERIMENTAL_ELEMENTS[variationBlockElement] 1948 ), 1949 elementName: variationBlockElement, 1950 isStyleVariation: true 1951 }); 1952 } 1953 } 1954 ); 1955 } 1956 ); 1957 } 1958 ); 1959 } 1960 if (typeof blockSelectors !== "string" && blockSelectors?.[blockName]?.selector) { 1961 nodes.push({ 1962 duotoneSelector: blockSelectors[blockName].duotoneSelector, 1963 fallbackGapValue: blockSelectors[blockName].fallbackGapValue, 1964 hasLayoutSupport: blockSelectors[blockName].hasLayoutSupport, 1965 selector: blockSelectors[blockName].selector, 1966 styles: blockStyles, 1967 featureSelectors: blockSelectors[blockName].featureSelectors, 1968 name: blockName 1969 }); 1970 } 1971 nodes.push(...variationStyleNodesToAdd); 1972 Object.entries( 1973 getElementStylesByName(typedNode, responsiveMediaQueries) 1974 ).forEach(([elementName, value]) => { 1975 if (typeof blockSelectors !== "string" && value && blockSelectors?.[blockName] && import_blocks.__EXPERIMENTAL_ELEMENTS[elementName]) { 1976 nodes.push({ 1977 styles: value, 1978 selector: blockSelectors[blockName]?.selector.split(",").map((sel) => { 1979 const elementSelectors = import_blocks.__EXPERIMENTAL_ELEMENTS[elementName].split(","); 1980 return elementSelectors.map( 1981 (elementSelector) => sel + " " + elementSelector 1982 ); 1983 }).join(","), 1984 elementName 1985 }); 1986 } 1987 }); 1988 nodes.push(...variationNodesToAdd); 1989 } 1990 ); 1991 return nodes; 1992 }; 1993 var getNodesWithSettings = (tree, blockSelectors) => { 1994 const nodes = []; 1995 if (!tree?.settings) { 1996 return nodes; 1997 } 1998 const pickPresets = (treeToPickFrom) => { 1999 let presets2 = {}; 2000 PRESET_METADATA.forEach(({ path }) => { 2001 const value = getValueFromObjectPath(treeToPickFrom, path, false); 2002 if (value !== false) { 2003 presets2 = setImmutably(presets2, path, value); 2004 } 2005 }); 2006 return presets2; 2007 }; 2008 const presets = pickPresets(tree.settings); 2009 const custom = tree.settings?.custom; 2010 if (Object.keys(presets).length > 0 || custom) { 2011 nodes.push({ 2012 presets, 2013 custom, 2014 selector: ROOT_CSS_PROPERTIES_SELECTOR 2015 }); 2016 } 2017 Object.entries(tree.settings?.blocks ?? {}).forEach( 2018 ([blockName, node]) => { 2019 const blockCustom = node.custom; 2020 if (typeof blockSelectors === "string" || !blockSelectors[blockName]) { 2021 return; 2022 } 2023 const blockPresets = pickPresets(node); 2024 if (Object.keys(blockPresets).length > 0 || blockCustom) { 2025 nodes.push({ 2026 presets: blockPresets, 2027 custom: blockCustom, 2028 selector: blockSelectors[blockName]?.selector, 2029 featureSelectors: blockSelectors[blockName]?.featureSelectors 2030 }); 2031 } 2032 } 2033 ); 2034 return nodes; 2035 }; 2036 function resolveFeatureSelector(featureSelectors, featureKey, fallback) { 2037 if (!featureSelectors || typeof featureSelectors === "string") { 2038 return fallback; 2039 } 2040 const feature = featureSelectors[featureKey]; 2041 if (typeof feature === "string") { 2042 return feature; 2043 } 2044 if (typeof feature === "object" && feature.root) { 2045 return feature.root; 2046 } 2047 return fallback; 2048 } 2049 function getPresetVarDeclarations(presets, mergedSettings, { path, valueKey, valueFunc, cssVarInfix }) { 2050 const presetByOrigin = getValueFromObjectPath( 2051 presets, 2052 path, 2053 [] 2054 ); 2055 const declarations = []; 2056 for (const origin of ["default", "theme", "custom"]) { 2057 if (!presetByOrigin[origin]) { 2058 continue; 2059 } 2060 for (const value of presetByOrigin[origin]) { 2061 const slug = kebabCase(value.slug); 2062 if (valueKey && !valueFunc) { 2063 declarations.push( 2064 `--wp--preset--$cssVarInfix}--$slug}: $value[valueKey]}` 2065 ); 2066 } else if (valueFunc && typeof valueFunc === "function") { 2067 declarations.push( 2068 `--wp--preset--$cssVarInfix}--$slug}: $valueFunc( 2069 value, 2070 mergedSettings 2071 )}` 2072 ); 2073 } 2074 } 2075 } 2076 return declarations; 2077 } 2078 var generateCustomProperties = (tree, blockSelectors) => { 2079 const nodes = getNodesWithSettings(tree, blockSelectors); 2080 let ruleset = ""; 2081 for (const { presets, custom, selector, featureSelectors } of nodes) { 2082 const defaultSelector = selector; 2083 const varsBySelector = { 2084 [defaultSelector]: [] 2085 }; 2086 if (tree?.settings) { 2087 for (const metadata of PRESET_METADATA) { 2088 const declarations = getPresetVarDeclarations( 2089 presets, 2090 tree.settings, 2091 metadata 2092 ); 2093 if (declarations.length === 0) { 2094 continue; 2095 } 2096 const target = resolveFeatureSelector( 2097 featureSelectors, 2098 metadata.path[0], 2099 defaultSelector 2100 ); 2101 if (!varsBySelector[target]) { 2102 varsBySelector[target] = []; 2103 } 2104 varsBySelector[target].push(...declarations); 2105 } 2106 } 2107 const customProps = flattenTree(custom, "--wp--custom--", "--"); 2108 if (customProps.length > 0) { 2109 varsBySelector[defaultSelector].push(...customProps); 2110 } 2111 for (const [ruleSelector, declarations] of Object.entries( 2112 varsBySelector 2113 )) { 2114 if (declarations.length > 0) { 2115 ruleset += `$ruleSelector}{$declarations.join(";")};}`; 2116 } 2117 } 2118 } 2119 return ruleset; 2120 }; 2121 function renderStylesNode(node, { 2122 tree, 2123 useRootPaddingAlign, 2124 disableLayoutStyles, 2125 hasBlockGapSupport, 2126 hasFallbackGapSupport, 2127 disableRootPadding 2128 }) { 2129 const { 2130 selector, 2131 selectorSuffix, 2132 mediaQuery, 2133 duotoneSelector, 2134 styles, 2135 fallbackGapValue, 2136 hasLayoutSupport, 2137 featureSelectors, 2138 layoutSelector, 2139 layoutHasBlockGapSupport, 2140 skipSelectorWrapper, 2141 name, 2142 variationName 2143 } = node; 2144 let ruleset = ""; 2145 const effectiveSelector = selectorSuffix ? appendToSelector(selector, selectorSuffix) : selector; 2146 if (featureSelectors && typeof featureSelectors !== "string") { 2147 let featureDeclarations = getFeatureDeclarations( 2148 featureSelectors, 2149 styles 2150 ); 2151 featureDeclarations = updateParagraphTextIndentSelector( 2152 featureDeclarations, 2153 tree.settings, 2154 name 2155 ); 2156 featureDeclarations = updateButtonWidthDeclarations( 2157 featureDeclarations, 2158 tree.settings 2159 ); 2160 Object.entries(featureDeclarations).forEach( 2161 ([featureSelector, declarations]) => { 2162 if (declarations.length) { 2163 let selectorForRule = variationName ? getBlockStyleVariationFeatureSelector( 2164 variationName, 2165 featureSelector 2166 ) : featureSelector; 2167 selectorForRule = selectorSuffix ? appendToSelector(selectorForRule, selectorSuffix) : selectorForRule; 2168 const rules = declarations.join(";"); 2169 ruleset += `:root :where($selectorForRule}){$rules};}`; 2170 } 2171 } 2172 ); 2173 } 2174 if (duotoneSelector) { 2175 const duotoneStyles = {}; 2176 if (styles?.filter) { 2177 duotoneStyles.filter = styles.filter; 2178 delete styles.filter; 2179 } 2180 const duotoneDeclarations = getStylesDeclarations(duotoneStyles); 2181 if (duotoneDeclarations.length) { 2182 ruleset += `$duotoneSelector}{$duotoneDeclarations.join( 2183 ";" 2184 )};}`; 2185 } 2186 } 2187 const selectorForLayout = layoutSelector ?? effectiveSelector; 2188 const hasBlockGapSupportForLayout = layoutHasBlockGapSupport ?? hasBlockGapSupport; 2189 if (!disableLayoutStyles && (ROOT_BLOCK_SELECTOR === selectorForLayout || hasLayoutSupport)) { 2190 ruleset += getLayoutStyles({ 2191 style: styles, 2192 selector: selectorForLayout, 2193 hasBlockGapSupport: hasBlockGapSupportForLayout, 2194 hasFallbackGapSupport, 2195 fallbackGapValue 2196 }); 2197 } 2198 const styleDeclarations = getStylesDeclarations( 2199 styles, 2200 effectiveSelector, 2201 useRootPaddingAlign, 2202 tree, 2203 disableRootPadding 2204 ); 2205 if (styleDeclarations?.length) { 2206 const generalSelector = skipSelectorWrapper ? effectiveSelector : `:root :where($effectiveSelector})`; 2207 ruleset += `$generalSelector}{$styleDeclarations.join(";")};}`; 2208 } 2209 if (styles?.css) { 2210 ruleset += processCSSNesting( 2211 styles.css, 2212 `:root :where($effectiveSelector})` 2213 ); 2214 } 2215 if (mediaQuery && ruleset) { 2216 return `$mediaQuery}{$ruleset}}`; 2217 } 2218 return ruleset; 2219 } 2220 var transformToStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles = false, disableRootPadding = false, styleOptions = {}) => { 2221 const options = { 2222 blockGap: true, 2223 blockStyles: true, 2224 layoutStyles: true, 2225 marginReset: true, 2226 presets: true, 2227 rootPadding: true, 2228 variationStyles: false, 2229 ...styleOptions 2230 }; 2231 const normalizedTree = normalizeStyleStateAliases(tree); 2232 const nodesWithStyles = getNodesWithStyles( 2233 normalizedTree, 2234 blockSelectors 2235 ); 2236 const nodesWithSettings = getNodesWithSettings( 2237 normalizedTree, 2238 blockSelectors 2239 ); 2240 const useRootPaddingAlign = normalizedTree?.settings?.useRootPaddingAwareAlignments; 2241 const { contentSize, wideSize } = normalizedTree?.settings?.layout || {}; 2242 const hasBodyStyles = options.marginReset || options.rootPadding || options.layoutStyles; 2243 let ruleset = ""; 2244 if (options.presets && (contentSize || wideSize)) { 2245 ruleset += `$ROOT_CSS_PROPERTIES_SELECTOR} {`; 2246 ruleset = contentSize ? ruleset + ` --wp--style--global--content-size: $contentSize};` : ruleset; 2247 ruleset = wideSize ? ruleset + ` --wp--style--global--wide-size: $wideSize};` : ruleset; 2248 ruleset += "}"; 2249 } 2250 if (hasBodyStyles) { 2251 ruleset += ":where(body) {margin: 0;"; 2252 if (options.rootPadding && useRootPaddingAlign) { 2253 ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } 2254 .has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } 2255 .has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } 2256 .has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; } 2257 .has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0; 2258 `; 2259 } 2260 ruleset += "}"; 2261 } 2262 if (options.blockStyles) { 2263 const responsiveMediaQueries = getResponsiveMediaQueries(tree); 2264 nodesWithStyles.forEach((node) => { 2265 if (node.isStyleVariation && !options.variationStyles) { 2266 return; 2267 } 2268 const responsiveNodes = getResponsiveStyleNodes( 2269 node, 2270 responsiveMediaQueries 2271 ); 2272 [ 2273 node, 2274 ...responsiveNodes, 2275 ...getPseudoStyleNodes(node), 2276 ...responsiveNodes.flatMap(getPseudoStyleNodes) 2277 ].forEach((expandedNode) => { 2278 ruleset += renderStylesNode(expandedNode, { 2279 tree: normalizedTree, 2280 useRootPaddingAlign, 2281 disableLayoutStyles, 2282 hasBlockGapSupport, 2283 hasFallbackGapSupport, 2284 disableRootPadding 2285 }); 2286 }); 2287 }); 2288 } 2289 if (options.layoutStyles) { 2290 ruleset = ruleset + ".wp-site-blocks > .alignleft { float: left; margin-right: 2em; }"; 2291 ruleset = ruleset + ".wp-site-blocks > .alignright { float: right; margin-left: 2em; }"; 2292 ruleset = ruleset + ".wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }"; 2293 } 2294 if (options.blockGap && hasBlockGapSupport) { 2295 const gapValue = getGapCSSValue(normalizedTree?.styles?.spacing?.blockGap) || "0.5em"; 2296 ruleset = ruleset + `:root :where(.wp-site-blocks) > * { margin-block-start: $gapValue}; margin-block-end: 0; }`; 2297 ruleset = ruleset + ":root :where(.wp-site-blocks) > :first-child { margin-block-start: 0; }"; 2298 ruleset = ruleset + ":root :where(.wp-site-blocks) > :last-child { margin-block-end: 0; }"; 2299 } 2300 if (options.presets) { 2301 nodesWithSettings.forEach(({ selector, presets }) => { 2302 if (ROOT_BLOCK_SELECTOR === selector || ROOT_CSS_PROPERTIES_SELECTOR === selector) { 2303 selector = ""; 2304 } 2305 const classes = getPresetsClasses(selector, presets); 2306 if (classes.length > 0) { 2307 ruleset += classes; 2308 } 2309 }); 2310 } 2311 return ruleset; 2312 }; 2313 function generateSvgFilters(tree, blockSelectors) { 2314 const nodesWithSettings = getNodesWithSettings(tree, blockSelectors); 2315 return nodesWithSettings.flatMap(({ presets }) => { 2316 return getPresetsSvgFilters(presets); 2317 }); 2318 } 2319 var getSelectorsConfig = (blockType, rootSelector) => { 2320 if (blockType?.selectors && Object.keys(blockType.selectors).length > 0) { 2321 return blockType.selectors; 2322 } 2323 const config = { 2324 root: rootSelector 2325 }; 2326 Object.entries(BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS).forEach( 2327 ([featureKey, featureName]) => { 2328 const featureSelector = getBlockSelector(blockType, featureKey); 2329 if (featureSelector) { 2330 config[featureName] = featureSelector; 2331 } 2332 } 2333 ); 2334 return config; 2335 }; 2336 var getBlockSelectors = (blockTypes, variationInstanceId) => { 2337 const { getBlockStyles } = (0, import_data2.select)(import_blocks.store); 2338 const result = {}; 2339 blockTypes.forEach((blockType) => { 2340 const name = blockType.name; 2341 const selector = getBlockSelector(blockType); 2342 if (!selector) { 2343 return; 2344 } 2345 let duotoneSelector = getBlockSelector(blockType, "filter.duotone"); 2346 if (!duotoneSelector) { 2347 const rootSelector = getBlockSelector(blockType); 2348 const duotoneSupport = (0, import_blocks.getBlockSupport)( 2349 blockType, 2350 "color.__experimentalDuotone", 2351 false 2352 ); 2353 if (typeof duotoneSupport === "string" && rootSelector) { 2354 duotoneSelector = scopeSelector(rootSelector, duotoneSupport); 2355 } 2356 } 2357 const hasLayoutSupport = !!blockType?.supports?.layout || !!blockType?.supports?.__experimentalLayout; 2358 const blockGapSupport = blockType?.supports?.spacing?.blockGap; 2359 const fallbackGapValue = typeof blockGapSupport === "object" && !Array.isArray(blockGapSupport) ? blockGapSupport.__experimentalDefault : void 0; 2360 const blockStyleVariations = getBlockStyles(name); 2361 const styleVariationSelectors = {}; 2362 blockStyleVariations?.forEach((variation) => { 2363 const variationSuffix = variationInstanceId ? `-$variationInstanceId}` : ""; 2364 const variationName = `$variation.name}$variationSuffix}`; 2365 const styleVariationSelector = getBlockStyleVariationSelector( 2366 variationName, 2367 selector 2368 ); 2369 styleVariationSelectors[variationName] = styleVariationSelector; 2370 }); 2371 const featureSelectors = getSelectorsConfig(blockType, selector); 2372 result[name] = { 2373 duotoneSelector: duotoneSelector ?? void 0, 2374 fallbackGapValue, 2375 featureSelectors: Object.keys(featureSelectors).length ? featureSelectors : void 0, 2376 hasLayoutSupport, 2377 name, 2378 selector, 2379 styleVariationSelectors: blockStyleVariations?.length ? styleVariationSelectors : void 0 2380 }; 2381 }); 2382 return result; 2383 }; 2384 function updateConfigWithSeparator(config) { 2385 const blocks = config.styles?.blocks; 2386 const separatorBlock = blocks?.["core/separator"]; 2387 const needsSeparatorStyleUpdate = separatorBlock && separatorBlock.color?.background && !separatorBlock.color?.text && !separatorBlock.border?.color; 2388 if (needsSeparatorStyleUpdate) { 2389 return { 2390 ...config, 2391 styles: { 2392 ...config.styles, 2393 blocks: { 2394 ...blocks, 2395 "core/separator": { 2396 ...separatorBlock, 2397 color: { 2398 ...separatorBlock.color, 2399 text: separatorBlock.color?.background 2400 } 2401 } 2402 } 2403 } 2404 }; 2405 } 2406 return config; 2407 } 2408 function processCSSNesting(css, blockSelector) { 2409 let processedCSS = ""; 2410 if (!css || css.trim() === "") { 2411 return processedCSS; 2412 } 2413 const parts = css.split("&"); 2414 parts.forEach((part) => { 2415 if (!part || part.trim() === "") { 2416 return; 2417 } 2418 const isRootCss = !part.includes("{"); 2419 if (isRootCss) { 2420 processedCSS += `:root :where($blockSelector}){$part.trim()}}`; 2421 } else { 2422 const splitPart = part.replace("}", "").split("{"); 2423 if (splitPart.length !== 2) { 2424 return; 2425 } 2426 const [nestedSelector, cssValue] = splitPart; 2427 const matches = nestedSelector.match(/([>+~\s]*::[a-zA-Z-]+)/); 2428 const pseudoPart = matches ? matches[1] : ""; 2429 const withoutPseudoElement = matches ? nestedSelector.replace(pseudoPart, "").trim() : nestedSelector.trim(); 2430 let combinedSelector; 2431 if (withoutPseudoElement === "") { 2432 combinedSelector = blockSelector; 2433 } else { 2434 combinedSelector = nestedSelector.startsWith(" ") ? scopeSelector(blockSelector, withoutPseudoElement) : appendToSelector(blockSelector, withoutPseudoElement); 2435 } 2436 processedCSS += `:root :where($combinedSelector})$pseudoPart}{$cssValue.trim()}}`; 2437 } 2438 }); 2439 return processedCSS; 2440 } 2441 function generateGlobalStyles(config = {}, blockTypes = [], options = {}) { 2442 const { 2443 hasBlockGapSupport: hasBlockGapSupportOption, 2444 hasFallbackGapSupport: hasFallbackGapSupportOption, 2445 disableLayoutStyles = false, 2446 disableRootPadding = false, 2447 styleOptions = {} 2448 } = options; 2449 const blocks = blockTypes.length > 0 ? blockTypes : (0, import_blocks.getBlockTypes)(); 2450 const blockGap = getSetting(config, "spacing.blockGap"); 2451 const hasBlockGapSupport = hasBlockGapSupportOption ?? blockGap !== null; 2452 const hasFallbackGapSupport = hasFallbackGapSupportOption ?? !hasBlockGapSupport; 2453 if (!config?.styles || !config?.settings) { 2454 return [[], {}]; 2455 } 2456 const updatedConfig = updateConfigWithSeparator(config); 2457 const blockSelectors = getBlockSelectors(blocks); 2458 const customProperties = generateCustomProperties( 2459 updatedConfig, 2460 blockSelectors 2461 ); 2462 const globalStyles = transformToStyles( 2463 updatedConfig, 2464 blockSelectors, 2465 hasBlockGapSupport, 2466 hasFallbackGapSupport, 2467 disableLayoutStyles, 2468 disableRootPadding, 2469 styleOptions 2470 ); 2471 const svgs = generateSvgFilters(updatedConfig, blockSelectors); 2472 const styles = [ 2473 { 2474 css: customProperties, 2475 isGlobalStyles: true 2476 }, 2477 { 2478 css: globalStyles, 2479 isGlobalStyles: true 2480 }, 2481 // Load custom CSS in own stylesheet so that any invalid CSS entered in the input won't break all the global styles in the editor. 2482 { 2483 css: updatedConfig?.styles?.css ?? "", 2484 isGlobalStyles: true 2485 }, 2486 { 2487 assets: svgs, 2488 __unstableType: "svgs", 2489 isGlobalStyles: true 2490 } 2491 ]; 2492 blocks.forEach((blockType) => { 2493 const blockStyles = updatedConfig?.styles?.blocks?.[blockType.name]; 2494 if (blockStyles?.css) { 2495 const { featureSelectors } = blockSelectors[blockType.name]; 2496 const cssFeatureSelector = typeof featureSelectors === "object" ? featureSelectors?.css : void 0; 2497 let resolvedCssSelector; 2498 if (typeof cssFeatureSelector === "string") { 2499 resolvedCssSelector = cssFeatureSelector; 2500 } else if (typeof cssFeatureSelector === "object") { 2501 resolvedCssSelector = cssFeatureSelector?.root; 2502 } 2503 const selector = resolvedCssSelector ?? blockSelectors[blockType.name].selector; 2504 styles.push({ 2505 css: processCSSNesting(blockStyles.css, selector), 2506 isGlobalStyles: true 2507 }); 2508 } 2509 }); 2510 return [styles, updatedConfig.settings]; 2511 } 2512 2513 // packages/lazy-editor/build-module/hooks/use-editor-settings.mjs 2514 var import_core_data3 = __toESM(require_core_data(), 1); 2515 var import_blocks2 = __toESM(require_blocks(), 1); 2516 var import_element2 = __toESM(require_element(), 1); 2517 var import_data4 = __toESM(require_data(), 1); 2518 2519 // packages/lazy-editor/build-module/hooks/use-global-styles.mjs 2520 var import_core_data2 = __toESM(require_core_data(), 1); 2521 var import_data3 = __toESM(require_data(), 1); 2522 var import_element = __toESM(require_element(), 1); 2523 function useUserGlobalStyles(id) { 2524 const { userGlobalStyles } = (0, import_data3.useSelect)( 2525 (select2) => { 2526 if (id === void 0) { 2527 return { userGlobalStyles: void 0 }; 2528 } 2529 const { getEntityRecord, getEditedEntityRecord, canUser } = select2(import_core_data2.store); 2530 const userCanEditGlobalStyles = canUser("update", { 2531 kind: "root", 2532 name: "globalStyles", 2533 id 2534 }); 2535 let record; 2536 if ( 2537 /* 2538 * Test that the OPTIONS request for user capabilities is complete 2539 * before fetching the global styles entity record. 2540 * This is to avoid fetching the global styles entity unnecessarily. 2541 */ 2542 typeof userCanEditGlobalStyles === "boolean" 2543 ) { 2544 if (userCanEditGlobalStyles) { 2545 record = getEditedEntityRecord( 2546 "root", 2547 "globalStyles", 2548 id 2549 ); 2550 } else { 2551 record = getEntityRecord("root", "globalStyles", id, { 2552 context: "view" 2553 }); 2554 } 2555 } 2556 return { 2557 userGlobalStyles: record 2558 }; 2559 }, 2560 [id] 2561 ); 2562 return (0, import_element.useMemo)(() => { 2563 if (!userGlobalStyles) { 2564 return { 2565 user: void 0 2566 }; 2567 } 2568 const user = userGlobalStyles; 2569 return { 2570 user 2571 }; 2572 }, [userGlobalStyles]); 2573 } 2574 2575 // packages/lazy-editor/build-module/lock-unlock.mjs 2576 var import_private_apis = __toESM(require_private_apis(), 1); 2577 var { unlock } = (0, import_private_apis.__dangerousOptInToUnstableAPIsOnlyForCoreModules)( 2578 "I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.", 2579 "@wordpress/lazy-editor" 2580 ); 2581 2582 // packages/lazy-editor/build-module/hooks/use-editor-settings.mjs 2583 function useEditorSettings({ 2584 stylesId 2585 }) { 2586 const { editorSettings, blockTypes } = (0, import_data4.useSelect)( 2587 (select2) => ({ 2588 editorSettings: unlock( 2589 select2(import_core_data3.store) 2590 ).getEditorSettings(), 2591 blockTypes: select2(import_blocks2.store).getBlockTypes() 2592 }), 2593 [] 2594 ); 2595 const { user: globalStyles } = useUserGlobalStyles(stylesId); 2596 const [globalStylesCSS] = (0, import_element2.useMemo)( 2597 () => generateGlobalStyles(globalStyles, blockTypes), 2598 [globalStyles, blockTypes] 2599 ); 2600 const hasEditorSettings = !!editorSettings; 2601 const styles = (0, import_element2.useMemo)(() => { 2602 if (!hasEditorSettings) { 2603 return []; 2604 } 2605 return [ 2606 ...editorSettings?.styles ?? [], 2607 ...globalStylesCSS 2608 ]; 2609 }, [hasEditorSettings, editorSettings?.styles, globalStylesCSS]); 2610 return { 2611 isReady: hasEditorSettings, 2612 editorSettings: (0, import_element2.useMemo)( 2613 () => ({ 2614 ...editorSettings ?? {}, 2615 styles 2616 }), 2617 [editorSettings, styles] 2618 ) 2619 }; 2620 } 2621 2622 // packages/asset-loader/build-module/index.mjs 2623 function injectImportMap(scriptModules) { 2624 if (!scriptModules || Object.keys(scriptModules).length === 0) { 2625 return; 2626 } 2627 const existingMapElement = document.querySelector( 2628 "script#wp-importmap[type=importmap]" 2629 ); 2630 if (existingMapElement) { 2631 try { 2632 const existingMap = JSON.parse(existingMapElement.text); 2633 if (!existingMap.imports) { 2634 existingMap.imports = {}; 2635 } 2636 existingMap.imports = { 2637 ...existingMap.imports, 2638 ...scriptModules 2639 }; 2640 existingMapElement.text = JSON.stringify(existingMap, null, 2); 2641 } catch (error) { 2642 console.error("Failed to parse or update import map:", error); 2643 } 2644 } else { 2645 const script = document.createElement("script"); 2646 script.type = "importmap"; 2647 script.id = "wp-importmap"; 2648 script.text = JSON.stringify( 2649 { 2650 imports: scriptModules 2651 }, 2652 null, 2653 2 2654 ); 2655 document.head.appendChild(script); 2656 } 2657 } 2658 function loadStylesheet(handle, styleData) { 2659 return new Promise((resolve) => { 2660 if (!styleData.src) { 2661 resolve(); 2662 return; 2663 } 2664 const existingLink = document.getElementById(handle + "-css"); 2665 if (existingLink) { 2666 resolve(); 2667 return; 2668 } 2669 const link = document.createElement("link"); 2670 link.rel = "stylesheet"; 2671 link.href = styleData.src + (styleData.version ? "?ver=" + styleData.version : ""); 2672 link.id = handle + "-css"; 2673 link.media = styleData.media || "all"; 2674 link.onload = () => resolve(); 2675 link.onerror = () => { 2676 console.error(`Failed to load stylesheet: $handle}`); 2677 resolve(); 2678 }; 2679 document.head.appendChild(link); 2680 }); 2681 } 2682 function loadScript(handle, scriptData) { 2683 if (!scriptData.src) { 2684 const marker = document.createElement("script"); 2685 marker.id = handle + "-js"; 2686 marker.textContent = "// Processed: " + handle; 2687 return marker; 2688 } 2689 const script = document.createElement("script"); 2690 script.src = scriptData.src + (scriptData.version ? "?ver=" + scriptData.version : ""); 2691 script.id = handle + "-js"; 2692 script.async = false; 2693 return script; 2694 } 2695 function injectInlineStyle(handle, inlineStyle, position) { 2696 let styleContent = ""; 2697 if (Array.isArray(inlineStyle)) { 2698 styleContent = inlineStyle.join("\n"); 2699 } else if (typeof inlineStyle === "string") { 2700 styleContent = inlineStyle; 2701 } 2702 if (styleContent && styleContent.trim()) { 2703 const styleId = handle + "-" + position + "-inline-css"; 2704 if (!document.getElementById(styleId)) { 2705 const style = document.createElement("style"); 2706 style.id = styleId; 2707 style.textContent = styleContent.trim(); 2708 document.head.appendChild(style); 2709 } 2710 } 2711 } 2712 function injectInlineScript(handle, inlineScript, position) { 2713 let scriptContent = inlineScript; 2714 if (Array.isArray(scriptContent)) { 2715 scriptContent = scriptContent.join("\n"); 2716 } 2717 const script = document.createElement("script"); 2718 script.id = handle + "-" + position + "-js"; 2719 script.textContent = scriptContent.trim(); 2720 return script; 2721 } 2722 function buildDependencyOrderedList(assetsData) { 2723 const visited = /* @__PURE__ */ new Set(); 2724 const visiting = /* @__PURE__ */ new Set(); 2725 const orderedList = []; 2726 function visit(handle) { 2727 if (visited.has(handle)) { 2728 return; 2729 } 2730 if (visiting.has(handle)) { 2731 console.warn( 2732 `Circular dependency detected for handle: $handle}` 2733 ); 2734 return; 2735 } 2736 visiting.add(handle); 2737 if (assetsData[handle]) { 2738 const deps = assetsData[handle].deps || []; 2739 deps.forEach((dep) => { 2740 if (assetsData[dep]) { 2741 visit(dep); 2742 } 2743 }); 2744 } 2745 visiting.delete(handle); 2746 visited.add(handle); 2747 if (assetsData[handle]) { 2748 orderedList.push(handle); 2749 } 2750 } 2751 Object.keys(assetsData).forEach((handle) => { 2752 visit(handle); 2753 }); 2754 return orderedList; 2755 } 2756 async function performScriptLoad(scriptElements, destination) { 2757 let parallel = []; 2758 for (const scriptElement of scriptElements) { 2759 if (scriptElement.src) { 2760 const loader = Promise.withResolvers(); 2761 scriptElement.onload = () => loader.resolve(); 2762 scriptElement.onerror = () => { 2763 console.error(`Failed to load script: $scriptElement.id}`); 2764 loader.resolve(); 2765 }; 2766 parallel.push(loader.promise); 2767 } else { 2768 await Promise.all(parallel); 2769 parallel = []; 2770 } 2771 destination.appendChild(scriptElement); 2772 } 2773 await Promise.all(parallel); 2774 parallel = []; 2775 } 2776 async function loadAssets(scriptsData, inlineScripts, stylesData, inlineStyles, htmlTemplates, scriptModules) { 2777 if (scriptModules) { 2778 injectImportMap(scriptModules); 2779 } 2780 const orderedStyles = buildDependencyOrderedList(stylesData); 2781 const orderedScripts = buildDependencyOrderedList(scriptsData); 2782 const stylePromises = []; 2783 for (const handle of orderedStyles) { 2784 const beforeInline = inlineStyles.before?.[handle]; 2785 if (beforeInline) { 2786 injectInlineStyle(handle, beforeInline, "before"); 2787 } 2788 stylePromises.push(loadStylesheet(handle, stylesData[handle])); 2789 const afterInline = inlineStyles.after?.[handle]; 2790 if (afterInline) { 2791 injectInlineStyle(handle, afterInline, "after"); 2792 } 2793 } 2794 const scriptElements = []; 2795 for (const handle of orderedScripts) { 2796 const beforeInline = inlineScripts.before?.[handle]; 2797 if (beforeInline) { 2798 scriptElements.push( 2799 injectInlineScript(handle, beforeInline, "before") 2800 ); 2801 } 2802 scriptElements.push(loadScript(handle, scriptsData[handle])); 2803 const afterInline = inlineScripts.after?.[handle]; 2804 if (afterInline) { 2805 scriptElements.push( 2806 injectInlineScript(handle, afterInline, "after") 2807 ); 2808 } 2809 } 2810 const scriptsPromise = performScriptLoad(scriptElements, document.body); 2811 await Promise.all([Promise.all(stylePromises), scriptsPromise]); 2812 if (htmlTemplates && htmlTemplates.length > 0) { 2813 htmlTemplates.forEach((templateHtml) => { 2814 const scriptMatch = templateHtml.match( 2815 /<script([^>]*)>(.*?)<\/script>/is 2816 ); 2817 if (scriptMatch) { 2818 const attributes = scriptMatch[1]; 2819 const content = scriptMatch[2]; 2820 const script = document.createElement("script"); 2821 const idMatch = attributes.match(/id=["']([^"']+)["']/); 2822 if (idMatch) { 2823 script.id = idMatch[1]; 2824 } 2825 const typeMatch = attributes.match(/type=["']([^"']+)["']/); 2826 if (typeMatch) { 2827 script.type = typeMatch[1]; 2828 } 2829 script.textContent = content; 2830 document.body.appendChild(script); 2831 } 2832 }); 2833 } 2834 } 2835 var index_default = loadAssets; 2836 2837 // packages/lazy-editor/build-module/hooks/use-editor-assets.mjs 2838 var import_core_data4 = __toESM(require_core_data(), 1); 2839 var import_element3 = __toESM(require_element(), 1); 2840 var import_data5 = __toESM(require_data(), 1); 2841 var loadAssetsPromise; 2842 async function loadEditorAssets() { 2843 const load = async () => { 2844 const editorAssets = await unlock( 2845 (0, import_data5.resolveSelect)(import_core_data4.store) 2846 ).getEditorAssets(); 2847 await index_default( 2848 editorAssets.scripts || {}, 2849 editorAssets.inline_scripts || { before: {}, after: {} }, 2850 editorAssets.styles || {}, 2851 editorAssets.inline_styles || { before: {}, after: {} }, 2852 editorAssets.html_templates || [], 2853 editorAssets.script_modules || {} 2854 ); 2855 }; 2856 if (!loadAssetsPromise) { 2857 loadAssetsPromise = load(); 2858 } 2859 return loadAssetsPromise; 2860 } 2861 function useEditorAssets() { 2862 const editorAssets = (0, import_data5.useSelect)((select2) => { 2863 return unlock(select2(import_core_data4.store)).getEditorAssets(); 2864 }, []); 2865 const [assetsLoaded, setAssetsLoaded] = (0, import_element3.useState)(false); 2866 (0, import_element3.useEffect)(() => { 2867 if (editorAssets && !assetsLoaded) { 2868 loadEditorAssets().then(() => { 2869 setAssetsLoaded(true); 2870 }).catch((error) => { 2871 console.error("Failed to load editor assets:", error); 2872 }); 2873 } 2874 }, [editorAssets, assetsLoaded]); 2875 return { 2876 isReady: !!editorAssets && assetsLoaded, 2877 assetsLoaded 2878 }; 2879 } 2880 2881 // packages/lazy-editor/build-module/components/editor/index.mjs 2882 var import_jsx_runtime = __toESM(require_jsx_runtime(), 1); 2883 var { 2884 Editor: PrivateEditor, 2885 BackButton, 2886 PreferencesModal, 2887 ToolsMoreMenuGroup, 2888 SiteExport 2889 } = unlock(import_editor.privateApis); 2890 function Editor({ 2891 postType, 2892 postId, 2893 settings, 2894 backButton, 2895 onActionPerformed, 2896 initialViewport 2897 }) { 2898 const homePage = (0, import_data6.useSelect)( 2899 (select2) => { 2900 if (postType || postId) { 2901 return null; 2902 } 2903 const { getHomePage } = unlock(select2(import_core_data5.store)); 2904 return getHomePage(); 2905 }, 2906 [postType, postId] 2907 ); 2908 const resolvedPostType = postType || homePage?.postType; 2909 const resolvedPostId = postId || homePage?.postId; 2910 const templateId = (0, import_data6.useSelect)( 2911 (select2) => { 2912 if (!resolvedPostType || !resolvedPostId) { 2913 return void 0; 2914 } 2915 if (resolvedPostType === "wp_template") { 2916 return resolvedPostId; 2917 } 2918 return unlock(select2(import_core_data5.store)).getTemplateId( 2919 resolvedPostType, 2920 resolvedPostId 2921 ); 2922 }, 2923 [resolvedPostType, resolvedPostId] 2924 ); 2925 const stylesId = useStylesId({ templateId }); 2926 const { isReady: settingsReady, editorSettings } = useEditorSettings({ 2927 stylesId 2928 }); 2929 const { isReady: assetsReady } = useEditorAssets(); 2930 const finalSettings = (0, import_element4.useMemo)( 2931 () => ({ 2932 ...editorSettings, 2933 ...settings, 2934 /* 2935 * The theme's styles and the user's global styles, then whatever the 2936 * host adds for the surface it is rendering into. Spelled out after 2937 * the spread because `styles` is a list each source adds to: a host 2938 * contributing its own must not drop everyone else's. 2939 */ 2940 styles: [ 2941 ...editorSettings.styles ?? [], 2942 ...settings?.styles ?? [] 2943 ] 2944 }), 2945 [editorSettings, settings] 2946 ); 2947 if (!settingsReady || !assetsReady) { 2948 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( 2949 "div", 2950 { 2951 style: { 2952 display: "flex", 2953 justifyContent: "center", 2954 alignItems: "center", 2955 height: "100vh" 2956 }, 2957 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {}) 2958 } 2959 ); 2960 } 2961 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)( 2962 PrivateEditor, 2963 { 2964 postType: resolvedPostType, 2965 postId: resolvedPostId, 2966 templateId, 2967 settings: finalSettings, 2968 styles: finalSettings.styles, 2969 onActionPerformed, 2970 initialViewport, 2971 children: [ 2972 backButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BackButton, { children: backButton }), 2973 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreferencesModal, {}), 2974 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolsMoreMenuGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SiteExport, {}) }) 2975 ] 2976 } 2977 ); 2978 } 2979 2980 // packages/lazy-editor/build-module/components/preview/index.mjs 2981 var import_i18n = __toESM(require_i18n(), 1); 2982 var import_element5 = __toESM(require_element(), 1); 2983 var import_block_editor = __toESM(require_block_editor(), 1); 2984 var import_editor2 = __toESM(require_editor(), 1); 2985 var import_blocks3 = __toESM(require_blocks(), 1); 2986 var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1); 2987 if (typeof document !== "undefined" && true && !document.head.querySelector("style[data-wp-hash='95327475c1']")) { 2988 const style = document.createElement("style"); 2989 style.setAttribute("data-wp-hash", "95327475c1"); 2990 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}")); 2991 document.head.appendChild(style); 2992 } 2993 var { useStyle } = unlock(import_editor2.privateApis); 2994 function PreviewContent({ 2995 blocks, 2996 content, 2997 description 2998 }) { 2999 const descriptionId = (0, import_element5.useId)(); 3000 const backgroundColor = useStyle("color.background"); 3001 const actualBlocks = (0, import_element5.useMemo)(() => { 3002 return blocks ?? (0, import_blocks3.parse)(content, { 3003 __unstableSkipMigrationLogs: true 3004 }); 3005 }, [content, blocks]); 3006 const isEmpty = !actualBlocks?.length; 3007 return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)( 3008 "div", 3009 { 3010 className: "lazy-editor-block-preview__container", 3011 style: { backgroundColor }, 3012 "aria-describedby": !!description ? descriptionId : void 0, 3013 children: [ 3014 isEmpty && (0, import_i18n.__)("Empty."), 3015 !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_block_editor.BlockPreview.Async, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_block_editor.BlockPreview, { blocks: actualBlocks }) }), 3016 !!description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { hidden: true, id: descriptionId, children: description }) 3017 ] 3018 } 3019 ); 3020 } 3021 function Preview({ 3022 blocks, 3023 content, 3024 description 3025 }) { 3026 const stylesId = useStylesId(); 3027 const { isReady: settingsReady, editorSettings } = useEditorSettings({ 3028 stylesId 3029 }); 3030 const { isReady: assetsReady } = useEditorAssets(); 3031 const finalSettings = (0, import_element5.useMemo)( 3032 () => ({ 3033 ...editorSettings, 3034 isPreviewMode: true 3035 }), 3036 [editorSettings] 3037 ); 3038 if (!settingsReady || !assetsReady) { 3039 return null; 3040 } 3041 return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_block_editor.BlockEditorProvider, { settings: finalSettings, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)( 3042 PreviewContent, 3043 { 3044 blocks, 3045 content, 3046 description 3047 } 3048 ) }); 3049 } 3050 export { 3051 Editor, 3052 Preview, 3053 loadEditorAssets, 3054 useEditorAssets, 3055 useEditorSettings 3056 };
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated : Thu Sep 24 08:20:34 2026 | Cross-referenced by PHPXref |