Fix pseudo selector block style rendering in the editor (#76879)

Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org>

Author: tellthemachines

packages/global-styles-engine/src/core/render.tsx

@@ -156,6 +156,13 @@ const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
 	typography: 'typography',
 };
 
+// The valid pseudo-selectors that can be used for blocks.
+// Keep in sync with WP_Theme_JSON_Gutenberg::VALID_BLOCK_PSEUDO_SELECTORS.
+const VALID_BLOCK_PSEUDO_SELECTORS: Record< string, string[] > = {
+	'core/button': [ ':hover', ':focus', ':focus-visible', ':active' ],
+	'core/navigation-link': [ ':hover', ':focus', ':focus-visible', ':active' ],
+};
+
 /**
  * Transform given preset tree into a set of preset class declarations.
  *
@@ -854,12 +861,23 @@ const STYLE_KEYS = [
 ];
 
 function pickStyleKeys( treeToPickFrom: any ): any {
+	return pickStyleAndPseudoKeys( treeToPickFrom );
+}
+
+function pickStyleAndPseudoKeys(
+	treeToPickFrom: any,
+	blockName?: string
+): any {
 	if ( ! treeToPickFrom ) {
 		return {};
 	}
 	const entries = Object.entries( treeToPickFrom );
-	const pickedEntries = entries.filter( ( [ key ] ) =>
-		STYLE_KEYS.includes( key )
+	const allowedPseudoSelectors = blockName
+		? VALID_BLOCK_PSEUDO_SELECTORS[ blockName ] ?? []
+		: [];
+	const pickedEntries = entries.filter(
+		( [ key ] ) =>
+			STYLE_KEYS.includes( key ) || allowedPseudoSelectors.includes( key )
 	);
 	// clone the style objects so that `getFeatureDeclarations` can remove consumed keys from it
 	const clonedEntries = pickedEntries.map( ( [ key, style ] ) => [
@@ -869,6 +887,92 @@ function pickStyleKeys( treeToPickFrom: any ): any {
 	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;
+	}
+
+	pseudoSelectorStyles.forEach( ( [ pseudoKey, pseudoStyle ] ) => {
+		if ( ! pseudoStyle || typeof pseudoStyle !== '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
+			);
+
+			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 };}`;
+				}
+			);
+		}
+
+		const pseudoDeclarations = getStylesDeclarations(
+			remainingPseudoStyles
+		);
+
+		if ( ! pseudoDeclarations.length ) {
+			return;
+		}
+
+		const pseudoSelector = appendToSelector( selector, pseudoKey );
+		const pseudoRule = `:root :where(${ pseudoSelector }){${ pseudoDeclarations.join(
+			';'
+		) };}`;
+
+		ruleset += pseudoRule;
+	} );
+
+	return ruleset;
+}
+
 export const getNodesWithStyles = (
 	tree: GlobalStylesConfig,
 	blockSelectors: string | BlockSelectors
@@ -920,7 +1024,7 @@ export const getNodesWithStyles = (
 	// Iterate over blocks: they can have styles & elements.
 	Object.entries( tree.styles?.blocks ?? {} ).forEach(
 		( [ blockName, node ] ) => {
-			const blockStyles = pickStyleKeys( node );
+			const blockStyles = pickStyleAndPseudoKeys( node, blockName );
 			const typedNode = node as BlockNode;
 
 			// Store variation data for later processing, but don't add to nodes yet.
@@ -932,8 +1036,10 @@ export const getNodesWithStyles = (
 				Object.entries( typedNode.variations ).forEach(
 					( [ variationName, variation ] ) => {
 						const typedVariation = variation as BlockVariation;
-						variations[ variationName ] =
-							pickStyleKeys( typedVariation );
+						variations[ variationName ] = pickStyleAndPseudoKeys(
+							typedVariation,
+							blockName
+						);
 						if ( typedVariation?.css ) {
 							variations[ variationName ].css =
 								typedVariation.css;
@@ -1002,7 +1108,10 @@ export const getNodesWithStyles = (
 										: undefined;
 
 								const variationBlockStyleNodes =
-									pickStyleKeys( variationBlockStyles );
+									pickStyleAndPseudoKeys(
+										variationBlockStyles,
+										variationBlockName
+									);
 
 								if ( variationBlockStyles?.css ) {
 									variationBlockStyleNodes.css =
@@ -1562,6 +1671,17 @@ export const transformToStyles = (
 										`: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 &&
@@ -1583,45 +1703,14 @@ export const transformToStyles = (
 					);
 				}
 
-				// Check for pseudo selector in `styles` and handle separately.
-				const pseudoSelectorStyles = Object.entries( styles ).filter(
-					( [ key ] ) => key.startsWith( ':' )
+				ruleset = appendPseudoSelectorStyles(
+					styles,
+					selector,
+					ruleset,
+					featureSelectors,
+					tree.settings,
+					name
 				);
-
-				if ( pseudoSelectorStyles?.length ) {
-					pseudoSelectorStyles.forEach(
-						( [ pseudoKey, pseudoStyle ] ) => {
-							const pseudoDeclarations =
-								getStylesDeclarations( pseudoStyle );
-
-							if ( ! pseudoDeclarations?.length ) {
-								return;
-							}
-
-							// `selector` may be provided in a form
-							// where block level selectors have sub element
-							// selectors appended to them as a comma separated
-							// string.
-							// e.g. `h1 a,h2 a,h3 a,h4 a,h5 a,h6 a`;
-							// Split and append pseudo selector to create
-							// the proper rules to target the elements.
-							const _selector = selector
-								.split( ',' )
-								.map( ( sel: string ) => sel + pseudoKey )
-								.join( ',' );
-
-							// As pseudo classes such as :hover, :focus etc. have class-level
-							// specificity, they must use the `:root :where()` wrapper. This.
-							// caps the specificity at `0-1-0` to allow proper nesting of variations
-							// and block type element styles.
-							const pseudoRule = `:root :where(${ _selector }){${ pseudoDeclarations.join(
-								';'
-							) };}`;
-
-							ruleset += pseudoRule;
-						}
-					);
-				}
 			}
 		);
 	}

packages/global-styles-engine/src/test/render.test.ts

@@ -652,6 +652,106 @@ describe( 'global styles renderer', () => {
 			);
 		} );
 
+		it( 'should handle block pseudo selectors', () => {
+			const tree = {
+				styles: {
+					blocks: {
+						'core/button': {
+							color: {
+								text: 'red',
+							},
+							':hover': {
+								color: {
+									text: 'blue',
+								},
+							},
+						},
+					},
+				},
+			} as unknown as GlobalStylesConfig;
+
+			const blockSelectors = {
+				'core/button': {
+					selector: '.wp-block-button',
+				},
+			};
+
+			const result = transformToStyles(
+				Object.freeze( tree ),
+				blockSelectors,
+				false,
+				false,
+				true,
+				true,
+				{
+					blockGap: false,
+					blockStyles: true,
+					layoutStyles: false,
+					marginReset: false,
+					presets: false,
+					rootPadding: false,
+				}
+			);
+
+			expect( result ).toEqual(
+				':root :where(.wp-block-button){color: red;}:root :where(.wp-block-button:hover){color: blue;}'
+			);
+		} );
+
+		it( 'should handle style variation pseudo selectors', () => {
+			const tree = {
+				styles: {
+					blocks: {
+						'core/button': {
+							variations: {
+								foo: {
+									color: {
+										text: 'green',
+									},
+									':hover': {
+										color: {
+											text: 'yellow',
+										},
+									},
+								},
+							},
+						},
+					},
+				},
+			} as unknown as GlobalStylesConfig;
+
+			const blockSelectors = {
+				'core/button': {
+					selector: '.wp-block-button',
+					styleVariationSelectors: {
+						foo: '.is-style-foo.wp-block-button',
+					},
+				},
+			};
+
+			const result = transformToStyles(
+				Object.freeze( tree ),
+				blockSelectors,
+				false,
+				false,
+				true,
+				true,
+				{
+					blockGap: false,
+					blockStyles: true,
+					layoutStyles: false,
+					marginReset: false,
+					presets: false,
+					rootPadding: false,
+					variationStyles: true,
+				}
+			);
+
+			expect( result ).toEqual(
+				':root :where(.is-style-foo.wp-block-button){color: green;}:root :where(.is-style-foo.wp-block-button:hover){color: yellow;}'
+			);
+		} );
+
 		it( 'should handle duotone filter', () => {
 			const tree = {
 				styles: {
@@ -991,7 +1091,7 @@ describe( 'global styles renderer', () => {
 		} );
 
 		it( 'should convert preset percentage width to calc() formula', () => {
-			const tree: GlobalStylesConfig = {
+			const tree = {
 				settings: {
 					blocks: {
 						'core/button': {
@@ -1018,7 +1118,7 @@ describe( 'global styles renderer', () => {
 						},
 					},
 				},
-			};
+			} as unknown as GlobalStylesConfig;
 
 			const blockSelectors = {
 				'core/button': {