Bundled Themes: Use wp_print_inline_script_tag() when available and include sourceURL for JS.

Instead of manually constructing the markup for `SCRIPT` tags, leverage `wp_print_inline_script_tag()` when available to do the construction while also ensuring filters may inject additional attributes on the `SCRIPT` tags, such as `nonce` for CSP. When the function is not available (prior to WP 5.7), fall back to the manual markup construction.

This also adds the `sourceURL` comments to the inline scripts to facilitate debugging, per #63887.

Developed in #9416.

Follow-up to [60909], [60899].

Props debarghyabanerjee, westonruter, hbhalodia, peterwilsoncc, sabernhardt, poena.
See #63887, #59446.
Fixes #63806.


git-svn-id: https://develop.svn.wordpress.org/trunk@60913 602fd350-edb4-49c9-b593-d223f7449a82

Author: westonruter

src/wp-content/themes/twentyfifteen/functions.php

@@ -412,7 +412,14 @@ function twentyfifteen_fonts_url() {
  * @since Twenty Fifteen 1.1
  */
 function twentyfifteen_javascript_detection() {
-	echo "<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>\n";
+	$js  = "(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);";
+	$js .= "\n//# sourceURL=" . rawurlencode( __FUNCTION__ );
+
+	if ( function_exists( 'wp_print_inline_script_tag' ) ) {
+		wp_print_inline_script_tag( $js );
+	} else {
+		echo "<script>$js</script>\n";
+	}
 }
 add_action( 'wp_head', 'twentyfifteen_javascript_detection', 0 );
 

src/wp-content/themes/twentyfifteen/inc/customizer.php

@@ -772,10 +772,11 @@ function twentyfifteen_get_color_scheme_css( $colors ) {
 /**
  * Outputs an Underscore template for generating CSS for the color scheme.
  *
- * The template generates the css dynamically for instant display in the Customizer
+ * The template generates the CSS dynamically for instant display in the Customizer
  * preview.
  *
  * @since Twenty Fifteen 1.0
+ * @since Twenty Fifteen 4.1 Added `wp_print_inline_script_tag()` support.
  */
 function twentyfifteen_color_scheme_css_template() {
 	$colors = array(
@@ -792,10 +793,19 @@ function twentyfifteen_color_scheme_css_template() {
 		'secondary_sidebar_textcolor' => '{{ data.secondary_sidebar_textcolor }}',
 		'meta_box_background_color'   => '{{ data.meta_box_background_color }}',
 	);
-	?>
-	<script type="text/html" id="tmpl-twentyfifteen-color-scheme">
-		<?php echo twentyfifteen_get_color_scheme_css( $colors ); ?>
-	</script>
-	<?php
+
+	$css_template = twentyfifteen_get_color_scheme_css( $colors );
+
+	if ( function_exists( 'wp_print_inline_script_tag' ) ) {
+		wp_print_inline_script_tag(
+			$css_template,
+			array(
+				'type' => 'text/html',
+				'id'   => 'tmpl-twentyfifteen-color-scheme',
+			)
+		);
+	} else {
+		echo '<script type="text/html" id="tmpl-twentyfifteen-color-scheme">' . $css_template . '</script>';
+	}
 }
 add_action( 'customize_controls_print_footer_scripts', 'twentyfifteen_color_scheme_css_template' );

src/wp-content/themes/twentyseventeen/functions.php

@@ -406,7 +406,14 @@ function twentyseventeen_excerpt_more( $link ) {
  * @since Twenty Seventeen 1.0
  */
 function twentyseventeen_javascript_detection() {
-	echo "<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>\n";
+	$js  = "(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);";
+	$js .= "\n//# sourceURL=" . rawurlencode( __FUNCTION__ );
+
+	if ( function_exists( 'wp_print_inline_script_tag' ) ) {
+		wp_print_inline_script_tag( $js );
+	} else {
+		echo "<script>$js</script>\n";
+	}
 }
 add_action( 'wp_head', 'twentyseventeen_javascript_detection', 0 );
 

src/wp-content/themes/twentysixteen/functions.php

@@ -373,7 +373,14 @@ function twentysixteen_fonts_url() {
  * @since Twenty Sixteen 1.0
  */
 function twentysixteen_javascript_detection() {
-	echo "<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>\n";
+	$js  = "(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);";
+	$js .= "\n//# sourceURL=" . rawurlencode( __FUNCTION__ );
+
+	if ( function_exists( 'wp_print_inline_script_tag' ) ) {
+		wp_print_inline_script_tag( $js );
+	} else {
+		echo "<script>$js</script>\n";
+	}
 }
 add_action( 'wp_head', 'twentysixteen_javascript_detection', 0 );
 

src/wp-content/themes/twentysixteen/inc/customizer.php

@@ -838,6 +838,7 @@ function twentysixteen_get_color_scheme_css( $colors ) {
  * Customizer preview.
  *
  * @since Twenty Sixteen 1.0
+ * @since Twenty Sixteen 4.1 Added `wp_print_inline_script_tag()` support.
  */
 function twentysixteen_color_scheme_css_template() {
 	$colors = array(
@@ -848,11 +849,20 @@ function twentysixteen_color_scheme_css_template() {
 		'secondary_text_color'  => '{{ data.secondary_text_color }}',
 		'border_color'          => '{{ data.border_color }}',
 	);
-	?>
-	<script type="text/html" id="tmpl-twentysixteen-color-scheme">
-		<?php echo twentysixteen_get_color_scheme_css( $colors ); ?>
-	</script>
-	<?php
+
+	$css_template = twentysixteen_get_color_scheme_css( $colors );
+
+	if ( function_exists( 'wp_print_inline_script_tag' ) ) {
+		wp_print_inline_script_tag(
+			$css_template,
+			array(
+				'type' => 'text/html',
+				'id'   => 'tmpl-twentysixteen-color-scheme',
+			)
+		);
+	} else {
+		echo '<script type="text/html" id="tmpl-twentysixteen-color-scheme">' . $css_template . '</script>';
+	}
 }
 add_action( 'customize_controls_print_footer_scripts', 'twentysixteen_color_scheme_css_template' );
 

src/wp-content/themes/twentytwenty/inc/template-tags.php

@@ -660,10 +660,14 @@ function twentytwenty_nav_menu_social_icons( $item_output, $item, $depth, $args
  * @since Twenty Twenty 1.0
  */
 function twentytwenty_no_js_class() {
+	$js  = "document.documentElement.className = document.documentElement.className.replace( 'no-js', 'js' );";
+	$js .= "\n//# sourceURL=" . rawurlencode( __FUNCTION__ );
 
-	?>
-	<script>document.documentElement.className = document.documentElement.className.replace( 'no-js', 'js' );</script>
-	<?php
+	if ( function_exists( 'wp_print_inline_script_tag' ) ) {
+		wp_print_inline_script_tag( $js );
+	} else {
+		echo "<script>$js</script>\n";
+	}
 }
 
 add_action( 'wp_head', 'twentytwenty_no_js_class' );

src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php

@@ -363,9 +363,14 @@ public function the_html( $attrs = array() ) {
 	 * @return void
 	 */
 	public function the_script() {
-		echo '<script>';
-		include get_template_directory() . '/assets/js/dark-mode-toggler.js'; // phpcs:ignore WPThemeReview.CoreFunctionality.FileInclude
-		echo '</script>';
+		$path = 'assets/js/dark-mode-toggler.js';
+		$js   = rtrim( file_get_contents( trailingslashit( get_template_directory() ) . $path ) );
+		$js  .= "\n//# sourceURL=" . esc_url_raw( trailingslashit( get_template_directory_uri() ) . $path );
+		if ( function_exists( 'wp_print_inline_script_tag' ) ) {
+			wp_print_inline_script_tag( $js );
+		} else {
+			printf( "<script>%s</script>\n", $js );
+		}
 	}
 
 	/**

src/wp-content/themes/twentytwentyone/functions.php

@@ -630,13 +630,18 @@ function twentytwentyone_the_html_classes() {
  * @return void
  */
 function twentytwentyone_add_ie_class() {
-	?>
-	<script>
-	if ( -1 !== navigator.userAgent.indexOf( 'MSIE' ) || -1 !== navigator.appVersion.indexOf( 'Trident/' ) ) {
-		document.body.classList.add( 'is-IE' );
+	$script  = "
+		if ( -1 !== navigator.userAgent.indexOf('MSIE') || -1 !== navigator.appVersion.indexOf('Trident/') ) {
+			document.body.classList.add('is-IE');
+		}
+	";
+	$script .= '//# sourceURL=' . rawurlencode( __FUNCTION__ );
+
+	if ( function_exists( 'wp_print_inline_script_tag' ) ) {
+		wp_print_inline_script_tag( $script );
+	} else {
+		echo "<script>$script</script>\n";
 	}
-	</script>
-	<?php
 }
 add_action( 'wp_footer', 'twentytwentyone_add_ie_class' );
 

src/wp-content/themes/twentytwentyone/inc/template-functions.php

@@ -74,7 +74,14 @@ function twenty_twenty_one_pingback_header() {
  * @return void
  */
 function twenty_twenty_one_supports_js() {
-	echo '<script>document.body.classList.remove("no-js");</script>';
+	$js  = "document.body.classList.remove('no-js');";
+	$js .= "\n//# sourceURL=" . rawurlencode( __FUNCTION__ );
+
+	if ( function_exists( 'wp_print_inline_script_tag' ) ) {
+		wp_print_inline_script_tag( $js );
+	} else {
+		echo "<script>$js</script>\n";
+	}
 }
 add_action( 'wp_footer', 'twenty_twenty_one_supports_js' );
 

src/wp-includes/embed.php

@@ -520,7 +520,7 @@ function get_post_embed_html( $width, $height, $post = null ) {
 	 */
 	$js_path = '/js/wp-embed' . wp_scripts_get_suffix() . '.js';
 	$output .= wp_get_inline_script_tag(
-		trim( file_get_contents( ABSPATH . WPINC . $js_path ) ) . "\n//# sourceURL=" . includes_url( $js_path )
+		trim( file_get_contents( ABSPATH . WPINC . $js_path ) ) . "\n//# sourceURL=" . esc_url_raw( includes_url( $js_path ) )
 	);
 
 	/**
@@ -1093,7 +1093,7 @@ function wp_enqueue_embed_styles() {
 function print_embed_scripts() {
 	$js_path = '/js/wp-embed-template' . wp_scripts_get_suffix() . '.js';
 	wp_print_inline_script_tag(
-		trim( file_get_contents( ABSPATH . WPINC . $js_path ) ) . "\n//# sourceURL=" . includes_url( $js_path )
+		trim( file_get_contents( ABSPATH . WPINC . $js_path ) ) . "\n//# sourceURL=" . esc_url_raw( includes_url( $js_path ) )
 	);
 }