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

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

lib/script-loader.php

@@ -51,19 +51,25 @@ function gutenberg_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;