WordPress.org
Get WordPress

Make WordPress Core

Changeset 60913


Ignore:
Timestamp:
10/07/2025 11:32:04 PM (11 months ago)
Author:
westonruter
Message:

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 ​https://github.com/WordPress/wordpress-develop/pull/9416.

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

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

Location:
trunk/src
Files:
11 edited

Legend:

Unmodified
Added
Removed

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

    r60521 r60913  
    413413 */
    414414function twentyfifteen_javascript_detection() {
    415         echo "<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>\n";
     415        $js  = "(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);";
     416        $js .= "\n//# sourceURL=" . rawurlencode( __FUNCTION__ );
     417
     418        if ( function_exists( 'wp_print_inline_script_tag' ) ) {
     419                wp_print_inline_script_tag( $js );
     420        } else {
     421                echo "<script>$js</script>\n";
     422        }
    416423}
    417424add_action( 'wp_head', 'twentyfifteen_javascript_detection', 0 );

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

    r60521 r60913  
    773773 * Outputs an Underscore template for generating CSS for the color scheme.
    774774 *
    775  * The template generates the css dynamically for instant display in the Customizer
     775 * The template generates the CSS dynamically for instant display in the Customizer
    776776 * preview.
    777777 *
    778778 * @since Twenty Fifteen 1.0
     779 * @since Twenty Fifteen 4.1 Added `wp_print_inline_script_tag()` support.
    779780 */
    780781function twentyfifteen_color_scheme_css_template() {
    … …  
    793794                'meta_box_background_color'   => '{{ data.meta_box_background_color }}',
    794795        );
    795         ?>
    796         <script type="text/html" id="tmpl-twentyfifteen-color-scheme">
    797                 <?php echo twentyfifteen_get_color_scheme_css( $colors ); ?>
    798         </script>
    799         <?php
     796
     797        $css_template = twentyfifteen_get_color_scheme_css( $colors );
     798
     799        if ( function_exists( 'wp_print_inline_script_tag' ) ) {
     800                wp_print_inline_script_tag(
     801                        $css_template,
     802                        array(
     803                                'type' => 'text/html',
     804                                'id'   => 'tmpl-twentyfifteen-color-scheme',
     805                        )
     806                );
     807        } else {
     808                echo '<script type="text/html" id="tmpl-twentyfifteen-color-scheme">' . $css_template . '</script>';
     809        }
    800810}
    801811add_action( 'customize_controls_print_footer_scripts', 'twentyfifteen_color_scheme_css_template' );

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

    r60533 r60913  
    407407 */
    408408function twentyseventeen_javascript_detection() {
    409         echo "<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>\n";
     409        $js  = "(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);";
     410        $js .= "\n//# sourceURL=" . rawurlencode( __FUNCTION__ );
     411
     412        if ( function_exists( 'wp_print_inline_script_tag' ) ) {
     413                wp_print_inline_script_tag( $js );
     414        } else {
     415                echo "<script>$js</script>\n";
     416        }
    410417}
    411418add_action( 'wp_head', 'twentyseventeen_javascript_detection', 0 );

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

    r60527 r60913  
    374374 */
    375375function twentysixteen_javascript_detection() {
    376         echo "<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>\n";
     376        $js  = "(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);";
     377        $js .= "\n//# sourceURL=" . rawurlencode( __FUNCTION__ );
     378
     379        if ( function_exists( 'wp_print_inline_script_tag' ) ) {
     380                wp_print_inline_script_tag( $js );
     381        } else {
     382                echo "<script>$js</script>\n";
     383        }
    377384}
    378385add_action( 'wp_head', 'twentysixteen_javascript_detection', 0 );

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

    r60527 r60913  
    839839 *
    840840 * @since Twenty Sixteen 1.0
     841 * @since Twenty Sixteen 4.1 Added `wp_print_inline_script_tag()` support.
    841842 */
    842843function twentysixteen_color_scheme_css_template() {
    … …  
    849850                'border_color'          => '{{ data.border_color }}',
    850851        );
    851         ?>
    852         <script type="text/html" id="tmpl-twentysixteen-color-scheme">
    853                 <?php echo twentysixteen_get_color_scheme_css( $colors ); ?>
    854         </script>
    855         <?php
     852
     853        $css_template = twentysixteen_get_color_scheme_css( $colors );
     854
     855        if ( function_exists( 'wp_print_inline_script_tag' ) ) {
     856                wp_print_inline_script_tag(
     857                        $css_template,
     858                        array(
     859                                'type' => 'text/html',
     860                                'id'   => 'tmpl-twentysixteen-color-scheme',
     861                        )
     862                );
     863        } else {
     864                echo '<script type="text/html" id="tmpl-twentysixteen-color-scheme">' . $css_template . '</script>';
     865        }
    856866}
    857867add_action( 'customize_controls_print_footer_scripts', 'twentysixteen_color_scheme_css_template' );

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

    r60536 r60913  
    661661 */
    662662function twentytwenty_no_js_class() {
    663 
    664         ?>
    665         <script>document.documentElement.className = document.documentElement.className.replace( 'no-js', 'js' );</script>
    666         <?php
     663        $js  = "document.documentElement.className = document.documentElement.className.replace( 'no-js', 'js' );";
     664        $js .= "\n//# sourceURL=" . rawurlencode( __FUNCTION__ );
     665
     666        if ( function_exists( 'wp_print_inline_script_tag' ) ) {
     667                wp_print_inline_script_tag( $js );
     668        } else {
     669                echo "<script>$js</script>\n";
     670        }
    667671}
    668672

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

    r56559 r60913  
    364364         */
    365365        public function the_script() {
    366                 echo '<script>';
    367                 include get_template_directory() . '/assets/js/dark-mode-toggler.js'; // phpcs:ignore WPThemeReview.CoreFunctionality.FileInclude
    368                 echo '</script>';
     366                $path = 'assets/js/dark-mode-toggler.js';
     367                $js   = rtrim( file_get_contents( trailingslashit( get_template_directory() ) . $path ) );
     368                $js  .= "\n//# sourceURL=" . esc_url_raw( trailingslashit( get_template_directory_uri() ) . $path );
     369                if ( function_exists( 'wp_print_inline_script_tag' ) ) {
     370                        wp_print_inline_script_tag( $js );
     371                } else {
     372                        printf( "<script>%s</script>\n", $js );
     373                }
    369374        }
    370375

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

    r56556 r60913  
    631631 */
    632632function twentytwentyone_add_ie_class() {
    633         ?>
    634         <script>
    635         if ( -1 !== navigator.userAgent.indexOf( 'MSIE' ) || -1 !== navigator.appVersion.indexOf( 'Trident/' ) ) {
    636                 document.body.classList.add( 'is-IE' );
    637         }
    638         </script>
    639         <?php
     633        $script  = "
     634                if ( -1 !== navigator.userAgent.indexOf('MSIE') || -1 !== navigator.appVersion.indexOf('Trident/') ) {
     635                        document.body.classList.add('is-IE');
     636                }
     637        ";
     638        $script .= '//# sourceURL=' . rawurlencode( __FUNCTION__ );
     639
     640        if ( function_exists( 'wp_print_inline_script_tag' ) ) {
     641                wp_print_inline_script_tag( $script );
     642        } else {
     643                echo "<script>$script</script>\n";
     644        }
    640645}
    641646add_action( 'wp_footer', 'twentytwentyone_add_ie_class' );

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

    r60537 r60913  
    7575 */
    7676function twenty_twenty_one_supports_js() {
    77         echo '<script>document.body.classList.remove("no-js");</script>';
     77        $js  = "document.body.classList.remove('no-js');";
     78        $js .= "\n//# sourceURL=" . rawurlencode( __FUNCTION__ );
     79
     80        if ( function_exists( 'wp_print_inline_script_tag' ) ) {
     81                wp_print_inline_script_tag( $js );
     82        } else {
     83                echo "<script>$js</script>\n";
     84        }
    7885}
    7986add_action( 'wp_footer', 'twenty_twenty_one_supports_js' );

  • trunk/src/wp-includes/embed.php

    r60909 r60913  
    521521        $js_path = '/js/wp-embed' . wp_scripts_get_suffix() . '.js';
    522522        $output .= wp_get_inline_script_tag(
    523                 trim( file_get_contents( ABSPATH . WPINC . $js_path ) ) . "\n//# sourceURL=" . includes_url( $js_path )
     523                trim( file_get_contents( ABSPATH . WPINC . $js_path ) ) . "\n//# sourceURL=" . esc_url_raw( includes_url( $js_path ) )
    524524        );
    525525
    … …  
    10941094        $js_path = '/js/wp-embed-template' . wp_scripts_get_suffix() . '.js';
    10951095        wp_print_inline_script_tag(
    1096                 trim( file_get_contents( ABSPATH . WPINC . $js_path ) ) . "\n//# sourceURL=" . includes_url( $js_path )
     1096                trim( file_get_contents( ABSPATH . WPINC . $js_path ) ) . "\n//# sourceURL=" . esc_url_raw( includes_url( $js_path ) )
    10971097        );
    10981098}

  • trunk/src/wp-includes/formatting.php

    r60902 r60913  
    59935993        wp_print_inline_script_tag(
    59945994                rtrim( file_get_contents( ABSPATH . WPINC . $emoji_loader_script_path ) ) . "\n" .
    5995                 '//# sourceURL=' . includes_url( $emoji_loader_script_path ),
     5995                '//# sourceURL=' . esc_url_raw( includes_url( $emoji_loader_script_path ) ),
    59965996                array(
    59975997                        'type' => 'module',
Note: See TracChangeset for help on using the changeset viewer.