Changeset 60522 for trunk/src/wp-includes/script-loader.php

Timestamp:

07/30/2025 04:22:38 AM (3 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.

File:

• trunk/src/wp-includes/script-loader.php (modified) (1 diff)

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;