Changeset 60522

Timestamp:

07/30/2025 04:22:38 AM (4 months ago)

Author:

westonruter

Message:

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.

Location:

trunk/src

Files:

• js/_enqueues/wp/customize/preview.js (modified) (1 diff)
• wp-includes/class-wp-customize-manager.php (modified) (1 diff)
• wp-includes/script-loader.php (modified) (1 diff)

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

@@ -636 +636 @@
          * 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 );
+            }
         },
 

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

@@ -2162 +2162 @@
             ),
             '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(

trunk/src/wp-includes/script-loader.php

@@ -2542 +2542 @@
          */
         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;