| [ 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.split(",").map( 1348 (selector) => `$selector}$classSelectorToUse}` 1349 ).join(","); 1350 const value = `var(--wp--preset--$cssVarInfix}--$kebabCase( 1351 slug 1352 )})`; 1353 declarations += `$selectorToUse}{$propertyName}: $value} !important;}`; 1354 } 1355 ); 1356 } 1357 ); 1358 } 1359 }); 1360 return declarations; 1361 }, 1362 "" 1363 ); 1364 } 1365 function getPresetsSvgFilters(blockPresets = {}) { 1366 return PRESET_METADATA.filter( 1367 // Duotone are the only type of filters for now. 1368 (metadata) => metadata.path.at(-1) === "duotone" 1369 ).flatMap((metadata) => { 1370 const presetByOrigin = getValueFromObjectPath( 1371 blockPresets, 1372 metadata.path, 1373 {} 1374 ); 1375 return ["default", "theme"].filter((origin) => presetByOrigin[origin]).flatMap( 1376 (origin) => presetByOrigin[origin].map( 1377 (preset) => getDuotoneFilter( 1378 `wp-duotone-$preset.slug}`, 1379 preset.colors 1380 ) 1381 ) 1382 ).join(""); 1383 }); 1384 } 1385 function flattenTree(input = {}, prefix, token) { 1386 let result = []; 1387 Object.keys(input).forEach((key) => { 1388 const newKey = prefix + kebabCase(key.replace("/", "-")); 1389 const newLeaf = input[key]; 1390 if (newLeaf instanceof Object) { 1391 const newPrefix = newKey + token; 1392 result = [...result, ...flattenTree(newLeaf, newPrefix, token)]; 1393 } else { 1394 result.push(`$newKey}: $newLeaf}`); 1395 } 1396 }); 1397 return result; 1398 } 1399 var updateParagraphTextIndentSelector = (featureDeclarations, settings, blockName) => { 1400 if (blockName !== "core/paragraph") { 1401 return featureDeclarations; 1402 } 1403 const blockSettings = settings?.blocks?.["core/paragraph"]; 1404 const textIndentSetting = blockSettings?.typography?.textIndent ?? settings?.typography?.textIndent ?? "subsequent"; 1405 if (textIndentSetting !== "all") { 1406 return featureDeclarations; 1407 } 1408 const oldSelector = ".wp-block-paragraph + .wp-block-paragraph"; 1409 const newSelector = ".wp-block-paragraph"; 1410 if (oldSelector in featureDeclarations) { 1411 const declarations = featureDeclarations[oldSelector]; 1412 const updated = { ...featureDeclarations }; 1413 delete updated[oldSelector]; 1414 updated[newSelector] = declarations; 1415 return updated; 1416 } 1417 return featureDeclarations; 1418 }; 1419 var updateButtonWidthDeclarations = (featureDeclarations, settings) => { 1420 const buttonSelector = ".wp-block-button"; 1421 if (!(buttonSelector in featureDeclarations)) { 1422 return featureDeclarations; 1423 } 1424 const updated = { ...featureDeclarations }; 1425 updated[buttonSelector] = updated[buttonSelector].map( 1426 (declaration) => { 1427 const match = declaration.match(/^width:\s*(.+)$/); 1428 if (!match) { 1429 return declaration; 1430 } 1431 const value = match[1]; 1432 let percentage = null; 1433 if (value.endsWith("%")) { 1434 percentage = parseFloat(value); 1435 } 1436 const presetPrefix = "var(--wp--preset--dimension--"; 1437 if (percentage === null && value.startsWith(presetPrefix) && value.endsWith(")")) { 1438 const slug = value.slice(presetPrefix.length, -1); 1439 const dimensionSizes = { 1440 ...settings?.dimensions?.dimensionSizes ?? {}, 1441 ...settings?.blocks?.["core/button"]?.dimensions?.dimensionSizes ?? {} 1442 }; 1443 for (const origin of Object.values(dimensionSizes)) { 1444 if (!Array.isArray(origin)) { 1445 continue; 1446 } 1447 for (const preset of origin) { 1448 if (preset.slug === slug && typeof preset.size === "string" && preset.size.endsWith("%")) { 1449 percentage = parseFloat(preset.size); 1450 break; 1451 } 1452 } 1453 if (percentage !== null) { 1454 break; 1455 } 1456 } 1457 } 1458 if (percentage === null || isNaN(percentage)) { 1459 return declaration; 1460 } 1461 return `width: calc($percentage} * 1% - (var(--wp--style--block-gap, 0.5em) * (1 - $percentage} / 100)))`; 1462 } 1463 ); 1464 return updated; 1465 }; 1466 var getFeatureDeclarations = (selectors, styles) => { 1467 const declarations = {}; 1468 Object.entries(selectors).forEach(([feature, selector]) => { 1469 if (feature === "root" || !styles?.[feature]) { 1470 return; 1471 } 1472 const isShorthand = typeof selector === "string"; 1473 if (!isShorthand && typeof selector === "object" && selector !== null) { 1474 Object.entries(selector).forEach( 1475 ([subfeature, subfeatureSelector]) => { 1476 if (subfeature === "root" || !styles?.[feature][subfeature]) { 1477 return; 1478 } 1479 const subfeatureStyles = { 1480 [feature]: { 1481 [subfeature]: styles[feature][subfeature] 1482 } 1483 }; 1484 const newDeclarations = getStylesDeclarations(subfeatureStyles); 1485 declarations[subfeatureSelector] = [ 1486 ...declarations[subfeatureSelector] || [], 1487 ...newDeclarations 1488 ]; 1489 delete styles[feature][subfeature]; 1490 } 1491 ); 1492 } 1493 if (isShorthand || typeof selector === "object" && selector !== null && "root" in selector) { 1494 const featureSelector = isShorthand ? selector : selector.root; 1495 const featureStyles = { [feature]: styles[feature] }; 1496 const newDeclarations = getStylesDeclarations(featureStyles); 1497 declarations[featureSelector] = [ 1498 ...declarations[featureSelector] || [], 1499 ...newDeclarations 1500 ]; 1501 delete styles[feature]; 1502 } 1503 }); 1504 return declarations; 1505 }; 1506 function getStylesDeclarations(blockStyles = {}, selector = "", useRootPaddingAlign, tree = {}, disableRootPadding = false) { 1507 const isRoot = ROOT_BLOCK_SELECTOR === selector; 1508 const output = Object.entries( 1509 import_blocks.__EXPERIMENTAL_STYLE_PROPERTY 1510 ).reduce( 1511 (declarations, [key, { value, properties, useEngine, rootOnly }]) => { 1512 if (rootOnly && !isRoot) { 1513 return declarations; 1514 } 1515 const pathToValue = value; 1516 if (pathToValue[0] === "elements" || useEngine) { 1517 return declarations; 1518 } 1519 const styleValue = getValueFromObjectPath( 1520 blockStyles, 1521 pathToValue 1522 ); 1523 if (key === "--wp--style--root--padding" && (typeof styleValue === "string" || !useRootPaddingAlign)) { 1524 return declarations; 1525 } 1526 if (properties && typeof styleValue !== "string") { 1527 Object.entries(properties).forEach((entry) => { 1528 const [name, prop] = entry; 1529 if (!getValueFromObjectPath(styleValue, [prop], false)) { 1530 return; 1531 } 1532 const cssProperty = name.startsWith("--") ? name : kebabCase(name); 1533 declarations.push( 1534 `$cssProperty}: ${(0, import_style_engine2.getCSSValueFromRawStyle)( 1535 getValueFromObjectPath(styleValue, [prop]) 1536 )}` 1537 ); 1538 }); 1539 } else if (getValueFromObjectPath(blockStyles, pathToValue, false)) { 1540 const cssProperty = key.startsWith("--") ? key : kebabCase(key); 1541 declarations.push( 1542 `$cssProperty}: ${(0, import_style_engine2.getCSSValueFromRawStyle)( 1543 getValueFromObjectPath(blockStyles, pathToValue) 1544 )}` 1545 ); 1546 } 1547 return declarations; 1548 }, 1549 [] 1550 ); 1551 if (!!blockStyles.background) { 1552 if (blockStyles.background?.backgroundImage) { 1553 blockStyles.background.backgroundImage = getResolvedValue( 1554 blockStyles.background.backgroundImage, 1555 tree 1556 ); 1557 } 1558 if (!isRoot && !!blockStyles.background?.backgroundImage?.id) { 1559 blockStyles = { 1560 ...blockStyles, 1561 background: { 1562 ...blockStyles.background, 1563 ...setBackgroundStyleDefaults(blockStyles.background) 1564 } 1565 }; 1566 } 1567 } 1568 const extraRules = (0, import_style_engine2.getCSSRules)(blockStyles); 1569 extraRules.forEach((rule) => { 1570 if (isRoot && (useRootPaddingAlign || disableRootPadding) && rule.key.startsWith("padding")) { 1571 return; 1572 } 1573 const cssProperty = rule.key.startsWith("--") ? rule.key : kebabCase(rule.key); 1574 let ruleValue = getResolvedValue(rule.value, tree); 1575 if (cssProperty === "font-size") { 1576 ruleValue = getTypographyFontSizeValue( 1577 { name: "", slug: "", size: ruleValue }, 1578 tree?.settings 1579 ); 1580 } 1581 if (cssProperty === "aspect-ratio") { 1582 output.push("min-height: unset"); 1583 } 1584 output.push(`$cssProperty}: $ruleValue}`); 1585 }); 1586 return output; 1587 } 1588 function getLayoutStyles({ 1589 layoutDefinitions = LAYOUT_DEFINITIONS, 1590 style, 1591 selector, 1592 hasBlockGapSupport, 1593 hasFallbackGapSupport, 1594 fallbackGapValue 1595 }) { 1596 let ruleset = ""; 1597 let gapValue = hasBlockGapSupport ? getGapCSSValue(style?.spacing?.blockGap) : ""; 1598 if (hasFallbackGapSupport) { 1599 if (selector === ROOT_BLOCK_SELECTOR) { 1600 gapValue = !gapValue ? "0.5em" : gapValue; 1601 } else if (!hasBlockGapSupport && fallbackGapValue) { 1602 gapValue = fallbackGapValue; 1603 } 1604 } 1605 if (gapValue && layoutDefinitions) { 1606 Object.values(layoutDefinitions).forEach( 1607 ({ className, name, spacingStyles }) => { 1608 if (!hasBlockGapSupport && "flex" !== name && "grid" !== name) { 1609 return; 1610 } 1611 if (spacingStyles?.length) { 1612 spacingStyles.forEach((spacingStyle) => { 1613 const declarations = []; 1614 if (spacingStyle.rules) { 1615 Object.entries(spacingStyle.rules).forEach( 1616 ([cssProperty, cssValue]) => { 1617 declarations.push( 1618 `$cssProperty}: $cssValue ? cssValue : gapValue}` 1619 ); 1620 } 1621 ); 1622 } 1623 if (declarations.length) { 1624 let combinedSelector = ""; 1625 if (!hasBlockGapSupport) { 1626 combinedSelector = selector === ROOT_BLOCK_SELECTOR ? `:where(.$className}$spacingStyle?.selector || ""})` : `:where($selector}.$className}$spacingStyle?.selector || ""})`; 1627 } else { 1628 combinedSelector = selector === ROOT_BLOCK_SELECTOR ? `:root :where(.$className})$spacingStyle?.selector || ""}` : `:root :where($selector}-$className})$spacingStyle?.selector || ""}`; 1629 } 1630 ruleset += `$combinedSelector} { $declarations.join( 1631 "; " 1632 )}; }`; 1633 } 1634 }); 1635 } 1636 } 1637 ); 1638 if (selector === ROOT_BLOCK_SELECTOR && hasBlockGapSupport) { 1639 ruleset += `$ROOT_CSS_PROPERTIES_SELECTOR} { --wp--style--block-gap: $gapValue}; }`; 1640 } 1641 } 1642 if (selector === ROOT_BLOCK_SELECTOR && layoutDefinitions) { 1643 const validDisplayModes = ["block", "flex", "grid"]; 1644 Object.values(layoutDefinitions).forEach( 1645 ({ className, displayMode, baseStyles }) => { 1646 if (displayMode && validDisplayModes.includes(displayMode)) { 1647 ruleset += `$selector} .$className} { display:$displayMode}; }`; 1648 } 1649 if (baseStyles?.length) { 1650 baseStyles.forEach((baseStyle) => { 1651 const declarations = []; 1652 if (baseStyle.rules) { 1653 Object.entries(baseStyle.rules).forEach( 1654 ([cssProperty, cssValue]) => { 1655 declarations.push( 1656 `$cssProperty}: $cssValue}` 1657 ); 1658 } 1659 ); 1660 } 1661 if (declarations.length) { 1662 const combinedSelector = `.$className}$baseStyle?.selector || ""}`; 1663 ruleset += `$combinedSelector} { $declarations.join( 1664 "; " 1665 )}; }`; 1666 } 1667 }); 1668 } 1669 } 1670 ); 1671 } 1672 return ruleset; 1673 } 1674 var STYLE_KEYS = [ 1675 "border", 1676 "color", 1677 "dimensions", 1678 "spacing", 1679 "typography", 1680 "filter", 1681 "outline", 1682 "shadow", 1683 "background" 1684 ]; 1685 function pickStyleKeys(treeToPickFrom, responsiveMediaQueries) { 1686 return pickStyleAndPseudoKeys( 1687 treeToPickFrom, 1688 void 0, 1689 responsiveMediaQueries 1690 ); 1691 } 1692 function pickStyleAndPseudoKeys(treeToPickFrom, blockName, responsiveMediaQueries) { 1693 if (!treeToPickFrom) { 1694 return {}; 1695 } 1696 const entries = Object.entries(treeToPickFrom); 1697 const allowedPseudoSelectors = blockName ? VALID_BLOCK_PSEUDO_SELECTORS[blockName] ?? [] : []; 1698 const pickedEntries = entries.filter( 1699 ([key]) => STYLE_KEYS.includes(key) || allowedPseudoSelectors.includes(key) || responsiveMediaQueries[key] 1700 ); 1701 const clonedEntries = pickedEntries.map(([key, style]) => [ 1702 key, 1703 JSON.parse(JSON.stringify(style)) 1704 ]); 1705 return Object.fromEntries(clonedEntries); 1706 } 1707 function getPseudoStyleNodes(node) { 1708 const { 1709 styles, 1710 selector, 1711 featureSelectors, 1712 name, 1713 elementName, 1714 mediaQuery, 1715 variationName 1716 } = node; 1717 const pseudoSelectors = name ? VALID_BLOCK_PSEUDO_SELECTORS[name] ?? [] : VALID_ELEMENT_PSEUDO_SELECTORS[elementName ?? ""] ?? []; 1718 if (!pseudoSelectors.length) { 1719 return []; 1720 } 1721 return pseudoSelectors.flatMap((pseudoSelector) => { 1722 const pseudoStyles = styles?.[pseudoSelector]; 1723 if (!pseudoStyles || typeof pseudoStyles !== "object") { 1724 return []; 1725 } 1726 return [ 1727 { 1728 styles: JSON.parse(JSON.stringify(pseudoStyles)), 1729 selector, 1730 selectorSuffix: pseudoSelector, 1731 mediaQuery, 1732 featureSelectors: featureSelectors && typeof featureSelectors !== "string" ? featureSelectors : void 0, 1733 name, 1734 elementName, 1735 variationName 1736 } 1737 ]; 1738 }); 1739 } 1740 function getResponsiveStyleNodes(node, responsiveMediaQueries) { 1741 const { 1742 styles, 1743 selector, 1744 fallbackGapValue, 1745 featureSelectors, 1746 hasLayoutSupport, 1747 layoutHasBlockGapSupport, 1748 layoutSelector, 1749 name, 1750 elementName, 1751 isStyleVariation, 1752 variationName 1753 } = node; 1754 if (!name && !elementName) { 1755 return []; 1756 } 1757 return Object.entries(responsiveMediaQueries).flatMap( 1758 ([breakpointKey, mediaQuery]) => { 1759 const breakpointStyles = styles?.[breakpointKey]; 1760 if (!breakpointStyles || typeof breakpointStyles !== "object") { 1761 return []; 1762 } 1763 return [ 1764 { 1765 styles: JSON.parse(JSON.stringify(breakpointStyles)), 1766 selector, 1767 mediaQuery, 1768 featureSelectors: featureSelectors && typeof featureSelectors !== "string" ? featureSelectors : void 0, 1769 fallbackGapValue, 1770 hasLayoutSupport, 1771 name, 1772 elementName, 1773 isStyleVariation, 1774 variationName, 1775 layoutSelector, 1776 layoutHasBlockGapSupport 1777 } 1778 ]; 1779 } 1780 ); 1781 } 1782 var getNodesWithStyles = (tree, blockSelectors) => { 1783 const nodes = []; 1784 if (!tree?.styles) { 1785 return nodes; 1786 } 1787 const responsiveMediaQueries = getResponsiveMediaQueries(tree); 1788 const styles = pickStyleKeys(tree.styles, responsiveMediaQueries); 1789 if (styles) { 1790 nodes.push({ 1791 styles, 1792 selector: ROOT_BLOCK_SELECTOR, 1793 // Root selector (body) styles should not be wrapped in `:root where()` to keep 1794 // specificity at (0,0,1) and maintain backwards compatibility. 1795 skipSelectorWrapper: true 1796 }); 1797 } 1798 Object.entries(import_blocks.__EXPERIMENTAL_ELEMENTS).forEach(([name, selector]) => { 1799 if (tree.styles?.elements?.[name]) { 1800 nodes.push({ 1801 styles: tree.styles?.elements?.[name] ?? {}, 1802 selector, 1803 elementName: name, 1804 // Top level elements that don't use a class name should not receive the 1805 // `:root :where()` wrapper to maintain backwards compatibility. 1806 skipSelectorWrapper: !ELEMENT_CLASS_NAMES[name] 1807 }); 1808 } 1809 }); 1810 Object.entries(tree.styles?.blocks ?? {}).forEach( 1811 ([blockName, node]) => { 1812 const blockStyles = pickStyleAndPseudoKeys( 1813 node, 1814 blockName, 1815 responsiveMediaQueries 1816 ); 1817 const typedNode = node; 1818 const variationNodesToAdd = []; 1819 const variationStyleNodesToAdd = []; 1820 if (typedNode?.variations) { 1821 Object.entries(typedNode.variations).forEach( 1822 ([variationName, variation]) => { 1823 const typedVariation = variation; 1824 const variationStyles = pickStyleAndPseudoKeys( 1825 typedVariation, 1826 blockName, 1827 responsiveMediaQueries 1828 ); 1829 if (typedVariation?.css) { 1830 variationStyles.css = typedVariation.css; 1831 } 1832 const variationSelector = typeof blockSelectors !== "string" ? blockSelectors[blockName]?.styleVariationSelectors?.[variationName] : void 0; 1833 if (variationSelector && typeof blockSelectors !== "string") { 1834 const blockSelector = blockSelectors[blockName]; 1835 variationStyleNodesToAdd.push({ 1836 styles: variationStyles, 1837 selector: variationSelector, 1838 featureSelectors: blockSelector?.featureSelectors, 1839 fallbackGapValue: blockSelector?.fallbackGapValue, 1840 hasLayoutSupport: blockSelector?.hasLayoutSupport, 1841 isStyleVariation: true, 1842 variationName, 1843 layoutSelector: variationSelector + blockSelector.selector, 1844 layoutHasBlockGapSupport: true, 1845 name: blockName 1846 }); 1847 } 1848 Object.entries( 1849 typedVariation?.elements ?? {} 1850 ).forEach(([element, elementStyles]) => { 1851 if (elementStyles && import_blocks.__EXPERIMENTAL_ELEMENTS[element]) { 1852 variationNodesToAdd.push({ 1853 styles: elementStyles, 1854 selector: scopeSelector( 1855 variationSelector, 1856 import_blocks.__EXPERIMENTAL_ELEMENTS[element] 1857 ), 1858 elementName: element, 1859 isStyleVariation: true 1860 }); 1861 } 1862 }); 1863 Object.entries(typedVariation?.blocks ?? {}).forEach( 1864 ([ 1865 variationBlockName, 1866 variationBlockStyles 1867 ]) => { 1868 const variationBlockSelector = typeof blockSelectors !== "string" ? scopeSelector( 1869 variationSelector, 1870 blockSelectors[variationBlockName]?.selector 1871 ) : void 0; 1872 const variationDuotoneSelector = typeof blockSelectors !== "string" ? scopeSelector( 1873 variationSelector, 1874 blockSelectors[variationBlockName]?.duotoneSelector 1875 ) : void 0; 1876 const variationFeatureSelectors = typeof blockSelectors !== "string" ? scopeFeatureSelectors( 1877 variationSelector, 1878 blockSelectors[variationBlockName]?.featureSelectors ?? {} 1879 ) : void 0; 1880 const variationBlockStyleNodes = pickStyleAndPseudoKeys( 1881 variationBlockStyles, 1882 variationBlockName, 1883 responsiveMediaQueries 1884 ); 1885 if (variationBlockStyles?.css) { 1886 variationBlockStyleNodes.css = variationBlockStyles.css; 1887 } 1888 if (!variationBlockSelector || typeof blockSelectors === "string") { 1889 return; 1890 } 1891 variationNodesToAdd.push({ 1892 selector: variationBlockSelector, 1893 name: variationBlockName, 1894 isStyleVariation: true, 1895 duotoneSelector: variationDuotoneSelector, 1896 featureSelectors: variationFeatureSelectors, 1897 fallbackGapValue: blockSelectors[variationBlockName]?.fallbackGapValue, 1898 hasLayoutSupport: blockSelectors[variationBlockName]?.hasLayoutSupport, 1899 styles: variationBlockStyleNodes 1900 }); 1901 Object.entries( 1902 variationBlockStyles.elements ?? {} 1903 ).forEach( 1904 ([ 1905 variationBlockElement, 1906 variationBlockElementStyles 1907 ]) => { 1908 if (variationBlockElementStyles && import_blocks.__EXPERIMENTAL_ELEMENTS[variationBlockElement]) { 1909 variationNodesToAdd.push({ 1910 styles: variationBlockElementStyles, 1911 selector: scopeSelector( 1912 variationBlockSelector, 1913 import_blocks.__EXPERIMENTAL_ELEMENTS[variationBlockElement] 1914 ), 1915 elementName: variationBlockElement, 1916 isStyleVariation: true 1917 }); 1918 } 1919 } 1920 ); 1921 } 1922 ); 1923 } 1924 ); 1925 } 1926 if (typeof blockSelectors !== "string" && blockSelectors?.[blockName]?.selector) { 1927 nodes.push({ 1928 duotoneSelector: blockSelectors[blockName].duotoneSelector, 1929 fallbackGapValue: blockSelectors[blockName].fallbackGapValue, 1930 hasLayoutSupport: blockSelectors[blockName].hasLayoutSupport, 1931 selector: blockSelectors[blockName].selector, 1932 styles: blockStyles, 1933 featureSelectors: blockSelectors[blockName].featureSelectors, 1934 name: blockName 1935 }); 1936 } 1937 nodes.push(...variationStyleNodesToAdd); 1938 Object.entries(typedNode?.elements ?? {}).forEach( 1939 ([elementName, value]) => { 1940 if (typeof blockSelectors !== "string" && value && blockSelectors?.[blockName] && import_blocks.__EXPERIMENTAL_ELEMENTS[elementName]) { 1941 nodes.push({ 1942 styles: value, 1943 selector: blockSelectors[blockName]?.selector.split(",").map((sel) => { 1944 const elementSelectors = import_blocks.__EXPERIMENTAL_ELEMENTS[elementName].split(","); 1945 return elementSelectors.map( 1946 (elementSelector) => sel + " " + elementSelector 1947 ); 1948 }).join(","), 1949 elementName 1950 }); 1951 } 1952 } 1953 ); 1954 nodes.push(...variationNodesToAdd); 1955 } 1956 ); 1957 return nodes; 1958 }; 1959 var getNodesWithSettings = (tree, blockSelectors) => { 1960 const nodes = []; 1961 if (!tree?.settings) { 1962 return nodes; 1963 } 1964 const pickPresets = (treeToPickFrom) => { 1965 let presets2 = {}; 1966 PRESET_METADATA.forEach(({ path }) => { 1967 const value = getValueFromObjectPath(treeToPickFrom, path, false); 1968 if (value !== false) { 1969 presets2 = setImmutably(presets2, path, value); 1970 } 1971 }); 1972 return presets2; 1973 }; 1974 const presets = pickPresets(tree.settings); 1975 const custom = tree.settings?.custom; 1976 if (Object.keys(presets).length > 0 || custom) { 1977 nodes.push({ 1978 presets, 1979 custom, 1980 selector: ROOT_CSS_PROPERTIES_SELECTOR 1981 }); 1982 } 1983 Object.entries(tree.settings?.blocks ?? {}).forEach( 1984 ([blockName, node]) => { 1985 const blockCustom = node.custom; 1986 if (typeof blockSelectors === "string" || !blockSelectors[blockName]) { 1987 return; 1988 } 1989 const blockPresets = pickPresets(node); 1990 if (Object.keys(blockPresets).length > 0 || blockCustom) { 1991 nodes.push({ 1992 presets: blockPresets, 1993 custom: blockCustom, 1994 selector: blockSelectors[blockName]?.selector, 1995 featureSelectors: blockSelectors[blockName]?.featureSelectors 1996 }); 1997 } 1998 } 1999 ); 2000 return nodes; 2001 }; 2002 function resolveFeatureSelector(featureSelectors, featureKey, fallback) { 2003 if (!featureSelectors || typeof featureSelectors === "string") { 2004 return fallback; 2005 } 2006 const feature = featureSelectors[featureKey]; 2007 if (typeof feature === "string") { 2008 return feature; 2009 } 2010 if (typeof feature === "object" && feature.root) { 2011 return feature.root; 2012 } 2013 return fallback; 2014 } 2015 function getPresetVarDeclarations(presets, mergedSettings, { path, valueKey, valueFunc, cssVarInfix }) { 2016 const presetByOrigin = getValueFromObjectPath( 2017 presets, 2018 path, 2019 [] 2020 ); 2021 const declarations = []; 2022 for (const origin of ["default", "theme", "custom"]) { 2023 if (!presetByOrigin[origin]) { 2024 continue; 2025 } 2026 for (const value of presetByOrigin[origin]) { 2027 const slug = kebabCase(value.slug); 2028 if (valueKey && !valueFunc) { 2029 declarations.push( 2030 `--wp--preset--$cssVarInfix}--$slug}: $value[valueKey]}` 2031 ); 2032 } else if (valueFunc && typeof valueFunc === "function") { 2033 declarations.push( 2034 `--wp--preset--$cssVarInfix}--$slug}: $valueFunc( 2035 value, 2036 mergedSettings 2037 )}` 2038 ); 2039 } 2040 } 2041 } 2042 return declarations; 2043 } 2044 var generateCustomProperties = (tree, blockSelectors) => { 2045 const nodes = getNodesWithSettings(tree, blockSelectors); 2046 let ruleset = ""; 2047 for (const { presets, custom, selector, featureSelectors } of nodes) { 2048 const defaultSelector = selector; 2049 const varsBySelector = { 2050 [defaultSelector]: [] 2051 }; 2052 if (tree?.settings) { 2053 for (const metadata of PRESET_METADATA) { 2054 const declarations = getPresetVarDeclarations( 2055 presets, 2056 tree.settings, 2057 metadata 2058 ); 2059 if (declarations.length === 0) { 2060 continue; 2061 } 2062 const target = resolveFeatureSelector( 2063 featureSelectors, 2064 metadata.path[0], 2065 defaultSelector 2066 ); 2067 if (!varsBySelector[target]) { 2068 varsBySelector[target] = []; 2069 } 2070 varsBySelector[target].push(...declarations); 2071 } 2072 } 2073 const customProps = flattenTree(custom, "--wp--custom--", "--"); 2074 if (customProps.length > 0) { 2075 varsBySelector[defaultSelector].push(...customProps); 2076 } 2077 for (const [ruleSelector, declarations] of Object.entries( 2078 varsBySelector 2079 )) { 2080 if (declarations.length > 0) { 2081 ruleset += `$ruleSelector}{$declarations.join(";")};}`; 2082 } 2083 } 2084 } 2085 return ruleset; 2086 }; 2087 function renderStylesNode(node, { 2088 tree, 2089 useRootPaddingAlign, 2090 disableLayoutStyles, 2091 hasBlockGapSupport, 2092 hasFallbackGapSupport, 2093 disableRootPadding 2094 }) { 2095 const { 2096 selector, 2097 selectorSuffix, 2098 mediaQuery, 2099 duotoneSelector, 2100 styles, 2101 fallbackGapValue, 2102 hasLayoutSupport, 2103 featureSelectors, 2104 layoutSelector, 2105 layoutHasBlockGapSupport, 2106 skipSelectorWrapper, 2107 name, 2108 variationName 2109 } = node; 2110 let ruleset = ""; 2111 const effectiveSelector = selectorSuffix ? appendToSelector(selector, selectorSuffix) : selector; 2112 if (featureSelectors && typeof featureSelectors !== "string") { 2113 let featureDeclarations = getFeatureDeclarations( 2114 featureSelectors, 2115 styles 2116 ); 2117 featureDeclarations = updateParagraphTextIndentSelector( 2118 featureDeclarations, 2119 tree.settings, 2120 name 2121 ); 2122 featureDeclarations = updateButtonWidthDeclarations( 2123 featureDeclarations, 2124 tree.settings 2125 ); 2126 Object.entries(featureDeclarations).forEach( 2127 ([featureSelector, declarations]) => { 2128 if (declarations.length) { 2129 let selectorForRule = variationName ? getBlockStyleVariationFeatureSelector( 2130 variationName, 2131 featureSelector 2132 ) : featureSelector; 2133 selectorForRule = selectorSuffix ? appendToSelector(selectorForRule, selectorSuffix) : selectorForRule; 2134 const rules = declarations.join(";"); 2135 ruleset += `:root :where($selectorForRule}){$rules};}`; 2136 } 2137 } 2138 ); 2139 } 2140 if (duotoneSelector) { 2141 const duotoneStyles = {}; 2142 if (styles?.filter) { 2143 duotoneStyles.filter = styles.filter; 2144 delete styles.filter; 2145 } 2146 const duotoneDeclarations = getStylesDeclarations(duotoneStyles); 2147 if (duotoneDeclarations.length) { 2148 ruleset += `$duotoneSelector}{$duotoneDeclarations.join( 2149 ";" 2150 )};}`; 2151 } 2152 } 2153 const selectorForLayout = layoutSelector ?? effectiveSelector; 2154 const hasBlockGapSupportForLayout = layoutHasBlockGapSupport ?? hasBlockGapSupport; 2155 if (!disableLayoutStyles && (ROOT_BLOCK_SELECTOR === selectorForLayout || hasLayoutSupport)) { 2156 ruleset += getLayoutStyles({ 2157 style: styles, 2158 selector: selectorForLayout, 2159 hasBlockGapSupport: hasBlockGapSupportForLayout, 2160 hasFallbackGapSupport, 2161 fallbackGapValue 2162 }); 2163 } 2164 const styleDeclarations = getStylesDeclarations( 2165 styles, 2166 effectiveSelector, 2167 useRootPaddingAlign, 2168 tree, 2169 disableRootPadding 2170 ); 2171 if (styleDeclarations?.length) { 2172 const generalSelector = skipSelectorWrapper ? effectiveSelector : `:root :where($effectiveSelector})`; 2173 ruleset += `$generalSelector}{$styleDeclarations.join(";")};}`; 2174 } 2175 if (styles?.css) { 2176 ruleset += processCSSNesting( 2177 styles.css, 2178 `:root :where($effectiveSelector})` 2179 ); 2180 } 2181 if (mediaQuery && ruleset) { 2182 return `$mediaQuery}{$ruleset}}`; 2183 } 2184 return ruleset; 2185 } 2186 var transformToStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles = false, disableRootPadding = false, styleOptions = {}) => { 2187 const options = { 2188 blockGap: true, 2189 blockStyles: true, 2190 layoutStyles: true, 2191 marginReset: true, 2192 presets: true, 2193 rootPadding: true, 2194 variationStyles: false, 2195 ...styleOptions 2196 }; 2197 const normalizedTree = normalizeStyleStateAliases(tree); 2198 const nodesWithStyles = getNodesWithStyles( 2199 normalizedTree, 2200 blockSelectors 2201 ); 2202 const nodesWithSettings = getNodesWithSettings( 2203 normalizedTree, 2204 blockSelectors 2205 ); 2206 const useRootPaddingAlign = normalizedTree?.settings?.useRootPaddingAwareAlignments; 2207 const { contentSize, wideSize } = normalizedTree?.settings?.layout || {}; 2208 const hasBodyStyles = options.marginReset || options.rootPadding || options.layoutStyles; 2209 let ruleset = ""; 2210 if (options.presets && (contentSize || wideSize)) { 2211 ruleset += `$ROOT_CSS_PROPERTIES_SELECTOR} {`; 2212 ruleset = contentSize ? ruleset + ` --wp--style--global--content-size: $contentSize};` : ruleset; 2213 ruleset = wideSize ? ruleset + ` --wp--style--global--wide-size: $wideSize};` : ruleset; 2214 ruleset += "}"; 2215 } 2216 if (hasBodyStyles) { 2217 ruleset += ":where(body) {margin: 0;"; 2218 if (options.rootPadding && useRootPaddingAlign) { 2219 ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } 2220 .has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } 2221 .has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } 2222 .has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; } 2223 .has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0; 2224 `; 2225 } 2226 ruleset += "}"; 2227 } 2228 if (options.blockStyles) { 2229 const responsiveMediaQueries = getResponsiveMediaQueries(tree); 2230 nodesWithStyles.forEach((node) => { 2231 if (node.isStyleVariation && !options.variationStyles) { 2232 return; 2233 } 2234 const responsiveNodes = getResponsiveStyleNodes( 2235 node, 2236 responsiveMediaQueries 2237 ); 2238 [ 2239 node, 2240 ...responsiveNodes, 2241 ...getPseudoStyleNodes(node), 2242 ...responsiveNodes.flatMap(getPseudoStyleNodes) 2243 ].forEach((expandedNode) => { 2244 ruleset += renderStylesNode(expandedNode, { 2245 tree: normalizedTree, 2246 useRootPaddingAlign, 2247 disableLayoutStyles, 2248 hasBlockGapSupport, 2249 hasFallbackGapSupport, 2250 disableRootPadding 2251 }); 2252 }); 2253 }); 2254 } 2255 if (options.layoutStyles) { 2256 ruleset = ruleset + ".wp-site-blocks > .alignleft { float: left; margin-right: 2em; }"; 2257 ruleset = ruleset + ".wp-site-blocks > .alignright { float: right; margin-left: 2em; }"; 2258 ruleset = ruleset + ".wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }"; 2259 } 2260 if (options.blockGap && hasBlockGapSupport) { 2261 const gapValue = getGapCSSValue(normalizedTree?.styles?.spacing?.blockGap) || "0.5em"; 2262 ruleset = ruleset + `:root :where(.wp-site-blocks) > * { margin-block-start: $gapValue}; margin-block-end: 0; }`; 2263 ruleset = ruleset + ":root :where(.wp-site-blocks) > :first-child { margin-block-start: 0; }"; 2264 ruleset = ruleset + ":root :where(.wp-site-blocks) > :last-child { margin-block-end: 0; }"; 2265 } 2266 if (options.presets) { 2267 nodesWithSettings.forEach(({ selector, presets }) => { 2268 if (ROOT_BLOCK_SELECTOR === selector || ROOT_CSS_PROPERTIES_SELECTOR === selector) { 2269 selector = ""; 2270 } 2271 const classes = getPresetsClasses(selector, presets); 2272 if (classes.length > 0) { 2273 ruleset += classes; 2274 } 2275 }); 2276 } 2277 return ruleset; 2278 }; 2279 function generateSvgFilters(tree, blockSelectors) { 2280 const nodesWithSettings = getNodesWithSettings(tree, blockSelectors); 2281 return nodesWithSettings.flatMap(({ presets }) => { 2282 return getPresetsSvgFilters(presets); 2283 }); 2284 } 2285 var getSelectorsConfig = (blockType, rootSelector) => { 2286 if (blockType?.selectors && Object.keys(blockType.selectors).length > 0) { 2287 return blockType.selectors; 2288 } 2289 const config = { 2290 root: rootSelector 2291 }; 2292 Object.entries(BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS).forEach( 2293 ([featureKey, featureName]) => { 2294 const featureSelector = getBlockSelector(blockType, featureKey); 2295 if (featureSelector) { 2296 config[featureName] = featureSelector; 2297 } 2298 } 2299 ); 2300 return config; 2301 }; 2302 var getBlockSelectors = (blockTypes, variationInstanceId) => { 2303 const { getBlockStyles } = (0, import_data2.select)(import_blocks.store); 2304 const result = {}; 2305 blockTypes.forEach((blockType) => { 2306 const name = blockType.name; 2307 const selector = getBlockSelector(blockType); 2308 if (!selector) { 2309 return; 2310 } 2311 let duotoneSelector = getBlockSelector(blockType, "filter.duotone"); 2312 if (!duotoneSelector) { 2313 const rootSelector = getBlockSelector(blockType); 2314 const duotoneSupport = (0, import_blocks.getBlockSupport)( 2315 blockType, 2316 "color.__experimentalDuotone", 2317 false 2318 ); 2319 if (typeof duotoneSupport === "string" && rootSelector) { 2320 duotoneSelector = scopeSelector(rootSelector, duotoneSupport); 2321 } 2322 } 2323 const hasLayoutSupport = !!blockType?.supports?.layout || !!blockType?.supports?.__experimentalLayout; 2324 const fallbackGapValue = ( 2325 // @ts-expect-error 2326 blockType?.supports?.spacing?.blockGap?.__experimentalDefault 2327 ); 2328 const blockStyleVariations = getBlockStyles(name); 2329 const styleVariationSelectors = {}; 2330 blockStyleVariations?.forEach((variation) => { 2331 const variationSuffix = variationInstanceId ? `-$variationInstanceId}` : ""; 2332 const variationName = `$variation.name}$variationSuffix}`; 2333 const styleVariationSelector = getBlockStyleVariationSelector( 2334 variationName, 2335 selector 2336 ); 2337 styleVariationSelectors[variationName] = styleVariationSelector; 2338 }); 2339 const featureSelectors = getSelectorsConfig(blockType, selector); 2340 result[name] = { 2341 duotoneSelector: duotoneSelector ?? void 0, 2342 fallbackGapValue, 2343 featureSelectors: Object.keys(featureSelectors).length ? featureSelectors : void 0, 2344 hasLayoutSupport, 2345 name, 2346 selector, 2347 styleVariationSelectors: blockStyleVariations?.length ? styleVariationSelectors : void 0 2348 }; 2349 }); 2350 return result; 2351 }; 2352 function updateConfigWithSeparator(config) { 2353 const blocks = config.styles?.blocks; 2354 const separatorBlock = blocks?.["core/separator"]; 2355 const needsSeparatorStyleUpdate = separatorBlock && separatorBlock.color?.background && !separatorBlock.color?.text && !separatorBlock.border?.color; 2356 if (needsSeparatorStyleUpdate) { 2357 return { 2358 ...config, 2359 styles: { 2360 ...config.styles, 2361 blocks: { 2362 ...blocks, 2363 "core/separator": { 2364 ...separatorBlock, 2365 color: { 2366 ...separatorBlock.color, 2367 text: separatorBlock.color?.background 2368 } 2369 } 2370 } 2371 } 2372 }; 2373 } 2374 return config; 2375 } 2376 function processCSSNesting(css, blockSelector) { 2377 let processedCSS = ""; 2378 if (!css || css.trim() === "") { 2379 return processedCSS; 2380 } 2381 const parts = css.split("&"); 2382 parts.forEach((part) => { 2383 if (!part || part.trim() === "") { 2384 return; 2385 } 2386 const isRootCss = !part.includes("{"); 2387 if (isRootCss) { 2388 processedCSS += `:root :where($blockSelector}){$part.trim()}}`; 2389 } else { 2390 const splitPart = part.replace("}", "").split("{"); 2391 if (splitPart.length !== 2) { 2392 return; 2393 } 2394 const [nestedSelector, cssValue] = splitPart; 2395 const matches = nestedSelector.match(/([>+~\s]*::[a-zA-Z-]+)/); 2396 const pseudoPart = matches ? matches[1] : ""; 2397 const withoutPseudoElement = matches ? nestedSelector.replace(pseudoPart, "").trim() : nestedSelector.trim(); 2398 let combinedSelector; 2399 if (withoutPseudoElement === "") { 2400 combinedSelector = blockSelector; 2401 } else { 2402 combinedSelector = nestedSelector.startsWith(" ") ? scopeSelector(blockSelector, withoutPseudoElement) : appendToSelector(blockSelector, withoutPseudoElement); 2403 } 2404 processedCSS += `:root :where($combinedSelector})$pseudoPart}{$cssValue.trim()}}`; 2405 } 2406 }); 2407 return processedCSS; 2408 } 2409 function generateGlobalStyles(config = {}, blockTypes = [], options = {}) { 2410 const { 2411 hasBlockGapSupport: hasBlockGapSupportOption, 2412 hasFallbackGapSupport: hasFallbackGapSupportOption, 2413 disableLayoutStyles = false, 2414 disableRootPadding = false, 2415 styleOptions = {} 2416 } = options; 2417 const blocks = blockTypes.length > 0 ? blockTypes : (0, import_blocks.getBlockTypes)(); 2418 const blockGap = getSetting(config, "spacing.blockGap"); 2419 const hasBlockGapSupport = hasBlockGapSupportOption ?? blockGap !== null; 2420 const hasFallbackGapSupport = hasFallbackGapSupportOption ?? !hasBlockGapSupport; 2421 if (!config?.styles || !config?.settings) { 2422 return [[], {}]; 2423 } 2424 const updatedConfig = updateConfigWithSeparator(config); 2425 const blockSelectors = getBlockSelectors(blocks); 2426 const customProperties = generateCustomProperties( 2427 updatedConfig, 2428 blockSelectors 2429 ); 2430 const globalStyles = transformToStyles( 2431 updatedConfig, 2432 blockSelectors, 2433 hasBlockGapSupport, 2434 hasFallbackGapSupport, 2435 disableLayoutStyles, 2436 disableRootPadding, 2437 styleOptions 2438 ); 2439 const svgs = generateSvgFilters(updatedConfig, blockSelectors); 2440 const styles = [ 2441 { 2442 css: customProperties, 2443 isGlobalStyles: true 2444 }, 2445 { 2446 css: globalStyles, 2447 isGlobalStyles: true 2448 }, 2449 // 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. 2450 { 2451 css: updatedConfig?.styles?.css ?? "", 2452 isGlobalStyles: true 2453 }, 2454 { 2455 assets: svgs, 2456 __unstableType: "svgs", 2457 isGlobalStyles: true 2458 } 2459 ]; 2460 blocks.forEach((blockType) => { 2461 const blockStyles = updatedConfig?.styles?.blocks?.[blockType.name]; 2462 if (blockStyles?.css) { 2463 const { featureSelectors } = blockSelectors[blockType.name]; 2464 const cssFeatureSelector = typeof featureSelectors === "object" ? featureSelectors?.css : void 0; 2465 let resolvedCssSelector; 2466 if (typeof cssFeatureSelector === "string") { 2467 resolvedCssSelector = cssFeatureSelector; 2468 } else if (typeof cssFeatureSelector === "object") { 2469 resolvedCssSelector = cssFeatureSelector?.root; 2470 } 2471 const selector = resolvedCssSelector ?? blockSelectors[blockType.name].selector; 2472 styles.push({ 2473 css: processCSSNesting(blockStyles.css, selector), 2474 isGlobalStyles: true 2475 }); 2476 } 2477 }); 2478 return [styles, updatedConfig.settings]; 2479 } 2480 2481 // packages/lazy-editor/build-module/hooks/use-editor-settings.mjs 2482 var import_core_data3 = __toESM(require_core_data(), 1); 2483 var import_element2 = __toESM(require_element(), 1); 2484 var import_data4 = __toESM(require_data(), 1); 2485 2486 // packages/lazy-editor/build-module/hooks/use-global-styles.mjs 2487 var import_core_data2 = __toESM(require_core_data(), 1); 2488 var import_data3 = __toESM(require_data(), 1); 2489 var import_element = __toESM(require_element(), 1); 2490 function useUserGlobalStyles(id) { 2491 const { userGlobalStyles } = (0, import_data3.useSelect)( 2492 (select2) => { 2493 const { getEntityRecord, getEditedEntityRecord, canUser } = select2(import_core_data2.store); 2494 const userCanEditGlobalStyles = canUser("update", { 2495 kind: "root", 2496 name: "globalStyles", 2497 id 2498 }); 2499 let record; 2500 if ( 2501 /* 2502 * Test that the OPTIONS request for user capabilities is complete 2503 * before fetching the global styles entity record. 2504 * This is to avoid fetching the global styles entity unnecessarily. 2505 */ 2506 typeof userCanEditGlobalStyles === "boolean" 2507 ) { 2508 if (userCanEditGlobalStyles) { 2509 record = getEditedEntityRecord( 2510 "root", 2511 "globalStyles", 2512 id 2513 ); 2514 } else { 2515 record = getEntityRecord("root", "globalStyles", id, { 2516 context: "view" 2517 }); 2518 } 2519 } 2520 return { 2521 userGlobalStyles: record 2522 }; 2523 }, 2524 [id] 2525 ); 2526 return (0, import_element.useMemo)(() => { 2527 if (!userGlobalStyles) { 2528 return { 2529 user: void 0 2530 }; 2531 } 2532 const user = userGlobalStyles; 2533 return { 2534 user 2535 }; 2536 }, [userGlobalStyles]); 2537 } 2538 2539 // packages/lazy-editor/build-module/lock-unlock.mjs 2540 var import_private_apis = __toESM(require_private_apis(), 1); 2541 var { unlock } = (0, import_private_apis.__dangerousOptInToUnstableAPIsOnlyForCoreModules)( 2542 "I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.", 2543 "@wordpress/lazy-editor" 2544 ); 2545 2546 // packages/lazy-editor/build-module/hooks/use-editor-settings.mjs 2547 function useEditorSettings({ stylesId }) { 2548 const { editorSettings } = (0, import_data4.useSelect)( 2549 (select2) => ({ 2550 editorSettings: unlock( 2551 select2(import_core_data3.store) 2552 ).getEditorSettings() 2553 }), 2554 [] 2555 ); 2556 const { user: globalStyles } = useUserGlobalStyles(stylesId); 2557 const [globalStylesCSS] = generateGlobalStyles(globalStyles); 2558 const hasEditorSettings = !!editorSettings; 2559 const styles = (0, import_element2.useMemo)(() => { 2560 if (!hasEditorSettings) { 2561 return []; 2562 } 2563 return [ 2564 ...editorSettings?.styles ?? [], 2565 ...globalStylesCSS 2566 ]; 2567 }, [hasEditorSettings, editorSettings?.styles, globalStylesCSS]); 2568 return { 2569 isReady: hasEditorSettings, 2570 editorSettings: (0, import_element2.useMemo)( 2571 () => ({ 2572 ...editorSettings ?? {}, 2573 styles 2574 }), 2575 [editorSettings, styles] 2576 ) 2577 }; 2578 } 2579 2580 // packages/asset-loader/build-module/index.mjs 2581 function injectImportMap(scriptModules) { 2582 if (!scriptModules || Object.keys(scriptModules).length === 0) { 2583 return; 2584 } 2585 const existingMapElement = document.querySelector( 2586 "script#wp-importmap[type=importmap]" 2587 ); 2588 if (existingMapElement) { 2589 try { 2590 const existingMap = JSON.parse(existingMapElement.text); 2591 if (!existingMap.imports) { 2592 existingMap.imports = {}; 2593 } 2594 existingMap.imports = { 2595 ...existingMap.imports, 2596 ...scriptModules 2597 }; 2598 existingMapElement.text = JSON.stringify(existingMap, null, 2); 2599 } catch (error) { 2600 console.error("Failed to parse or update import map:", error); 2601 } 2602 } else { 2603 const script = document.createElement("script"); 2604 script.type = "importmap"; 2605 script.id = "wp-importmap"; 2606 script.text = JSON.stringify( 2607 { 2608 imports: scriptModules 2609 }, 2610 null, 2611 2 2612 ); 2613 document.head.appendChild(script); 2614 } 2615 } 2616 function loadStylesheet(handle, styleData) { 2617 return new Promise((resolve) => { 2618 if (!styleData.src) { 2619 resolve(); 2620 return; 2621 } 2622 const existingLink = document.getElementById(handle + "-css"); 2623 if (existingLink) { 2624 resolve(); 2625 return; 2626 } 2627 const link = document.createElement("link"); 2628 link.rel = "stylesheet"; 2629 link.href = styleData.src + (styleData.version ? "?ver=" + styleData.version : ""); 2630 link.id = handle + "-css"; 2631 link.media = styleData.media || "all"; 2632 link.onload = () => resolve(); 2633 link.onerror = () => { 2634 console.error(`Failed to load stylesheet: $handle}`); 2635 resolve(); 2636 }; 2637 document.head.appendChild(link); 2638 }); 2639 } 2640 function loadScript(handle, scriptData) { 2641 if (!scriptData.src) { 2642 const marker = document.createElement("script"); 2643 marker.id = handle + "-js"; 2644 marker.textContent = "// Processed: " + handle; 2645 return marker; 2646 } 2647 const script = document.createElement("script"); 2648 script.src = scriptData.src + (scriptData.version ? "?ver=" + scriptData.version : ""); 2649 script.id = handle + "-js"; 2650 script.async = false; 2651 return script; 2652 } 2653 function injectInlineStyle(handle, inlineStyle, position) { 2654 let styleContent = ""; 2655 if (Array.isArray(inlineStyle)) { 2656 styleContent = inlineStyle.join("\n"); 2657 } else if (typeof inlineStyle === "string") { 2658 styleContent = inlineStyle; 2659 } 2660 if (styleContent && styleContent.trim()) { 2661 const styleId = handle + "-" + position + "-inline-css"; 2662 if (!document.getElementById(styleId)) { 2663 const style = document.createElement("style"); 2664 style.id = styleId; 2665 style.textContent = styleContent.trim(); 2666 document.head.appendChild(style); 2667 } 2668 } 2669 } 2670 function injectInlineScript(handle, inlineScript, position) { 2671 let scriptContent = inlineScript; 2672 if (Array.isArray(scriptContent)) { 2673 scriptContent = scriptContent.join("\n"); 2674 } 2675 const script = document.createElement("script"); 2676 script.id = handle + "-" + position + "-js"; 2677 script.textContent = scriptContent.trim(); 2678 return script; 2679 } 2680 function buildDependencyOrderedList(assetsData) { 2681 const visited = /* @__PURE__ */ new Set(); 2682 const visiting = /* @__PURE__ */ new Set(); 2683 const orderedList = []; 2684 function visit(handle) { 2685 if (visited.has(handle)) { 2686 return; 2687 } 2688 if (visiting.has(handle)) { 2689 console.warn( 2690 `Circular dependency detected for handle: $handle}` 2691 ); 2692 return; 2693 } 2694 visiting.add(handle); 2695 if (assetsData[handle]) { 2696 const deps = assetsData[handle].deps || []; 2697 deps.forEach((dep) => { 2698 if (assetsData[dep]) { 2699 visit(dep); 2700 } 2701 }); 2702 } 2703 visiting.delete(handle); 2704 visited.add(handle); 2705 if (assetsData[handle]) { 2706 orderedList.push(handle); 2707 } 2708 } 2709 Object.keys(assetsData).forEach((handle) => { 2710 visit(handle); 2711 }); 2712 return orderedList; 2713 } 2714 async function performScriptLoad(scriptElements, destination) { 2715 let parallel = []; 2716 for (const scriptElement of scriptElements) { 2717 if (scriptElement.src) { 2718 const loader = Promise.withResolvers(); 2719 scriptElement.onload = () => loader.resolve(); 2720 scriptElement.onerror = () => { 2721 console.error(`Failed to load script: $scriptElement.id}`); 2722 loader.resolve(); 2723 }; 2724 parallel.push(loader.promise); 2725 } else { 2726 await Promise.all(parallel); 2727 parallel = []; 2728 } 2729 destination.appendChild(scriptElement); 2730 } 2731 await Promise.all(parallel); 2732 parallel = []; 2733 } 2734 async function loadAssets(scriptsData, inlineScripts, stylesData, inlineStyles, htmlTemplates, scriptModules) { 2735 if (scriptModules) { 2736 injectImportMap(scriptModules); 2737 } 2738 const orderedStyles = buildDependencyOrderedList(stylesData); 2739 const orderedScripts = buildDependencyOrderedList(scriptsData); 2740 const stylePromises = []; 2741 for (const handle of orderedStyles) { 2742 const beforeInline = inlineStyles.before?.[handle]; 2743 if (beforeInline) { 2744 injectInlineStyle(handle, beforeInline, "before"); 2745 } 2746 stylePromises.push(loadStylesheet(handle, stylesData[handle])); 2747 const afterInline = inlineStyles.after?.[handle]; 2748 if (afterInline) { 2749 injectInlineStyle(handle, afterInline, "after"); 2750 } 2751 } 2752 const scriptElements = []; 2753 for (const handle of orderedScripts) { 2754 const beforeInline = inlineScripts.before?.[handle]; 2755 if (beforeInline) { 2756 scriptElements.push( 2757 injectInlineScript(handle, beforeInline, "before") 2758 ); 2759 } 2760 scriptElements.push(loadScript(handle, scriptsData[handle])); 2761 const afterInline = inlineScripts.after?.[handle]; 2762 if (afterInline) { 2763 scriptElements.push( 2764 injectInlineScript(handle, afterInline, "after") 2765 ); 2766 } 2767 } 2768 const scriptsPromise = performScriptLoad(scriptElements, document.body); 2769 await Promise.all([Promise.all(stylePromises), scriptsPromise]); 2770 if (htmlTemplates && htmlTemplates.length > 0) { 2771 htmlTemplates.forEach((templateHtml) => { 2772 const scriptMatch = templateHtml.match( 2773 /<script([^>]*)>(.*?)<\/script>/is 2774 ); 2775 if (scriptMatch) { 2776 const attributes = scriptMatch[1]; 2777 const content = scriptMatch[2]; 2778 const script = document.createElement("script"); 2779 const idMatch = attributes.match(/id=["']([^"']+)["']/); 2780 if (idMatch) { 2781 script.id = idMatch[1]; 2782 } 2783 const typeMatch = attributes.match(/type=["']([^"']+)["']/); 2784 if (typeMatch) { 2785 script.type = typeMatch[1]; 2786 } 2787 script.textContent = content; 2788 document.body.appendChild(script); 2789 } 2790 }); 2791 } 2792 } 2793 var index_default = loadAssets; 2794 2795 // packages/lazy-editor/build-module/hooks/use-editor-assets.mjs 2796 var import_core_data4 = __toESM(require_core_data(), 1); 2797 var import_element3 = __toESM(require_element(), 1); 2798 var import_data5 = __toESM(require_data(), 1); 2799 var loadAssetsPromise; 2800 async function loadEditorAssets() { 2801 const load = async () => { 2802 const editorAssets = await unlock( 2803 (0, import_data5.resolveSelect)(import_core_data4.store) 2804 ).getEditorAssets(); 2805 await index_default( 2806 editorAssets.scripts || {}, 2807 editorAssets.inline_scripts || { before: {}, after: {} }, 2808 editorAssets.styles || {}, 2809 editorAssets.inline_styles || { before: {}, after: {} }, 2810 editorAssets.html_templates || [], 2811 editorAssets.script_modules || {} 2812 ); 2813 }; 2814 if (!loadAssetsPromise) { 2815 loadAssetsPromise = load(); 2816 } 2817 return loadAssetsPromise; 2818 } 2819 function useEditorAssets() { 2820 const editorAssets = (0, import_data5.useSelect)((select2) => { 2821 return unlock(select2(import_core_data4.store)).getEditorAssets(); 2822 }, []); 2823 const [assetsLoaded, setAssetsLoaded] = (0, import_element3.useState)(false); 2824 (0, import_element3.useEffect)(() => { 2825 if (editorAssets && !assetsLoaded) { 2826 loadEditorAssets().then(() => { 2827 setAssetsLoaded(true); 2828 }).catch((error) => { 2829 console.error("Failed to load editor assets:", error); 2830 }); 2831 } 2832 }, [editorAssets, assetsLoaded]); 2833 return { 2834 isReady: !!editorAssets && assetsLoaded, 2835 assetsLoaded 2836 }; 2837 } 2838 2839 // packages/lazy-editor/build-module/components/editor/index.mjs 2840 var import_jsx_runtime = __toESM(require_jsx_runtime(), 1); 2841 var { Editor: PrivateEditor, BackButton } = unlock(import_editor.privateApis); 2842 function Editor({ 2843 postType, 2844 postId, 2845 settings, 2846 backButton 2847 }) { 2848 const homePage = (0, import_data6.useSelect)( 2849 (select2) => { 2850 if (postType || postId) { 2851 return null; 2852 } 2853 const { getHomePage } = unlock(select2(import_core_data5.store)); 2854 return getHomePage(); 2855 }, 2856 [postType, postId] 2857 ); 2858 const resolvedPostType = postType || homePage?.postType; 2859 const resolvedPostId = postId || homePage?.postId; 2860 const templateId = (0, import_data6.useSelect)( 2861 (select2) => { 2862 if (!resolvedPostType || !resolvedPostId) { 2863 return void 0; 2864 } 2865 if (resolvedPostType === "wp_template") { 2866 return resolvedPostId; 2867 } 2868 return unlock(select2(import_core_data5.store)).getTemplateId( 2869 resolvedPostType, 2870 resolvedPostId 2871 ); 2872 }, 2873 [resolvedPostType, resolvedPostId] 2874 ); 2875 const stylesId = useStylesId({ templateId }); 2876 const { isReady: settingsReady, editorSettings } = useEditorSettings({ 2877 stylesId 2878 }); 2879 const { isReady: assetsReady } = useEditorAssets(); 2880 const finalSettings = (0, import_element4.useMemo)( 2881 () => ({ 2882 ...editorSettings, 2883 ...settings 2884 }), 2885 [editorSettings, settings] 2886 ); 2887 if (!settingsReady || !assetsReady) { 2888 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( 2889 "div", 2890 { 2891 style: { 2892 display: "flex", 2893 justifyContent: "center", 2894 alignItems: "center", 2895 height: "100vh" 2896 }, 2897 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {}) 2898 } 2899 ); 2900 } 2901 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( 2902 PrivateEditor, 2903 { 2904 postType: resolvedPostType, 2905 postId: resolvedPostId, 2906 templateId, 2907 settings: finalSettings, 2908 styles: finalSettings.styles, 2909 children: backButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BackButton, { children: backButton }) 2910 } 2911 ); 2912 } 2913 2914 // packages/lazy-editor/build-module/components/preview/index.mjs 2915 var import_i18n = __toESM(require_i18n(), 1); 2916 var import_element5 = __toESM(require_element(), 1); 2917 var import_block_editor = __toESM(require_block_editor(), 1); 2918 var import_editor2 = __toESM(require_editor(), 1); 2919 var import_blocks2 = __toESM(require_blocks(), 1); 2920 var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1); 2921 if (typeof document !== "undefined" && true && !document.head.querySelector("style[data-wp-hash='95327475c1']")) { 2922 const style = document.createElement("style"); 2923 style.setAttribute("data-wp-hash", "95327475c1"); 2924 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}")); 2925 document.head.appendChild(style); 2926 } 2927 var { useStyle } = unlock(import_editor2.privateApis); 2928 function PreviewContent({ 2929 blocks, 2930 content, 2931 description 2932 }) { 2933 const descriptionId = (0, import_element5.useId)(); 2934 const backgroundColor = useStyle("color.background"); 2935 const actualBlocks = (0, import_element5.useMemo)(() => { 2936 return blocks ?? (0, import_blocks2.parse)(content, { 2937 __unstableSkipMigrationLogs: true 2938 }); 2939 }, [content, blocks]); 2940 const isEmpty = !actualBlocks?.length; 2941 return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)( 2942 "div", 2943 { 2944 className: "lazy-editor-block-preview__container", 2945 style: { backgroundColor }, 2946 "aria-describedby": !!description ? descriptionId : void 0, 2947 children: [ 2948 isEmpty && (0, import_i18n.__)("Empty."), 2949 !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 }) }), 2950 !!description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { hidden: true, id: descriptionId, children: description }) 2951 ] 2952 } 2953 ); 2954 } 2955 function Preview({ 2956 blocks, 2957 content, 2958 description 2959 }) { 2960 const stylesId = useStylesId(); 2961 const { isReady: settingsReady, editorSettings } = useEditorSettings({ 2962 stylesId 2963 }); 2964 const { isReady: assetsReady } = useEditorAssets(); 2965 const finalSettings = (0, import_element5.useMemo)( 2966 () => ({ 2967 ...editorSettings, 2968 isPreviewMode: true 2969 }), 2970 [editorSettings] 2971 ); 2972 if (!settingsReady || !assetsReady) { 2973 return null; 2974 } 2975 return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_block_editor.BlockEditorProvider, { settings: finalSettings, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)( 2976 PreviewContent, 2977 { 2978 blocks, 2979 content, 2980 description 2981 } 2982 ) }); 2983 } 2984 export { 2985 Editor, 2986 Preview, 2987 loadEditorAssets, 2988 useEditorAssets, 2989 useEditorSettings 2990 };
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated : Sat Jul 25 08:20:20 2026 | Cross-referenced by PHPXref |