Edit File by line

});

[34000] Fix | Delete

} else if (getValueFromObjectPath(blockStyles, pathToValue, false)) {

[34001] Fix | Delete

const cssProperty = key.startsWith('--') ? key : use_global_styles_output_kebabCase(key);

[34002] Fix | Delete

declarations.push(`${cssProperty}: ${compileStyleValue(getValueFromObjectPath(blockStyles, pathToValue))}`);

[34003] Fix | Delete

}

[34004] Fix | Delete

return declarations;

[34005] Fix | Delete

}, []);

[34006] Fix | Delete

[34007] Fix | Delete

// The goal is to move everything to server side generated engine styles

[34008] Fix | Delete

// This is temporary as we absorb more and more styles into the engine.

[34009] Fix | Delete

const extraRules = (0,external_wp_styleEngine_namespaceObject.getCSSRules)(blockStyles);

[34010] Fix | Delete

extraRules.forEach(rule => {

[34011] Fix | Delete

// Don't output padding properties if padding variables are set or if we're not editing a full template.

[34012] Fix | Delete

if (isRoot && (useRootPaddingAlign || disableRootPadding) && rule.key.startsWith('padding')) {

[34013] Fix | Delete

return;

[34014] Fix | Delete

}

[34015] Fix | Delete

const cssProperty = rule.key.startsWith('--') ? rule.key : use_global_styles_output_kebabCase(rule.key);

[34016] Fix | Delete

let ruleValue = rule.value;

[34017] Fix | Delete

if (typeof ruleValue !== 'string' && ruleValue?.ref) {

[34018] Fix | Delete

const refPath = ruleValue.ref.split('.');

[34019] Fix | Delete

ruleValue = compileStyleValue(getValueFromObjectPath(tree, refPath));

[34020] Fix | Delete

// Presence of another ref indicates a reference to another dynamic value.

[34021] Fix | Delete

// Pointing to another dynamic value is not supported.

[34022] Fix | Delete

if (!ruleValue || ruleValue?.ref) {

[34023] Fix | Delete

return;

[34024] Fix | Delete

}

[34025] Fix | Delete

}

[34026] Fix | Delete

[34027] Fix | Delete

// Calculate fluid typography rules where available.

[34028] Fix | Delete

if (cssProperty === 'font-size') {

[34029] Fix | Delete

[34030] Fix | Delete

* getTypographyFontSizeValue() will check

[34031] Fix | Delete

* if fluid typography has been activated and also

[34032] Fix | Delete

* whether the incoming value can be converted to a fluid value.

[34033] Fix | Delete

* Values that already have a "clamp()" function will not pass the test,

[34034] Fix | Delete

* and therefore the original $value will be returned.

[34035] Fix | Delete

[34036] Fix | Delete

ruleValue = getTypographyFontSizeValue({

[34037] Fix | Delete

size: ruleValue

[34038] Fix | Delete

}, tree?.settings);

[34039] Fix | Delete

}

[34040] Fix | Delete

[34041] Fix | Delete

// For aspect ratio to work, other dimensions rules (and Cover block defaults) must be unset.

[34042] Fix | Delete

// This ensures that a fixed height does not override the aspect ratio.

[34043] Fix | Delete

if (cssProperty === 'aspect-ratio') {

[34044] Fix | Delete

output.push('min-height: unset');

[34045] Fix | Delete

}

[34046] Fix | Delete

output.push(`${cssProperty}: ${ruleValue}`);

[34047] Fix | Delete

});

[34048] Fix | Delete

return output;

[34049] Fix | Delete

}

[34050] Fix | Delete

[34051] Fix | Delete

/**

[34052] Fix | Delete

* Get generated CSS for layout styles by looking up layout definitions provided

[34053] Fix | Delete

* in theme.json, and outputting common layout styles, and specific blockGap values.

[34054] Fix | Delete

[34055] Fix | Delete

* @param {Object} props

[34056] Fix | Delete

* @param {Object} props.layoutDefinitions Layout definitions, keyed by layout type.

[34057] Fix | Delete

* @param {Object} props.style A style object containing spacing values.

[34058] Fix | Delete

* @param {string} props.selector Selector used to group together layout styling rules.

[34059] Fix | Delete

* @param {boolean} props.hasBlockGapSupport Whether or not the theme opts-in to blockGap support.

[34060] Fix | Delete

* @param {boolean} props.hasFallbackGapSupport Whether or not the theme allows fallback gap styles.

[34061] Fix | Delete

* @param {?string} props.fallbackGapValue An optional fallback gap value if no real gap value is available.

[34062] Fix | Delete

* @return {string} Generated CSS rules for the layout styles.

[34063] Fix | Delete

[34064] Fix | Delete

function getLayoutStyles({

[34065] Fix | Delete

layoutDefinitions = LAYOUT_DEFINITIONS,

[34066] Fix | Delete

style,

[34067] Fix | Delete

selector,

[34068] Fix | Delete

hasBlockGapSupport,

[34069] Fix | Delete

hasFallbackGapSupport,

[34070] Fix | Delete

fallbackGapValue

[34071] Fix | Delete

}) {

[34072] Fix | Delete

let ruleset = '';

[34073] Fix | Delete

let gapValue = hasBlockGapSupport ? getGapCSSValue(style?.spacing?.blockGap) : '';

[34074] Fix | Delete

[34075] Fix | Delete

// Ensure a fallback gap value for the root layout definitions,

[34076] Fix | Delete

// and use a fallback value if one is provided for the current block.

[34077] Fix | Delete

if (hasFallbackGapSupport) {

[34078] Fix | Delete

if (selector === ROOT_BLOCK_SELECTOR) {

[34079] Fix | Delete

gapValue = !gapValue ? '0.5em' : gapValue;

[34080] Fix | Delete

} else if (!hasBlockGapSupport && fallbackGapValue) {

[34081] Fix | Delete

gapValue = fallbackGapValue;

[34082] Fix | Delete

}

[34083] Fix | Delete

}

[34084] Fix | Delete

if (gapValue && layoutDefinitions) {

[34085] Fix | Delete

Object.values(layoutDefinitions).forEach(({

[34086] Fix | Delete

className,

[34087] Fix | Delete

name,

[34088] Fix | Delete

spacingStyles

[34089] Fix | Delete

}) => {

[34090] Fix | Delete

// Allow outputting fallback gap styles for flex layout type when block gap support isn't available.

[34091] Fix | Delete

if (!hasBlockGapSupport && 'flex' !== name && 'grid' !== name) {

[34092] Fix | Delete

return;

[34093] Fix | Delete

}

[34094] Fix | Delete

if (spacingStyles?.length) {

[34095] Fix | Delete

spacingStyles.forEach(spacingStyle => {

[34096] Fix | Delete

const declarations = [];

[34097] Fix | Delete

if (spacingStyle.rules) {

[34098] Fix | Delete

Object.entries(spacingStyle.rules).forEach(([cssProperty, cssValue]) => {

[34099] Fix | Delete

declarations.push(`${cssProperty}: ${cssValue ? cssValue : gapValue}`);

[34100] Fix | Delete

});

[34101] Fix | Delete

}

[34102] Fix | Delete

if (declarations.length) {

[34103] Fix | Delete

let combinedSelector = '';

[34104] Fix | Delete

if (!hasBlockGapSupport) {

[34105] Fix | Delete

// For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles.

[34106] Fix | Delete

combinedSelector = selector === ROOT_BLOCK_SELECTOR ? `:where(.${className}${spacingStyle?.selector || ''})` : `:where(${selector}.${className}${spacingStyle?.selector || ''})`;

[34107] Fix | Delete

} else {

[34108] Fix | Delete

combinedSelector = selector === ROOT_BLOCK_SELECTOR ? `:root :where(.${className})${spacingStyle?.selector || ''}` : `:root :where(${selector}-${className})${spacingStyle?.selector || ''}`;

[34109] Fix | Delete

}

[34110] Fix | Delete

ruleset += `${combinedSelector} { ${declarations.join('; ')}; }`;

[34111] Fix | Delete

}

[34112] Fix | Delete

});

[34113] Fix | Delete

}

[34114] Fix | Delete

});

[34115] Fix | Delete

// For backwards compatibility, ensure the legacy block gap CSS variable is still available.

[34116] Fix | Delete

if (selector === ROOT_BLOCK_SELECTOR && hasBlockGapSupport) {

[34117] Fix | Delete

ruleset += `${ROOT_CSS_PROPERTIES_SELECTOR} { --wp--style--block-gap: ${gapValue}; }`;

[34118] Fix | Delete

}

[34119] Fix | Delete

}

[34120] Fix | Delete

[34121] Fix | Delete

// Output base styles

[34122] Fix | Delete

if (selector === ROOT_BLOCK_SELECTOR && layoutDefinitions) {

[34123] Fix | Delete

const validDisplayModes = ['block', 'flex', 'grid'];

[34124] Fix | Delete

Object.values(layoutDefinitions).forEach(({

[34125] Fix | Delete

className,

[34126] Fix | Delete

displayMode,

[34127] Fix | Delete

baseStyles

[34128] Fix | Delete

}) => {

[34129] Fix | Delete

if (displayMode && validDisplayModes.includes(displayMode)) {

[34130] Fix | Delete

ruleset += `${selector} .${className} { display:${displayMode}; }`;

[34131] Fix | Delete

}

[34132] Fix | Delete

if (baseStyles?.length) {

[34133] Fix | Delete

baseStyles.forEach(baseStyle => {

[34134] Fix | Delete

const declarations = [];

[34135] Fix | Delete

if (baseStyle.rules) {

[34136] Fix | Delete

Object.entries(baseStyle.rules).forEach(([cssProperty, cssValue]) => {

[34137] Fix | Delete

declarations.push(`${cssProperty}: ${cssValue}`);

[34138] Fix | Delete

});

[34139] Fix | Delete

}

[34140] Fix | Delete

if (declarations.length) {

[34141] Fix | Delete

const combinedSelector = `.${className}${baseStyle?.selector || ''}`;

[34142] Fix | Delete

ruleset += `${combinedSelector} { ${declarations.join('; ')}; }`;

[34143] Fix | Delete

}

[34144] Fix | Delete

});

[34145] Fix | Delete

}

[34146] Fix | Delete

});

[34147] Fix | Delete

}

[34148] Fix | Delete

return ruleset;

[34149] Fix | Delete

}

[34150] Fix | Delete

const STYLE_KEYS = ['border', 'color', 'dimensions', 'spacing', 'typography', 'filter', 'outline', 'shadow', 'background'];

[34151] Fix | Delete

function pickStyleKeys(treeToPickFrom) {

[34152] Fix | Delete

if (!treeToPickFrom) {

[34153] Fix | Delete

return {};

[34154] Fix | Delete

}

[34155] Fix | Delete

const entries = Object.entries(treeToPickFrom);

[34156] Fix | Delete

const pickedEntries = entries.filter(([key]) => STYLE_KEYS.includes(key));

[34157] Fix | Delete

// clone the style objects so that `getFeatureDeclarations` can remove consumed keys from it

[34158] Fix | Delete

const clonedEntries = pickedEntries.map(([key, style]) => [key, JSON.parse(JSON.stringify(style))]);

[34159] Fix | Delete

return Object.fromEntries(clonedEntries);

[34160] Fix | Delete

}

[34161] Fix | Delete

const getNodesWithStyles = (tree, blockSelectors) => {

[34162] Fix | Delete

var _tree$styles$blocks;

[34163] Fix | Delete

const nodes = [];

[34164] Fix | Delete

if (!tree?.styles) {

[34165] Fix | Delete

return nodes;

[34166] Fix | Delete

}

[34167] Fix | Delete

[34168] Fix | Delete

// Top-level.

[34169] Fix | Delete

const styles = pickStyleKeys(tree.styles);

[34170] Fix | Delete

if (styles) {

[34171] Fix | Delete

nodes.push({

[34172] Fix | Delete

styles,

[34173] Fix | Delete

selector: ROOT_BLOCK_SELECTOR,

[34174] Fix | Delete

// Root selector (body) styles should not be wrapped in `:root where()` to keep

[34175] Fix | Delete

// specificity at (0,0,1) and maintain backwards compatibility.

[34176] Fix | Delete

skipSelectorWrapper: true

[34177] Fix | Delete

});

[34178] Fix | Delete

}

[34179] Fix | Delete

Object.entries(external_wp_blocks_namespaceObject.__EXPERIMENTAL_ELEMENTS).forEach(([name, selector]) => {

[34180] Fix | Delete

if (tree.styles?.elements?.[name]) {

[34181] Fix | Delete

nodes.push({

[34182] Fix | Delete

styles: tree.styles?.elements?.[name],

[34183] Fix | Delete

selector,

[34184] Fix | Delete

// Top level elements that don't use a class name should not receive the

[34185] Fix | Delete

// `:root :where()` wrapper to maintain backwards compatibility.

[34186] Fix | Delete

skipSelectorWrapper: !ELEMENT_CLASS_NAMES[name]

[34187] Fix | Delete

});

[34188] Fix | Delete

}

[34189] Fix | Delete

});

[34190] Fix | Delete

[34191] Fix | Delete

// Iterate over blocks: they can have styles & elements.

[34192] Fix | Delete

Object.entries((_tree$styles$blocks = tree.styles?.blocks) !== null && _tree$styles$blocks !== void 0 ? _tree$styles$blocks : {}).forEach(([blockName, node]) => {

[34193] Fix | Delete

var _node$elements;

[34194] Fix | Delete

const blockStyles = pickStyleKeys(node);

[34195] Fix | Delete

if (node?.variations) {

[34196] Fix | Delete

const variations = {};

[34197] Fix | Delete

Object.entries(node.variations).forEach(([variationName, variation]) => {

[34198] Fix | Delete

var _variation$elements, _variation$blocks;

[34199] Fix | Delete

variations[variationName] = pickStyleKeys(variation);

[34200] Fix | Delete

if (variation?.css) {

[34201] Fix | Delete

variations[variationName].css = variation.css;

[34202] Fix | Delete

}

[34203] Fix | Delete

const variationSelector = blockSelectors[blockName]?.styleVariationSelectors?.[variationName];

[34204] Fix | Delete

[34205] Fix | Delete

// Process the variation's inner element styles.

[34206] Fix | Delete

// This comes before the inner block styles so the

[34207] Fix | Delete

// element styles within the block type styles take

[34208] Fix | Delete

// precedence over these.

[34209] Fix | Delete

Object.entries((_variation$elements = variation?.elements) !== null && _variation$elements !== void 0 ? _variation$elements : {}).forEach(([element, elementStyles]) => {

[34210] Fix | Delete

if (elementStyles && external_wp_blocks_namespaceObject.__EXPERIMENTAL_ELEMENTS[element]) {

[34211] Fix | Delete

nodes.push({

[34212] Fix | Delete

styles: elementStyles,

[34213] Fix | Delete

selector: scopeSelector(variationSelector, external_wp_blocks_namespaceObject.__EXPERIMENTAL_ELEMENTS[element])

[34214] Fix | Delete

});

[34215] Fix | Delete

}

[34216] Fix | Delete

});

[34217] Fix | Delete

[34218] Fix | Delete

// Process the variations inner block type styles.

[34219] Fix | Delete

Object.entries((_variation$blocks = variation?.blocks) !== null && _variation$blocks !== void 0 ? _variation$blocks : {}).forEach(([variationBlockName, variationBlockStyles]) => {

[34220] Fix | Delete

var _variationBlockStyles;

[34221] Fix | Delete

const variationBlockSelector = scopeSelector(variationSelector, blockSelectors[variationBlockName]?.selector);

[34222] Fix | Delete

const variationDuotoneSelector = scopeSelector(variationSelector, blockSelectors[variationBlockName]?.duotoneSelector);

[34223] Fix | Delete

const variationFeatureSelectors = scopeFeatureSelectors(variationSelector, blockSelectors[variationBlockName]?.featureSelectors);

[34224] Fix | Delete

const variationBlockStyleNodes = pickStyleKeys(variationBlockStyles);

[34225] Fix | Delete

if (variationBlockStyles?.css) {

[34226] Fix | Delete

variationBlockStyleNodes.css = variationBlockStyles.css;

[34227] Fix | Delete

}

[34228] Fix | Delete

nodes.push({

[34229] Fix | Delete

selector: variationBlockSelector,

[34230] Fix | Delete

duotoneSelector: variationDuotoneSelector,

[34231] Fix | Delete

featureSelectors: variationFeatureSelectors,

[34232] Fix | Delete

fallbackGapValue: blockSelectors[variationBlockName]?.fallbackGapValue,

[34233] Fix | Delete

hasLayoutSupport: blockSelectors[variationBlockName]?.hasLayoutSupport,

[34234] Fix | Delete

styles: variationBlockStyleNodes

[34235] Fix | Delete

});

[34236] Fix | Delete

[34237] Fix | Delete

// Process element styles for the inner blocks

[34238] Fix | Delete

// of the variation.

[34239] Fix | Delete

Object.entries((_variationBlockStyles = variationBlockStyles.elements) !== null && _variationBlockStyles !== void 0 ? _variationBlockStyles : {}).forEach(([variationBlockElement, variationBlockElementStyles]) => {

[34240] Fix | Delete

if (variationBlockElementStyles && external_wp_blocks_namespaceObject.__EXPERIMENTAL_ELEMENTS[variationBlockElement]) {

[34241] Fix | Delete

nodes.push({

[34242] Fix | Delete

styles: variationBlockElementStyles,

[34243] Fix | Delete

selector: scopeSelector(variationBlockSelector, external_wp_blocks_namespaceObject.__EXPERIMENTAL_ELEMENTS[variationBlockElement])

[34244] Fix | Delete

});

[34245] Fix | Delete

}

[34246] Fix | Delete

});

[34247] Fix | Delete

});

[34248] Fix | Delete

});

[34249] Fix | Delete

blockStyles.variations = variations;

[34250] Fix | Delete

}

[34251] Fix | Delete

if (blockSelectors?.[blockName]?.selector) {

[34252] Fix | Delete

nodes.push({

[34253] Fix | Delete

duotoneSelector: blockSelectors[blockName].duotoneSelector,

[34254] Fix | Delete

fallbackGapValue: blockSelectors[blockName].fallbackGapValue,

[34255] Fix | Delete

hasLayoutSupport: blockSelectors[blockName].hasLayoutSupport,

[34256] Fix | Delete

selector: blockSelectors[blockName].selector,

[34257] Fix | Delete

styles: blockStyles,

[34258] Fix | Delete

featureSelectors: blockSelectors[blockName].featureSelectors,

[34259] Fix | Delete

styleVariationSelectors: blockSelectors[blockName].styleVariationSelectors

[34260] Fix | Delete

});

[34261] Fix | Delete

}

[34262] Fix | Delete

Object.entries((_node$elements = node?.elements) !== null && _node$elements !== void 0 ? _node$elements : {}).forEach(([elementName, value]) => {

[34263] Fix | Delete

if (value && blockSelectors?.[blockName] && external_wp_blocks_namespaceObject.__EXPERIMENTAL_ELEMENTS[elementName]) {

[34264] Fix | Delete

nodes.push({

[34265] Fix | Delete

styles: value,

[34266] Fix | Delete

selector: blockSelectors[blockName]?.selector.split(',').map(sel => {

[34267] Fix | Delete

const elementSelectors = external_wp_blocks_namespaceObject.__EXPERIMENTAL_ELEMENTS[elementName].split(',');

[34268] Fix | Delete

return elementSelectors.map(elementSelector => sel + ' ' + elementSelector);

[34269] Fix | Delete

}).join(',')

[34270] Fix | Delete

});

[34271] Fix | Delete

}

[34272] Fix | Delete

});

[34273] Fix | Delete

});

[34274] Fix | Delete

return nodes;

[34275] Fix | Delete

};

[34276] Fix | Delete

const getNodesWithSettings = (tree, blockSelectors) => {

[34277] Fix | Delete

var _tree$settings$blocks;

[34278] Fix | Delete

const nodes = [];

[34279] Fix | Delete

if (!tree?.settings) {

[34280] Fix | Delete

return nodes;

[34281] Fix | Delete

}

[34282] Fix | Delete

const pickPresets = treeToPickFrom => {

[34283] Fix | Delete

let presets = {};

[34284] Fix | Delete

PRESET_METADATA.forEach(({

[34285] Fix | Delete

path

[34286] Fix | Delete

}) => {

[34287] Fix | Delete

const value = getValueFromObjectPath(treeToPickFrom, path, false);

[34288] Fix | Delete

if (value !== false) {

[34289] Fix | Delete

presets = setImmutably(presets, path, value);

[34290] Fix | Delete

}

[34291] Fix | Delete

});

[34292] Fix | Delete

return presets;

[34293] Fix | Delete

};

[34294] Fix | Delete

[34295] Fix | Delete

// Top-level.

[34296] Fix | Delete

const presets = pickPresets(tree.settings);

[34297] Fix | Delete

const custom = tree.settings?.custom;

[34298] Fix | Delete

if (Object.keys(presets).length > 0 || custom) {

[34299] Fix | Delete

nodes.push({

[34300] Fix | Delete

presets,

[34301] Fix | Delete

custom,

[34302] Fix | Delete

selector: ROOT_CSS_PROPERTIES_SELECTOR

[34303] Fix | Delete

});

[34304] Fix | Delete

}

[34305] Fix | Delete

[34306] Fix | Delete

// Blocks.

[34307] Fix | Delete

Object.entries((_tree$settings$blocks = tree.settings?.blocks) !== null && _tree$settings$blocks !== void 0 ? _tree$settings$blocks : {}).forEach(([blockName, node]) => {

[34308] Fix | Delete

const blockPresets = pickPresets(node);

[34309] Fix | Delete

const blockCustom = node.custom;

[34310] Fix | Delete

if (Object.keys(blockPresets).length > 0 || blockCustom) {

[34311] Fix | Delete

nodes.push({

[34312] Fix | Delete

presets: blockPresets,

[34313] Fix | Delete

custom: blockCustom,

[34314] Fix | Delete

selector: blockSelectors[blockName]?.selector

[34315] Fix | Delete

});

[34316] Fix | Delete

}

[34317] Fix | Delete

});

[34318] Fix | Delete

return nodes;

[34319] Fix | Delete

};

[34320] Fix | Delete

const toCustomProperties = (tree, blockSelectors) => {

[34321] Fix | Delete

const settings = getNodesWithSettings(tree, blockSelectors);

[34322] Fix | Delete

let ruleset = '';

[34323] Fix | Delete

settings.forEach(({

[34324] Fix | Delete

presets,

[34325] Fix | Delete

custom,

[34326] Fix | Delete

selector

[34327] Fix | Delete

}) => {

[34328] Fix | Delete

const declarations = getPresetsDeclarations(presets, tree?.settings);

[34329] Fix | Delete

const customProps = flattenTree(custom, '--wp--custom--', '--');

[34330] Fix | Delete

if (customProps.length > 0) {

[34331] Fix | Delete

declarations.push(...customProps);

[34332] Fix | Delete

}

[34333] Fix | Delete

if (declarations.length > 0) {

[34334] Fix | Delete

ruleset += `${selector}{${declarations.join(';')};}`;

[34335] Fix | Delete

}

[34336] Fix | Delete

});

[34337] Fix | Delete

return ruleset;

[34338] Fix | Delete

};

[34339] Fix | Delete

const toStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles = false, disableRootPadding = false, styleOptions = undefined) => {

[34340] Fix | Delete

// These allow opting out of certain sets of styles.

[34341] Fix | Delete

const options = {

[34342] Fix | Delete

blockGap: true,

[34343] Fix | Delete

blockStyles: true,

[34344] Fix | Delete

layoutStyles: true,

[34345] Fix | Delete

marginReset: true,

[34346] Fix | Delete

presets: true,

[34347] Fix | Delete

rootPadding: true,

[34348] Fix | Delete

variationStyles: false,

[34349] Fix | Delete

...styleOptions

[34350] Fix | Delete

};

[34351] Fix | Delete

const nodesWithStyles = getNodesWithStyles(tree, blockSelectors);

[34352] Fix | Delete

const nodesWithSettings = getNodesWithSettings(tree, blockSelectors);

[34353] Fix | Delete

const useRootPaddingAlign = tree?.settings?.useRootPaddingAwareAlignments;

[34354] Fix | Delete

const {

[34355] Fix | Delete

contentSize,

[34356] Fix | Delete

wideSize

[34357] Fix | Delete

} = tree?.settings?.layout || {};

[34358] Fix | Delete

const hasBodyStyles = options.marginReset || options.rootPadding || options.layoutStyles;

[34359] Fix | Delete

let ruleset = '';

[34360] Fix | Delete

if (options.presets && (contentSize || wideSize)) {

[34361] Fix | Delete

ruleset += `${ROOT_CSS_PROPERTIES_SELECTOR} {`;

[34362] Fix | Delete

ruleset = contentSize ? ruleset + ` --wp--style--global--content-size: ${contentSize};` : ruleset;

[34363] Fix | Delete

ruleset = wideSize ? ruleset + ` --wp--style--global--wide-size: ${wideSize};` : ruleset;

[34364] Fix | Delete

ruleset += '}';

[34365] Fix | Delete

}

[34366] Fix | Delete

if (hasBodyStyles) {

[34367] Fix | Delete

[34368] Fix | Delete

* Reset default browser margin on the body element.

[34369] Fix | Delete

* This is set on the body selector **before** generating the ruleset

[34370] Fix | Delete

* from the `theme.json`. This is to ensure that if the `theme.json` declares

[34371] Fix | Delete

* `margin` in its `spacing` declaration for the `body` element then these

[34372] Fix | Delete

* user-generated values take precedence in the CSS cascade.

[34373] Fix | Delete

* @link https://github.com/WordPress/gutenberg/issues/36147.

[34374] Fix | Delete

[34375] Fix | Delete

ruleset += ':where(body) {margin: 0;';

[34376] Fix | Delete

[34377] Fix | Delete

// Root padding styles should be output for full templates, patterns and template parts.

[34378] Fix | Delete

if (options.rootPadding && useRootPaddingAlign) {

[34379] Fix | Delete

[34380] Fix | Delete

* These rules reproduce the ones from https://github.com/WordPress/gutenberg/blob/79103f124925d1f457f627e154f52a56228ed5ad/lib/class-wp-theme-json-gutenberg.php#L2508

[34381] Fix | Delete

* almost exactly, but for the selectors that target block wrappers in the front end. This code only runs in the editor, so it doesn't need those selectors.

[34382] Fix | Delete

[34383] Fix | Delete

ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) }

[34384] Fix | Delete

.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }

[34385] Fix | Delete

.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }

[34386] Fix | Delete

.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }

[34387] Fix | Delete

.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0;

[34388] Fix | Delete

[34389] Fix | Delete

}

[34390] Fix | Delete

ruleset += '}';

[34391] Fix | Delete

}

[34392] Fix | Delete

if (options.blockStyles) {

[34393] Fix | Delete

nodesWithStyles.forEach(({

[34394] Fix | Delete

selector,

[34395] Fix | Delete

duotoneSelector,

[34396] Fix | Delete

styles,

[34397] Fix | Delete

fallbackGapValue,

[34398] Fix | Delete

hasLayoutSupport,

[34399] Fix | Delete

featureSelectors,

[34400] Fix | Delete

styleVariationSelectors,

[34401] Fix | Delete

skipSelectorWrapper

[34402] Fix | Delete

}) => {

[34403] Fix | Delete

// Process styles for block support features with custom feature level

[34404] Fix | Delete

// CSS selectors set.

[34405] Fix | Delete

if (featureSelectors) {

[34406] Fix | Delete

const featureDeclarations = getFeatureDeclarations(featureSelectors, styles);

[34407] Fix | Delete

Object.entries(featureDeclarations).forEach(([cssSelector, declarations]) => {

[34408] Fix | Delete

if (declarations.length) {

[34409] Fix | Delete

const rules = declarations.join(';');

[34410] Fix | Delete

ruleset += `:root :where(${cssSelector}){${rules};}`;

[34411] Fix | Delete

}

[34412] Fix | Delete

});

[34413] Fix | Delete

}

[34414] Fix | Delete

[34415] Fix | Delete

// Process duotone styles.

[34416] Fix | Delete

if (duotoneSelector) {

[34417] Fix | Delete

const duotoneStyles = {};

[34418] Fix | Delete

if (styles?.filter) {

[34419] Fix | Delete

duotoneStyles.filter = styles.filter;

[34420] Fix | Delete

delete styles.filter;

[34421] Fix | Delete

}

[34422] Fix | Delete

const duotoneDeclarations = getStylesDeclarations(duotoneStyles);

[34423] Fix | Delete

if (duotoneDeclarations.length) {

[34424] Fix | Delete

ruleset += `${duotoneSelector}{${duotoneDeclarations.join(';')};}`;

[34425] Fix | Delete

}

[34426] Fix | Delete

}

[34427] Fix | Delete

[34428] Fix | Delete

// Process blockGap and layout styles.

[34429] Fix | Delete

if (!disableLayoutStyles && (ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport)) {

[34430] Fix | Delete

ruleset += getLayoutStyles({

[34431] Fix | Delete

style: styles,

[34432] Fix | Delete

selector,

[34433] Fix | Delete

hasBlockGapSupport,

[34434] Fix | Delete

hasFallbackGapSupport,

[34435] Fix | Delete

fallbackGapValue

[34436] Fix | Delete

});

[34437] Fix | Delete

}

[34438] Fix | Delete

[34439] Fix | Delete

// Process the remaining block styles (they use either normal block class or __experimentalSelector).

[34440] Fix | Delete

const styleDeclarations = getStylesDeclarations(styles, selector, useRootPaddingAlign, tree, disableRootPadding);

[34441] Fix | Delete

if (styleDeclarations?.length) {

[34442] Fix | Delete

const generalSelector = skipSelectorWrapper ? selector : `:root :where(${selector})`;

[34443] Fix | Delete

ruleset += `${generalSelector}{${styleDeclarations.join(';')};}`;

[34444] Fix | Delete

}

[34445] Fix | Delete

if (styles?.css) {

[34446] Fix | Delete

ruleset += processCSSNesting(styles.css, `:root :where(${selector})`);

[34447] Fix | Delete

}

[34448] Fix | Delete

if (options.variationStyles && styleVariationSelectors) {

[34449] Fix | Delete

Object.entries(styleVariationSelectors).forEach(([styleVariationName, styleVariationSelector]) => {

[34450] Fix | Delete

const styleVariations = styles?.variations?.[styleVariationName];

[34451] Fix | Delete

if (styleVariations) {

[34452] Fix | Delete

// If the block uses any custom selectors for block support, add those first.

[34453] Fix | Delete

if (featureSelectors) {

[34454] Fix | Delete

const featureDeclarations = getFeatureDeclarations(featureSelectors, styleVariations);

[34455] Fix | Delete

Object.entries(featureDeclarations).forEach(([baseSelector, declarations]) => {

[34456] Fix | Delete

if (declarations.length) {

[34457] Fix | Delete

const cssSelector = concatFeatureVariationSelectorString(baseSelector, styleVariationSelector);

[34458] Fix | Delete

const rules = declarations.join(';');

[34459] Fix | Delete

ruleset += `:root :where(${cssSelector}){${rules};}`;

[34460] Fix | Delete

}

[34461] Fix | Delete

});

[34462] Fix | Delete

}

[34463] Fix | Delete

[34464] Fix | Delete

// Otherwise add regular selectors.

[34465] Fix | Delete

const styleVariationDeclarations = getStylesDeclarations(styleVariations, styleVariationSelector, useRootPaddingAlign, tree);

[34466] Fix | Delete

if (styleVariationDeclarations.length) {

[34467] Fix | Delete

ruleset += `:root :where(${styleVariationSelector}){${styleVariationDeclarations.join(';')};}`;

[34468] Fix | Delete

}

[34469] Fix | Delete

if (styleVariations?.css) {

[34470] Fix | Delete

ruleset += processCSSNesting(styleVariations.css, `:root :where(${styleVariationSelector})`);

[34471] Fix | Delete

}

[34472] Fix | Delete

}

[34473] Fix | Delete

});

[34474] Fix | Delete

}

[34475] Fix | Delete

[34476] Fix | Delete

// Check for pseudo selector in `styles` and handle separately.

[34477] Fix | Delete

const pseudoSelectorStyles = Object.entries(styles).filter(([key]) => key.startsWith(':'));

[34478] Fix | Delete

if (pseudoSelectorStyles?.length) {

[34479] Fix | Delete

pseudoSelectorStyles.forEach(([pseudoKey, pseudoStyle]) => {

[34480] Fix | Delete

const pseudoDeclarations = getStylesDeclarations(pseudoStyle);

[34481] Fix | Delete

if (!pseudoDeclarations?.length) {

[34482] Fix | Delete

return;

[34483] Fix | Delete

}

[34484] Fix | Delete

[34485] Fix | Delete

// `selector` may be provided in a form

[34486] Fix | Delete

// where block level selectors have sub element

[34487] Fix | Delete

// selectors appended to them as a comma separated

[34488] Fix | Delete

// string.

[34489] Fix | Delete

// e.g. `h1 a,h2 a,h3 a,h4 a,h5 a,h6 a`;

[34490] Fix | Delete

// Split and append pseudo selector to create

[34491] Fix | Delete

// the proper rules to target the elements.

[34492] Fix | Delete

const _selector = selector.split(',').map(sel => sel + pseudoKey).join(',');

[34493] Fix | Delete

[34494] Fix | Delete

// As pseudo classes such as :hover, :focus etc. have class-level

[34495] Fix | Delete

// specificity, they must use the `:root :where()` wrapper. This.

[34496] Fix | Delete

// caps the specificity at `0-1-0` to allow proper nesting of variations

[34497] Fix | Delete

// and block type element styles.

[34498] Fix | Delete

const pseudoRule = `:root :where(${_selector}){${pseudoDeclarations.join(';')};}`;

[34499] Fix | Delete

1 ...67 686970 71 ...144