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