Allow custom CSS for theme.json elements

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

@@ -1343,6 +1343,22 @@ public function get_block_custom_css_nodes() {
 			}
 		}
 
+		// 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 = isset( $this->theme_json['styles']['elements'][ $element ]['css'] )
+					? $this->theme_json['styles']['elements'][ $element ]['css']
+					: null;
+				if ( $custom_element_css ) {
+					$block_nodes[] = array(
+						'name'     => $element,
+						'selector' => static::ELEMENTS[ $element ],
+						'css'      => $custom_element_css,
+					);
+				}
+			}
+		}
+
 		return $block_nodes;
 	}
 

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

@@ -1242,9 +1242,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;