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