Add custom CSS support to elements and block style variations

lib/class-wp-theme-json-gutenberg.php

@@ -1102,6 +1102,17 @@ public function get_custom_css() {
 		// Add the global styles root CSS.
 		$stylesheet = _wp_array_get( $this->theme_json, array( 'styles', 'css' ), '' );
 
+		// Add the global styles element CSS.
+		if ( isset( $this->theme_json['styles']['elements'] ) ) {
+			foreach ( $this->theme_json['styles']['elements'] as $element => $node ) {
+				$custom_element_css = _wp_array_get( $this->theme_json, array( 'styles', 'elements', $element, 'css' ) );
+				if ( $custom_element_css ) {
+					$selector    = static::ELEMENTS[ $element ];
+					$stylesheet .= $this->process_blocks_custom_css( $custom_element_css, $selector );
+				}
+			}
+		}
+
 		// Add the global styles block CSS.
 		if ( isset( $this->theme_json['styles']['blocks'] ) ) {
 			foreach ( $this->theme_json['styles']['blocks'] as $name => $node ) {
@@ -1110,6 +1121,26 @@ public function get_custom_css() {
 					$selector    = static::$blocks_metadata[ $name ]['selector'];
 					$stylesheet .= $this->process_blocks_custom_css( $custom_block_css, $selector );
 				}
+				if ( isset( $this->theme_json['styles']['blocks'][ $name ]['variations'] ) ) {
+					foreach ( $this->theme_json['styles']['blocks'][ $name ]['variations'] as $variation_name => $node ) {
+						$custom_variation_css = _wp_array_get( $this->theme_json, array( 'styles', 'blocks', $name, 'variations', $variation_name, 'css' ) );
+						if ( $custom_variation_css ) {
+							if ( 'default' === $variation_name ) {
+								// The default variation is the one that doesn't have a class.
+								// If the default variation is selected, the class .is-style-default is missing.
+								// We need to add a ':not' selector to the selector to target the default variation.
+								$not_selector = '';
+								foreach ( static::$blocks_metadata[ $name ]['styleVariations'] as $not_style_variation_name => $node ) {
+									$not_selector .= ':not(.is-style-' . $not_style_variation_name . ')';
+								}
+								$selector = static::$blocks_metadata[ $name ]['selector'] . $not_selector . ',' . static::$blocks_metadata[ $name ]['styleVariations'][ $variation_name ];
+							} else {
+								$selector = static::$blocks_metadata[ $name ]['styleVariations'][ $variation_name ];
+							}
+							$stylesheet .= $this->process_blocks_custom_css( $custom_variation_css, $selector );
+						}
+					}
+				}
 			}
 		}
 

packages/block-editor/src/components/global-styles/use-global-styles-output.js

@@ -1166,9 +1166,25 @@ export function useGlobalStylesOutput() {
 			},
 		];
 
+		// Loop through the elements to check if there are custom CSS values.
+		// If there are, push the selector together with
+		// the CSS value to the 'styles' array.
+		Object.entries( ELEMENTS ).forEach( ( element ) => {
+			const [ name, elementsSelector ] = element;
+			if ( mergedConfig.styles.elements[ name ]?.css ) {
+				styles.push( {
+					css: processCSSNesting(
+						mergedConfig.styles.elements[ name ]?.css,
+						elementsSelector
+					),
+					isGlobalStyles: true,
+				} );
+			}
+		} );
+
 		// Loop through the blocks to check if there are custom CSS values.
 		// If there are, get the block selector and push the selector together with
-		// the CSS value to the 'stylesheets' array.
+		// the CSS value to the 'styles' array.
 		getBlockTypes().forEach( ( blockType ) => {
 			if ( mergedConfig.styles.blocks[ blockType.name ]?.css ) {
 				const selector = blockSelectors[ blockType.name ].selector;
@@ -1180,6 +1196,26 @@ export function useGlobalStylesOutput() {
 					isGlobalStyles: true,
 				} );
 			}
+
+			/* CSS for block style variations */
+			if ( mergedConfig.styles.blocks[ blockType.name ]?.variations ) {
+				Object.entries(
+					mergedConfig.styles.blocks[ blockType.name ]?.variations
+				).forEach( ( variation ) => {
+					if ( variation[ 1 ].css ) {
+						const variationSelector =
+							blockSelectors[ blockType.name ]
+								.styleVariationSelectors[ variation[ 0 ] ];
+						styles.push( {
+							css: processCSSNesting(
+								variation[ 1 ].css,
+								variationSelector
+							),
+							isGlobalStyles: true,
+						} );
+					}
+				} );
+			}
 		} );
 
 		return [ styles, mergedConfig.settings ];