Fix block style selectors when root block selector is an element

WordPress · Jan 15, 2024 · 15270b6 · 15270b6
1 parent f092ad7
commit 15270b6
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
@@ -1020,8 +1020,8 @@ protected static function get_blocks_metadata() {
 					foreach ( $registered_styles[ $block_name ] as $block_style ) {
 						if ( ! isset( $style_selectors[ $block_style['name'] ] ) ) {
 							$style_selectors[ $block_style['name'] ] = static::append_to_selector(
-								'.is-style-' . $block_style['name'],
-								$block_metadata['selector']
+								$block_metadata['selector'],
+								'.is-style-' . $block_style['name']
 							);
 						}
 					}
@@ -1065,14 +1065,14 @@ protected static function get_blocks_metadata() {
 			$style_selectors = array();
 			if ( ! empty( $block_type->styles ) ) {
 				foreach ( $block_type->styles as $style ) {
-					$style_selectors[ $style['name'] ] = static::append_to_selector( '.is-style-' . $style['name'], static::$blocks_metadata[ $block_name ]['selector'] );
+					$style_selectors[ $style['name'] ] = static::append_to_selector( static::$blocks_metadata[ $block_name ]['selector'], '.is-style-' . $style['name'] );
 				}
 			}
 
 			// Block style variations can be registered through the WP_Block_Styles_Registry as well as block.json.
 			$registered_styles = $style_registry->get_registered_styles_for_block( $block_name );
 			foreach ( $registered_styles as $style ) {
-				$style_selectors[ $style['name'] ] = static::append_to_selector( '.is-style-' . $style['name'], static::$blocks_metadata[ $block_name ]['selector'] );
+				$style_selectors[ $style['name'] ] = static::append_to_selector( static::$blocks_metadata[ $block_name ]['selector'], '.is-style-' . $style['name'] );
 			}
 
 			if ( ! empty( $style_selectors ) ) {

diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -1164,7 +1164,7 @@ export const getBlockSelectors = ( blockTypes, getBlockStyles ) => {
 		const styleVariationSelectors = {};
 
 		blockStyleVariations?.forEach( ( variation ) => {
-			const styleVariationSelector = `.is-style-${ variation.name }${ selector }`;
+			const styleVariationSelector = `${ selector }.is-style-${ variation.name }`;
 			styleVariationSelectors[ variation.name ] = styleVariationSelector;
 		} );