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