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

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

Author: westonruter

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

@@ -645,7 +645,7 @@
 				style = $( 'style#global-styles-inline-css' );
 				value = value.replace( /\/\*(BEGIN|END)_CUSTOMIZER_CUSTOM_CSS\*\//g, '' ); // Forbid milestone comments from appearing in Custom CSS which would break live preview.
 				var textContent = style.text().replace( /(\/\*BEGIN_CUSTOMIZER_CUSTOM_CSS\*\/)((?:.|\s)*?)(\/\*END_CUSTOMIZER_CUSTOM_CSS\*\/)/, function ( match, beforeComment, oldValue, afterComment ) {
-					return beforeComment + value + afterComment;
+					return beforeComment + '\n' + value + '\n' + afterComment;
 				} );
 				style.text( textContent );
 			} else {

src/wp-includes/script-loader.php

@@ -2542,19 +2542,25 @@ 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.
-		$custom_css = wp_get_custom_css();
-		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 . $custom_css . $after_milestone;
+		/*
+		 * 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;