@wordpress/global-styles-engine 1.12.0 → 1.12.1-next.v.202605131032.0

package/src/core/render.tsx

@@ -138,6 +138,44 @@ export type BlockSelectors = Record<
 	}
 >;
 
+/**
+ * Style node metadata used to render one selector's style rules.
+ *
+ * - `styles`: theme.json style object for this node.
+ * - `selector`: CSS selector used for the node's base declarations.
+ * - `selectorSuffix`: optional suffix used to append additional selectors,
+ *   such as pseudo selectors, to base and feature selectors.
+ * - `mediaQuery`: optional media query wrapping this node's rules.
+ * - `skipSelectorWrapper`: omits the `:root :where()` specificity wrapper.
+ * - `duotoneSelector`: alternate selector for duotone filter declarations.
+ * - `featureSelectors`: feature-level selectors for block supports.
+ * - `fallbackGapValue`: fallback block gap value used by layout rules.
+ * - `hasLayoutSupport`: whether layout styles can be generated for the node.
+ * - `isStyleVariation`: whether this node is a block style variation.
+ * - `layoutSelector`: optional selector override for layout styles.
+ * - `layoutHasBlockGapSupport`: optional block gap support override for layout styles.
+ * - `name`: block name used by block-specific declaration adjustments.
+ * - `elementName`: element name used to resolve valid pseudo selectors.
+ */
+interface StylesNode {
+	styles: any;
+	selector: string;
+	selectorSuffix?: string;
+	mediaQuery?: string;
+	skipSelectorWrapper?: boolean;
+	duotoneSelector?: string;
+	featureSelectors?:
+		| string
+		| Record< string, string | Record< string, string > >;
+	fallbackGapValue?: string;
+	hasLayoutSupport?: boolean;
+	isStyleVariation?: boolean;
+	layoutSelector?: string;
+	layoutHasBlockGapSupport?: boolean;
+	name?: string;
+	elementName?: string;
+}
+
 type ElementName = keyof typeof ELEMENTS;
 
 // Elements that rely on class names in their selectors.
@@ -163,6 +201,38 @@ const VALID_BLOCK_PSEUDO_SELECTORS: Record< string, string[] > = {
 	'core/navigation-link': [ ':hover', ':focus', ':focus-visible', ':active' ],
 };
 
+// The valid pseudo-selectors that can be used for elements.
+// Keep in sync with WP_Theme_JSON_Gutenberg::VALID_ELEMENT_PSEUDO_SELECTORS.
+const VALID_ELEMENT_PSEUDO_SELECTORS: Record< string, string[] > = {
+	link: [
+		':link',
+		':any-link',
+		':visited',
+		':hover',
+		':focus',
+		':focus-visible',
+		':active',
+	],
+	button: [
+		':link',
+		':any-link',
+		':visited',
+		':hover',
+		':focus',
+		':focus-visible',
+		':active',
+	],
+};
+
+/**
+ * Responsive breakpoint state keys and their corresponding CSS media queries.
+ * Keep in sync with WP_Theme_JSON_Gutenberg::RESPONSIVE_BREAKPOINTS.
+ */
+const RESPONSIVE_BREAKPOINTS: Record< string, string > = {
+	mobile: '@media (width <= 480px)',
+	tablet: '@media (480px < width <= 782px)',
+};
+
 /**
  * Transform given preset tree into a set of preset class declarations.
  *
@@ -875,9 +945,12 @@ function pickStyleAndPseudoKeys(
 	const allowedPseudoSelectors = blockName
 		? VALID_BLOCK_PSEUDO_SELECTORS[ blockName ] ?? []
 		: [];
+
 	const pickedEntries = entries.filter(
 		( [ key ] ) =>
-			STYLE_KEYS.includes( key ) || allowedPseudoSelectors.includes( key )
+			STYLE_KEYS.includes( key ) ||
+			allowedPseudoSelectors.includes( key ) ||
+			RESPONSIVE_BREAKPOINTS[ key ]
 	);
 	// clone the style objects so that `getFeatureDeclarations` can remove consumed keys from it
 	const clonedEntries = pickedEntries.map( ( [ key, style ] ) => [
@@ -887,109 +960,157 @@ function pickStyleAndPseudoKeys(
 	return Object.fromEntries( clonedEntries );
 }
 
-function appendPseudoSelectorStyles(
-	styles: Record< string, any >,
-	selector: string,
-	ruleset: string,
-	featureSelectors:
-		| string
-		| Record< string, string | Record< string, string > >
-		| undefined,
-	treeSettings: Record< string, any > | undefined,
-	blockName: string | undefined,
-	styleVariationSelector?: string
-): string {
-	const pseudoSelectorStyles = Object.entries( styles ).filter( ( [ key ] ) =>
-		key.startsWith( ':' )
-	);
-
-	if ( ! pseudoSelectorStyles.length ) {
-		return ruleset;
+/**
+ * Creates style nodes for configured block and element pseudo selectors.
+ *
+ * Only pseudo selectors listed in the matching block or element allow-list are
+ * considered. This mirrors the PHP renderer and avoids treating arbitrary
+ * colon-prefixed keys as pseudo selectors.
+ *
+ * @param node Style node that may contain configured pseudo styles.
+ * @return Style nodes for the configured pseudo states.
+ */
+function getPseudoStyleNodes( node: StylesNode ): StylesNode[] {
+	const {
+		styles,
+		selector,
+		featureSelectors,
+		name,
+		elementName,
+		mediaQuery,
+	} = node;
+	const pseudoSelectors = name
+		? VALID_BLOCK_PSEUDO_SELECTORS[ name ] ?? []
+		: VALID_ELEMENT_PSEUDO_SELECTORS[ elementName ?? '' ] ?? [];
+
+	if ( ! pseudoSelectors.length ) {
+		return [];
 	}
 
-	pseudoSelectorStyles.forEach( ( [ pseudoKey, pseudoStyle ] ) => {
-		if ( ! pseudoStyle || typeof pseudoStyle !== 'object' ) {
-			return;
+	return pseudoSelectors.flatMap( ( pseudoSelector ) => {
+		const pseudoStyles = styles?.[ pseudoSelector ];
+		if ( ! pseudoStyles || typeof pseudoStyles !== 'object' ) {
+			return [];
 		}
 
-		const remainingPseudoStyles = JSON.parse(
-			JSON.stringify( pseudoStyle )
-		);
-
-		if ( featureSelectors && typeof featureSelectors !== 'string' ) {
-			let pseudoFeatureDeclarations = getFeatureDeclarations(
-				featureSelectors,
-				remainingPseudoStyles
-			);
-
-			pseudoFeatureDeclarations = updateParagraphTextIndentSelector(
-				pseudoFeatureDeclarations,
-				treeSettings,
-				blockName
-			);
-
-			pseudoFeatureDeclarations = updateButtonWidthDeclarations(
-				pseudoFeatureDeclarations,
-				treeSettings
-			);
+		return [
+			{
+				styles: JSON.parse( JSON.stringify( pseudoStyles ) ),
+				selector,
+				selectorSuffix: pseudoSelector,
+				mediaQuery,
+				featureSelectors:
+					featureSelectors && typeof featureSelectors !== 'string'
+						? featureSelectors
+						: undefined,
+				name,
+				elementName,
+			},
+		];
+	} );
+}
 
-			Object.entries( pseudoFeatureDeclarations ).forEach(
-				( [ baseSelector, declarations ] ) => {
-					if ( ! declarations.length ) {
-						return;
-					}
-					const pseudoFeatureSelector = appendToSelector(
-						baseSelector,
-						pseudoKey
-					);
-					const cssSelector = styleVariationSelector
-						? concatFeatureVariationSelectorString(
-								pseudoFeatureSelector,
-								styleVariationSelector
-						  )
-						: pseudoFeatureSelector;
-					const rules = declarations.join( ';' );
-					ruleset += `:root :where(${ cssSelector }){${ rules };}`;
-				}
-			);
-		}
+/**
+ * Creates style nodes for configured responsive breakpoint states.
+ *
+ * Breakpoint nodes render feature-level, base, and pseudo declarations through
+ * the normal node renderer.
+ *
+ * @param node Style node that may contain configured responsive state styles.
+ * @return Responsive style nodes in configured breakpoint order.
+ */
+function getResponsiveStyleNodes( node: StylesNode ): StylesNode[] {
+	const {
+		styles,
+		selector,
+		featureSelectors,
+		name,
+		elementName,
+		isStyleVariation,
+	} = node;
+
+	if ( ! name && ! elementName ) {
+		return [];
+	}
 
-		const pseudoDeclarations = getStylesDeclarations(
-			remainingPseudoStyles
-		);
+	return Object.entries( RESPONSIVE_BREAKPOINTS ).flatMap(
+		( [ breakpointKey, mediaQuery ] ) => {
+			const breakpointStyles = styles?.[ breakpointKey ];
+			if ( ! breakpointStyles || typeof breakpointStyles !== 'object' ) {
+				return [];
+			}
 
-		if ( ! pseudoDeclarations.length ) {
-			return;
+			return [
+				{
+					styles: JSON.parse( JSON.stringify( breakpointStyles ) ),
+					selector,
+					mediaQuery,
+					featureSelectors:
+						featureSelectors && typeof featureSelectors !== 'string'
+							? featureSelectors
+							: undefined,
+					name,
+					elementName,
+					isStyleVariation,
+				},
+			];
 		}
+	);
+}
 
-		const pseudoSelector = appendToSelector( selector, pseudoKey );
-		const pseudoRule = `:root :where(${ pseudoSelector }){${ pseudoDeclarations.join(
-			';'
-		) };}`;
+/**
+ * Scopes feature selectors to a style variation selector.
+ *
+ * Variation feature selectors are compound selectors rather than suffixes. For
+ * example, `.wp-image-spacing` becomes `.is-style-foo.wp-image.wp-image-spacing`.
+ *
+ * @param featureSelectors       Feature-level selectors from a style node.
+ * @param styleVariationSelector Selector for the style variation.
+ * @return Feature-level selectors scoped to the style variation.
+ */
+function getVariationFeatureSelectors(
+	featureSelectors: StylesNode[ 'featureSelectors' ],
+	styleVariationSelector: string
+): StylesNode[ 'featureSelectors' ] {
+	if ( ! featureSelectors || typeof featureSelectors === 'string' ) {
+		return undefined;
+	}
 
-		ruleset += pseudoRule;
-	} );
+	return Object.fromEntries(
+		Object.entries( featureSelectors ).map( ( [ feature, selector ] ) => {
+			if ( typeof selector === 'string' ) {
+				return [
+					feature,
+					concatFeatureVariationSelectorString(
+						selector,
+						styleVariationSelector
+					),
+				];
+			}
 
-	return ruleset;
+			return [
+				feature,
+				Object.fromEntries(
+					Object.entries( selector ).map(
+						( [ subfeature, subfeatureSelector ] ) => [
+							subfeature,
+							concatFeatureVariationSelectorString(
+								subfeatureSelector,
+								styleVariationSelector
+							),
+						]
+					)
+				),
+			];
+		} )
+	);
 }
 
 export const getNodesWithStyles = (
 	tree: GlobalStylesConfig,
 	blockSelectors: string | BlockSelectors
 ): any[] => {
-	const nodes: {
-		styles: Partial< Omit< GlobalStylesStyles, 'elements' | 'blocks' > >;
-		selector: string;
-		skipSelectorWrapper?: boolean;
-		duotoneSelector?: string;
-		featureSelectors?:
-			| string
-			| Record< string, string | Record< string, string > >;
-		fallbackGapValue?: string;
-		hasLayoutSupport?: boolean;
-		styleVariationSelectors?: Record< string, string >;
-		name?: string;
-	}[] = [];
+	const nodes: StylesNode[] = [];
 
 	if ( ! tree?.styles ) {
 		return nodes;
@@ -1012,6 +1133,7 @@ export const getNodesWithStyles = (
 			nodes.push( {
 				styles: tree.styles?.elements?.[ name ] ?? {},
 				selector: selector as string,
+				elementName: name,
 				// Top level elements that don't use a class name should not receive the
 				// `:root :where()` wrapper to maintain backwards compatibility.
 				skipSelectorWrapper: ! (
@@ -1027,22 +1149,20 @@ export const getNodesWithStyles = (
 			const blockStyles = pickStyleAndPseudoKeys( node, blockName );
 			const typedNode = node as BlockNode;
 
-			// Store variation data for later processing, but don't add to nodes yet.
-			// Variations should be processed AFTER the main block styles to match PHP order.
+			// Store variation child nodes so they can be inserted after the block's own elements.
 			const variationNodesToAdd: typeof nodes = [];
+			const variationStyleNodesToAdd: typeof nodes = [];
 
 			if ( typedNode?.variations ) {
-				const variations: Record< string, any > = {};
 				Object.entries( typedNode.variations ).forEach(
 					( [ variationName, variation ] ) => {
 						const typedVariation = variation as BlockVariation;
-						variations[ variationName ] = pickStyleAndPseudoKeys(
+						const variationStyles = pickStyleAndPseudoKeys(
 							typedVariation,
 							blockName
 						);
 						if ( typedVariation?.css ) {
-							variations[ variationName ].css =
-								typedVariation.css;
+							variationStyles.css = typedVariation.css;
 						}
 						const variationSelector =
 							typeof blockSelectors !== 'string'
@@ -1051,6 +1171,29 @@ export const getNodesWithStyles = (
 										variationName
 								  ]
 								: undefined;
+						if (
+							variationSelector &&
+							typeof blockSelectors !== 'string'
+						) {
+							const blockSelector = blockSelectors[ blockName ];
+							variationStyleNodesToAdd.push( {
+								styles: variationStyles,
+								selector: variationSelector,
+								featureSelectors: getVariationFeatureSelectors(
+									blockSelector?.featureSelectors,
+									variationSelector
+								),
+								fallbackGapValue:
+									blockSelector?.fallbackGapValue,
+								hasLayoutSupport:
+									blockSelector?.hasLayoutSupport,
+								isStyleVariation: true,
+								layoutSelector:
+									variationSelector + blockSelector.selector,
+								layoutHasBlockGapSupport: true,
+								name: blockName,
+							} );
+						}
 
 						// Process the variation's inner element styles.
 						// This comes before the inner block styles so the
@@ -1069,6 +1212,8 @@ export const getNodesWithStyles = (
 										variationSelector,
 										ELEMENTS[ element as ElementName ]
 									),
+									elementName: element,
+									isStyleVariation: true,
 								} );
 							}
 						} );
@@ -1127,6 +1272,8 @@ export const getNodesWithStyles = (
 
 								variationNodesToAdd.push( {
 									selector: variationBlockSelector,
+									name: variationBlockName,
+									isStyleVariation: true,
 									duotoneSelector: variationDuotoneSelector,
 									featureSelectors: variationFeatureSelectors,
 									fallbackGapValue:
@@ -1161,6 +1308,9 @@ export const getNodesWithStyles = (
 														variationBlockElement as ElementName
 													]
 												),
+												elementName:
+													variationBlockElement,
+												isStyleVariation: true,
 											} );
 										}
 									}
@@ -1169,7 +1319,6 @@ export const getNodesWithStyles = (
 						);
 					}
 				);
-				blockStyles.variations = variations;
 			}
 
 			if (
@@ -1187,12 +1336,12 @@ export const getNodesWithStyles = (
 					styles: blockStyles,
 					featureSelectors:
 						blockSelectors[ blockName ].featureSelectors,
-					styleVariationSelectors:
-						blockSelectors[ blockName ].styleVariationSelectors,
 					name: blockName,
 				} );
 			}
 
+			nodes.push( ...variationStyleNodesToAdd );
+
 			Object.entries( typedNode?.elements ?? {} ).forEach(
 				( [ elementName, value ] ) => {
 					if (
@@ -1216,6 +1365,7 @@ export const getNodesWithStyles = (
 									);
 								} )
 								.join( ',' ),
+							elementName,
 						} );
 					}
 				}
@@ -1437,6 +1587,154 @@ export const generateCustomProperties = (
 	return ruleset;
 };
 
+/**
+ * Renders CSS rules for a single style node.
+ *
+ * The node renderer handles feature-level selectors, duotone declarations,
+ * layout styles, base declarations, and custom CSS. State nodes are expanded
+ * before rendering so ordering matches the PHP renderer.
+ *
+ * @param node                          Style node metadata and styles.
+ * @param context                       Render context and feature flags.
+ * @param context.tree                  Global styles tree.
+ * @param context.useRootPaddingAlign   Whether root padding alignment is enabled.
+ * @param context.disableLayoutStyles   Whether layout styles are disabled.
+ * @param context.hasBlockGapSupport    Whether block gap support is enabled.
+ * @param context.hasFallbackGapSupport Whether fallback gap support is enabled.
+ * @param context.disableRootPadding    Whether root padding declarations are disabled.
+ * @return Rendered CSS rules for the node.
+ */
+function renderStylesNode(
+	node: StylesNode,
+	{
+		tree,
+		useRootPaddingAlign,
+		disableLayoutStyles,
+		hasBlockGapSupport,
+		hasFallbackGapSupport,
+		disableRootPadding,
+	}: {
+		tree: GlobalStylesConfig;
+		useRootPaddingAlign?: boolean;
+		disableLayoutStyles: boolean;
+		hasBlockGapSupport?: boolean;
+		hasFallbackGapSupport?: boolean;
+		disableRootPadding: boolean;
+	}
+): string {
+	const {
+		selector,
+		selectorSuffix,
+		mediaQuery,
+		duotoneSelector,
+		styles,
+		fallbackGapValue,
+		hasLayoutSupport,
+		featureSelectors,
+		layoutSelector,
+		layoutHasBlockGapSupport,
+		skipSelectorWrapper,
+		name,
+	} = node;
+	let ruleset = '';
+	const effectiveSelector = selectorSuffix
+		? appendToSelector( selector, selectorSuffix )
+		: selector;
+
+	// Process styles for block support features with custom feature level
+	// CSS selectors set.
+	if ( featureSelectors && typeof featureSelectors !== 'string' ) {
+		let featureDeclarations = getFeatureDeclarations(
+			featureSelectors,
+			styles
+		);
+
+		// Update text indent selector for paragraph blocks based on the textIndent setting.
+		featureDeclarations = updateParagraphTextIndentSelector(
+			featureDeclarations,
+			tree.settings,
+			name
+		);
+
+		// Update button width declarations for percentage values to use calc() with block gap.
+		featureDeclarations = updateButtonWidthDeclarations(
+			featureDeclarations,
+			tree.settings
+		);
+
+		Object.entries( featureDeclarations ).forEach(
+			( [ featureSelector, declarations ] ) => {
+				if ( declarations.length ) {
+					const selectorForRule = selectorSuffix
+						? appendToSelector( featureSelector, selectorSuffix )
+						: featureSelector;
+					const rules = declarations.join( ';' );
+					ruleset += `:root :where(${ selectorForRule }){${ rules };}`;
+				}
+			}
+		);
+	}
+
+	// Process duotone styles.
+	if ( duotoneSelector ) {
+		const duotoneStyles: any = {};
+		if ( styles?.filter ) {
+			duotoneStyles.filter = styles.filter;
+			delete styles.filter;
+		}
+		const duotoneDeclarations = getStylesDeclarations( duotoneStyles );
+		if ( duotoneDeclarations.length ) {
+			ruleset += `${ duotoneSelector }{${ duotoneDeclarations.join(
+				';'
+			) };}`;
+		}
+	}
+
+	// Process blockGap and layout styles.
+	const selectorForLayout = layoutSelector ?? effectiveSelector;
+	const hasBlockGapSupportForLayout =
+		layoutHasBlockGapSupport ?? hasBlockGapSupport;
+	if (
+		! disableLayoutStyles &&
+		( ROOT_BLOCK_SELECTOR === selectorForLayout || hasLayoutSupport )
+	) {
+		ruleset += getLayoutStyles( {
+			style: styles,
+			selector: selectorForLayout,
+			hasBlockGapSupport: hasBlockGapSupportForLayout,
+			hasFallbackGapSupport,
+			fallbackGapValue,
+		} );
+	}
+
+	// Process the remaining block styles (they use either normal block class or __experimentalSelector).
+	const styleDeclarations = getStylesDeclarations(
+		styles,
+		effectiveSelector,
+		useRootPaddingAlign,
+		tree,
+		disableRootPadding
+	);
+	if ( styleDeclarations?.length ) {
+		const generalSelector = skipSelectorWrapper
+			? effectiveSelector
+			: `:root :where(${ effectiveSelector })`;
+		ruleset += `${ generalSelector }{${ styleDeclarations.join( ';' ) };}`;
+	}
+	if ( styles?.css ) {
+		ruleset += processCSSNesting(
+			styles.css,
+			`:root :where(${ effectiveSelector })`
+		);
+	}
+
+	if ( mediaQuery && ruleset ) {
+		return `${ mediaQuery }{${ ruleset }}`;
+	}
+
+	return ruleset;
+}
+
 export const transformToStyles = (
 	tree: GlobalStylesConfig,
 	blockSelectors: string | BlockSelectors,
@@ -1506,213 +1804,29 @@ export const transformToStyles = (
 	}
 
 	if ( options.blockStyles ) {
-		nodesWithStyles.forEach(
-			( {
-				selector,
-				duotoneSelector,
-				styles,
-				fallbackGapValue,
-				hasLayoutSupport,
-				featureSelectors,
-				styleVariationSelectors,
-				skipSelectorWrapper,
-				name,
-			} ) => {
-				// Process styles for block support features with custom feature level
-				// CSS selectors set.
-				if ( featureSelectors ) {
-					let featureDeclarations = getFeatureDeclarations(
-						featureSelectors,
-						styles
-					);
-
-					// Update text indent selector for paragraph blocks based on the textIndent setting.
-					featureDeclarations = updateParagraphTextIndentSelector(
-						featureDeclarations,
-						tree.settings,
-						name
-					);
-
-					// Update button width declarations for percentage values to use calc() with block gap.
-					featureDeclarations = updateButtonWidthDeclarations(
-						featureDeclarations,
-						tree.settings
-					);
-
-					Object.entries( featureDeclarations ).forEach(
-						( [ cssSelector, declarations ] ) => {
-							if ( declarations.length ) {
-								const rules = declarations.join( ';' );
-								ruleset += `:root :where(${ cssSelector }){${ rules };}`;
-							}
-						}
-					);
-				}
-
-				// Process duotone styles.
-				if ( duotoneSelector ) {
-					const duotoneStyles: any = {};
-					if ( styles?.filter ) {
-						duotoneStyles.filter = styles.filter;
-						delete styles.filter;
-					}
-					const duotoneDeclarations =
-						getStylesDeclarations( duotoneStyles );
-					if ( duotoneDeclarations.length ) {
-						ruleset += `${ duotoneSelector }{${ duotoneDeclarations.join(
-							';'
-						) };}`;
-					}
-				}
-
-				// Process blockGap and layout styles.
-				if (
-					! disableLayoutStyles &&
-					( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport )
-				) {
-					ruleset += getLayoutStyles( {
-						style: styles,
-						selector,
-						hasBlockGapSupport,
-						hasFallbackGapSupport,
-						fallbackGapValue,
-					} );
-				}
+		nodesWithStyles.forEach( ( node ) => {
+			if ( node.isStyleVariation && ! options.variationStyles ) {
+				return;
+			}
 
-				// Process the remaining block styles (they use either normal block class or __experimentalSelector).
-				const styleDeclarations = getStylesDeclarations(
-					styles,
-					selector,
-					useRootPaddingAlign,
+			const responsiveNodes = getResponsiveStyleNodes( node );
+			// Match PHP node order: base, responsive base, pseudo, responsive pseudo.
+			[
+				node,
+				...responsiveNodes,
+				...getPseudoStyleNodes( node ),
+				...responsiveNodes.flatMap( getPseudoStyleNodes ),
+			].forEach( ( expandedNode ) => {
+				ruleset += renderStylesNode( expandedNode, {
 					tree,
-					disableRootPadding
-				);
-				if ( styleDeclarations?.length ) {
-					const generalSelector = skipSelectorWrapper
-						? selector
-						: `:root :where(${ selector })`;
-					ruleset += `${ generalSelector }{${ styleDeclarations.join(
-						';'
-					) };}`;
-				}
-				if ( styles?.css ) {
-					ruleset += processCSSNesting(
-						styles.css,
-						`:root :where(${ selector })`
-					);
-				}
-
-				if ( options.variationStyles && styleVariationSelectors ) {
-					Object.entries( styleVariationSelectors ).forEach(
-						( [ styleVariationName, styleVariationSelector ] ) => {
-							const styleVariations =
-								styles?.variations?.[ styleVariationName ];
-							if ( styleVariations ) {
-								// If the block uses any custom selectors for block support, add those first.
-								if ( featureSelectors ) {
-									let featureDeclarations =
-										getFeatureDeclarations(
-											featureSelectors,
-											styleVariations
-										);
-
-									// Update text indent selector for paragraph blocks based on the textIndent setting.
-									featureDeclarations =
-										updateParagraphTextIndentSelector(
-											featureDeclarations,
-											tree.settings,
-											name
-										);
-
-									// Update button width declarations for percentage values to use calc() with block gap.
-									featureDeclarations =
-										updateButtonWidthDeclarations(
-											featureDeclarations,
-											tree.settings
-										);
-
-									Object.entries(
-										featureDeclarations
-									).forEach(
-										( [ baseSelector, declarations ]: [
-											string,
-											string[],
-										] ) => {
-											if ( declarations.length ) {
-												const cssSelector =
-													concatFeatureVariationSelectorString(
-														baseSelector,
-														styleVariationSelector as string
-													);
-												const rules =
-													declarations.join( ';' );
-												ruleset += `:root :where(${ cssSelector }){${ rules };}`;
-											}
-										}
-									);
-								}
-
-								// Otherwise add regular selectors.
-								const styleVariationDeclarations =
-									getStylesDeclarations(
-										styleVariations,
-										styleVariationSelector as string,
-										useRootPaddingAlign,
-										tree
-									);
-								if ( styleVariationDeclarations.length ) {
-									ruleset += `:root :where(${ styleVariationSelector }){${ styleVariationDeclarations.join(
-										';'
-									) };}`;
-								}
-								if ( styleVariations?.css ) {
-									ruleset += processCSSNesting(
-										styleVariations.css,
-										`:root :where(${ styleVariationSelector })`
-									);
-								}
-
-								ruleset = appendPseudoSelectorStyles(
-									styleVariations,
-									styleVariationSelector as string,
-									ruleset,
-									featureSelectors,
-									tree.settings,
-									name,
-									styleVariationSelector as string
-								);
-
-								// Generate layout styles for the variation if it supports layout and has blockGap defined.
-								if (
-									hasLayoutSupport &&
-									styleVariations?.spacing?.blockGap
-								) {
-									// Append block selector to variation selector so layout classes are properly constructed.
-									const variationSelectorWithBlock =
-										styleVariationSelector + selector;
-									ruleset += getLayoutStyles( {
-										style: styleVariations,
-										selector: variationSelectorWithBlock,
-										hasBlockGapSupport: true,
-										hasFallbackGapSupport,
-										fallbackGapValue,
-									} );
-								}
-							}
-						}
-					);
-				}
-
-				ruleset = appendPseudoSelectorStyles(
-					styles,
-					selector,
-					ruleset,
-					featureSelectors,
-					tree.settings,
-					name
-				);
-			}
-		);
+					useRootPaddingAlign,
+					disableLayoutStyles,
+					hasBlockGapSupport,
+					hasFallbackGapSupport,
+					disableRootPadding,
+				} );
+			} );
+		} );
 	}
 
 	if ( options.layoutStyles ) {