Customize: Enable Customizer live previews of Custom CSS in Block Themes.

In a Block Theme, the Custom CSS from the Customizer is inserted into the global styles, before the global style's Custom CSS. In order to update the Customizer's Custom CSS inside of the global styles, milestone CSS comments are added in the preview so that the live preview logic can do the replacement.

Follow-up to [55192], [58703].
See #57536, #61395.

Props westonruter, wildworks, peterwilsoncc, rollybueno, SirLouen, poojapadamad, rafiq91, audrasjb.
Fixes #63589.


git-svn-id: https://develop.svn.wordpress.org/trunk@60522 602fd350-edb4-49c9-b593-d223f7449a82

Author: westonruter

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

@@ -635,11 +635,28 @@
 		/**
 		 * 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;
+			if ( api.settings.theme.isBlockTheme ) {
+				style = $( 'style#global-styles-inline-css' );
+
+				// Forbid milestone comments from appearing in Custom CSS which would break live preview.
+				value = value.replace( /\/\*(BEGIN|END)_CUSTOMIZER_CUSTOM_CSS\*\//g, '' );
+
+				var textContent = style.text().replace(
+					/(\/\*BEGIN_CUSTOMIZER_CUSTOM_CSS\*\/)((?:.|\s)*?)(\/\*END_CUSTOMIZER_CUSTOM_CSS\*\/)/,
+					function ( match, beforeComment, oldValue, afterComment ) {
+						return beforeComment + '\n' + value + '\n' + 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

@@ -2541,8 +2541,27 @@ function wp_enqueue_global_styles() {
 		 * 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();
+
+		/*
+		 * Get the custom CSS from the Customizer and add it to the global stylesheet.
+		 * Always do this in Customizer preview for the sake of live preview since it be empty.
+		 */
+		$custom_css = trim( wp_get_custom_css() );
+		if ( $custom_css || is_customize_preview() ) {
+			if ( is_customize_preview() ) {
+				/*
+				 * When in the Customizer preview, wrap the Custom CSS in milestone comments to allow customize-preview.js
+				 * to locate the CSS to replace for live previewing. Make sure that the milestone comments are omitted from
+				 * the stored Custom CSS if by chance someone tried to add them, which would be highly unlikely, but it
+				 * would break live previewing.
+				 */
+				$before_milestone = '/*BEGIN_CUSTOMIZER_CUSTOM_CSS*/';
+				$after_milestone  = '/*END_CUSTOMIZER_CUSTOM_CSS*/';
+				$custom_css       = str_replace( array( $before_milestone, $after_milestone ), '', $custom_css );
+				$custom_css       = $before_milestone . "\n" . $custom_css . "\n" . $after_milestone;
+			}
+			$custom_css = "\n" . $custom_css;
+		}
 		$stylesheet .= $custom_css;
 
 		// Add the global styles custom CSS at the end.