Fix ability to preview Additional CSS changes in the Customizer when using a Block Theme (#70428)

* Fix ability to preview Custom CSS changes in the Customizer

* Add backport changelog

WordPress/wordpress-develop#9000
#70428

* Undo unnecessary update to deprecated function

* Ensure global styles are shown in Customizer preview and override Customizer styles in cascade

* Add Customizer details to the comment

* Update Customizer Custom CSS inside of global styles for live preview

* Make sure saved milestone comments are removed from stored CSS when previewing

* Add line breaks before/after Custom CSS for readability/debugging

Co-authored-by: Peter Wilson <[email protected]>

* Remove erroneous duplicated appending of global styles custom CSS

* Simplify adding inline script to customize-preview

Co-authored-by: t-hamano <[email protected]>

* Improve JS formatting

* Add commit reference

* Move custom CSS preview logic to 6.9 compat include

Co-authored-by: t-hamano <[email protected]>

---------

Co-authored-by: westonruter <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: Peter Wilson <[email protected]>

Author: 3 people

backport-changelog/6.9/9000.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/9000
+
+* https://github.com/WordPress/gutenberg/pull/70428

lib/compat/wordpress-6.9/customizer-preview-custom-css.php

@@ -0,0 +1,58 @@
+<?php
+/**
+ * Adds inline script to extend customize-preview.js.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Adds JS logic to the Customizer preview for live previewing Custom CSS for Block Themes.
+ *
+ * The logic in this function would be back-ported into customize-preview.js.
+ * This was committed to wordpress-develop trunk in <https://core.trac.wordpress.org/changeset/60522>.
+ */
+function gutenberg_add_customizer_block_theme_custom_css_preview_js() {
+	if ( ! wp_is_block_theme() ) {
+		return;
+	}
+
+	$setting_id = 'custom_css[' . get_stylesheet() . ']';
+
+	$js_function = <<<JS
+		( settingId ) => {
+			wp.customize.bind( 'preview-ready', () => {
+				// Skip running logic that is already merged in trunk.
+				if ( window._wpCustomizeSettings.theme.isBlockTheme ) {
+					return;
+				}
+
+				wp.customize( settingId, function ( setting ) {
+					setting.bind( function ( newValue ) {
+						const style = document.querySelector( 'style#global-styles-inline-css' );
+						if ( ! style ) {
+							return;
+						}
+
+						// Forbid milestone comments from appearing in Custom CSS which would break live preview.
+						newValue = newValue.replace( /\/\*(BEGIN|END)_CUSTOMIZER_CUSTOM_CSS\*\//g, '' );
+
+						style.textContent = style.textContent.replace(
+							/(\/\*BEGIN_CUSTOMIZER_CUSTOM_CSS\*\/)((?:.|\s)*?)(\/\*END_CUSTOMIZER_CUSTOM_CSS\*\/)/,
+							function ( match, beforeComment, oldValue, afterComment ) {
+								return beforeComment + newValue + afterComment;
+							}
+						);
+					} );
+				} );
+			} );
+		}
+JS;
+	wp_add_inline_script(
+		'customize-preview',
+		sprintf( '( %s )( %s )', $js_function, wp_json_encode( $setting_id ) )
+	);
+}
+
+if ( version_compare( get_bloginfo( 'version' ), '6.9.0', '<' ) ) {
+	add_action( 'customize_preview_init', 'gutenberg_add_customizer_block_theme_custom_css_preview_js' );
+}

lib/load.php

@@ -79,6 +79,9 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.8/block-template-utils.php';
 require __DIR__ . '/compat/wordpress-6.8/site-preview.php';
 
+// WordPress 6.9 compat.
+require __DIR__ . '/compat/wordpress-6.9/customizer-preview-custom-css.php';
+
 // Experimental features.
 require __DIR__ . '/experimental/block-editor-settings-mobile.php';
 require __DIR__ . '/experimental/blocks.php';

lib/script-loader.php

@@ -50,8 +50,27 @@ function gutenberg_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.