Adopt alternative approach for updating Customizer CSS embedded among…

… global styles

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

@@ -635,11 +635,22 @@
 		/**
 		 * Preview changes to custom css.
 		 *
-		 * @param {string} value Custom CSS..
+		 * @param {string} value Custom CSS.
 		 * @return {void}
 		 */
 		custom_css: function( value ) {
-			$( '#wp-custom-css' ).text( value );
+			var style;
+			// TODO: If none of the logic in this function resulted in a CSS update (e.g. due to some optimizer plugin that concatenates/minifies CSS), then a message should be sent to the controls to initiate a reload.
+			if ( api.settings.theme.isBlockTheme ) {
+				style = $( 'style#global-styles-inline-css' );
+				var textContent = style.text().replace( /(\/\*BEGIN_CUSTOMIZER_CUSTOM_CSS\*\/)((?:.|\s)*?)(\/\*END_CUSTOMIZER_CUSTOM_CSS\*\/)/, function ( match, beforeComment, oldValue, afterComment ) {
+					return beforeComment + value + afterComment;
+				} );
+				style.text( textContent );
+			} else {
+				style = $( 'style#wp-custom-css' );
+				style.text( value );
+			}
 		},
 
 		/**

src/wp-includes/class-wp-customize-manager.php

@@ -2161,8 +2161,9 @@ public function customize_preview_settings() {
 				'keepAliveSend'    => 1000,
 			),
 			'theme'             => array(
-				'stylesheet' => $this->get_stylesheet(),
-				'active'     => $this->is_theme_active(),
+				'stylesheet'   => $this->get_stylesheet(),
+				'active'       => $this->is_theme_active(),
+				'isBlockTheme' => wp_is_block_theme(),
 			),
 			'url'               => array(
 				'self'          => $self_url,

src/wp-includes/script-loader.php

@@ -2542,21 +2542,16 @@ function wp_enqueue_global_styles() {
 		 */
 		remove_action( 'wp_head', 'wp_custom_css_cb', 101 );
 
+		/*
+		 * Get the custom CSS from the Customizer and add it to the global stylesheet.
+		 * When in the Customizer preview, add milestone comments to allow customize-preview.js inject the CSS updates.
+		 */
 		if ( is_customize_preview() ) {
-			/*
-			 * In the Customizer preview, re-add the Customizer's Custom CSS so it is printed in a separate stylesheet
-			 * and before the global styles. A separate stylesheet needs to be printed for the sake of the Customizer's
-			 * live preview which updates the text contents of the STYLE tag. A priority of 7 is used because other
-			 * styles (including global styles) are printed at priority 8 via wp_print_styles(). This better preserves
-			 * the order in the CSS cascade at least for global styles, although it may not have the expected cascade
-			 * for other stylesheets enqueued by themes and plugins. Originally Custom CSS was printed at wp_head with
-			 * a priority of 101 so that it could all other styles. In this way, the Custom CSS in the Customizer is
-			 * de-prioritized when using a block theme, both inside and outside the Customizer.
-			 */
-			add_action( 'wp_head', 'wp_custom_css_cb', 7 );
-		} else {
-			// Get the custom CSS from the Customizer and add it to the global stylesheet.
-			$stylesheet .= wp_get_custom_css();
+			$stylesheet .= "\n/*BEGIN_CUSTOMIZER_CUSTOM_CSS*/\n";
+		}
+		$stylesheet .= wp_get_custom_css();
+		if ( is_customize_preview() ) {
+			$stylesheet .= "\n/*END_CUSTOMIZER_CUSTOM_CSS*/\n";
 		}
 
 		// Add the global styles custom CSS at the end.