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