WordPress.org
Get WordPress

Make WordPress Core

Changeset 60913

Timestamp:
10/07/2025 11:32:04 PM (2 days 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.