Output custom CSS as separate styles in block themes

Author: t-hamano

src/js/_enqueues/wp/customize/preview.js

@@ -639,7 +639,7 @@
 		 * @return {void}
 		 */
 		custom_css: function( value ) {
-			$( '#wp-custom-css' ).text( value );
+			$( '#wp-custom-css-inline-css' ).text( value );
 		},
 
 		/**

src/wp-includes/script-loader.php

@@ -2535,20 +2535,6 @@ function wp_enqueue_global_styles() {
 
 	$stylesheet = wp_get_global_stylesheet();
 
-	if ( $is_block_theme ) {
-		/*
-		 * Dequeue the Customizer's custom CSS
-		 * and add it before the global styles custom CSS.
-		 */
-		remove_action( 'wp_head', 'wp_custom_css_cb', 101 );
-		// Get the custom CSS from the Customizer and add it to the global stylesheet.
-		$custom_css  = wp_get_custom_css();
-		$stylesheet .= $custom_css;
-
-		// Add the global styles custom CSS at the end.
-		$stylesheet .= wp_get_global_stylesheet( array( 'custom-css' ) );
-	}
-
 	if ( empty( $stylesheet ) ) {
 		return;
 	}
@@ -2557,6 +2543,24 @@ function wp_enqueue_global_styles() {
 	wp_add_inline_style( 'global-styles', $stylesheet );
 	wp_enqueue_style( 'global-styles' );
 
+	if ( $is_block_theme ) {
+		/*
+		* Dequeue the Customizer's custom CSS
+		* and add it before the global styles custom CSS.
+		*/
+		remove_action( 'wp_head', 'wp_custom_css_cb', 101 );
+		$customizer_custom_css  = wp_get_custom_css();
+		wp_register_style( 'wp-custom-css', false );
+		wp_add_inline_style( 'wp-custom-css', $customizer_custom_css );
+		wp_enqueue_style( 'wp-custom-css' );
+
+		// Enqueue the global styles custom CSS.
+		$global_styles_custom_css = wp_get_global_stylesheet( array( 'custom-css' ) );
+		wp_register_style( 'global-styles-custom-css', false );
+		wp_add_inline_style( 'global-styles-custom-css', $global_styles_custom_css );
+		wp_enqueue_style( 'global-styles-custom-css' );
+	}
+
 	// Add each block as an inline css.
 	wp_add_global_styles_for_blocks();
 }

src/wp-includes/theme.php

@@ -1958,7 +1958,7 @@ function wp_custom_css_cb() {
 	if ( $styles || is_customize_preview() ) :
 		$type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
 		?>
-		<style<?php echo $type_attr; ?> id="wp-custom-css">
+		<style<?php echo $type_attr; ?> id="wp-custom-css-inline-css">
 			<?php
 			// Note that esc_html() cannot be used because `div &gt; span` is not interpreted properly.
 			echo strip_tags( $styles );