Allow custom CSS for theme.json elements

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

@@ -1178,6 +1178,17 @@ public function get_custom_css() {
 		// Add the global styles root CSS.
 		$stylesheet = $this->theme_json['styles']['css'] ?? '';
 
+		// Add the global styles elements 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 ) {

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

@@ -1230,9 +1230,25 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 			},
 		];
 
+		// 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;