WordPress.org
Get WordPress

Make WordPress Core

Changeset 46164


Ignore:
Timestamp:
09/18/2019 02:49:30 PM (6 years ago)
Author:
SergeyBiryukov
Message:

Script Loader: Introduce HTML5 support for scripts and styles.

When a theme declares HTML5 support for script and styles via add_theme_support( 'html5', array( 'script', 'style' ) ), the type="text/javascript" and type="text/css" attributes are omitted.

These attributes are unnecessary in HTML5 and cause warnings in the W3C Markup Validation Service.

Props sasiddiqui, swissspidy, knutsp, SergeyBiryukov.
See #42804.

Location:
trunk
Files:
13 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/admin-bar.php

    r45932 r46164  
    11181118 */
    11191119function wp_admin_bar_header() {
     1120    $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
    11201121    ?>
    1121 <style type="text/css" media="print">#wpadminbar { display:none; }</style>
     1122<style<?php echo $type_attr; ?> media="print">#wpadminbar { display:none; }</style>
    11221123    <?php
    11231124}
    … …  
    11291130 */
    11301131function _admin_bar_bump_cb() {
    1131 
     1132    $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
    11321133    ?>
    1133 <style type="text/css" media="screen">
     1134<style<?php echo $type_attr; ?> media="screen">
    11341135    html { margin-top: 32px !important; }
    11351136    * html body { margin-top: 32px !important; }

  • trunk/src/wp-includes/class.wp-scripts.php

    r45590 r46164  
    124124
    125125    /**
     126     * Holds a string which contains the type attribute for script tag.
     127     *
     128     * If the current theme does not declare HTML5 support for 'script',
     129     * then it initializes as `type='text/javascript'`.
     130     *
     131     * @since 5.3.0
     132     * @var string
     133     */
     134    private $type_attr = '';
     135
     136    /**
    126137     * Constructor.
    127138     *
    … …  
    131142        $this->init();
    132143        add_action( 'init', array( $this, 'init' ), 0 );
     144
     145        if ( ! current_theme_supports( 'html5', 'script' ) ) {
     146            $this->type_attr = " type='text/javascript'";
     147        }
    133148    }
    134149
    … …  
    206221        }
    207222
    208         echo "<script type='text/javascript'>\n"; // CDATA and type='text/javascript' is not needed for HTML 5.
     223        echo "<script{$this->type_attr}>\n"; // CDATA and type="text/javascript" is not needed for HTML 5.
    209224        echo "/* <![CDATA[ */\n";
    210225        echo "$output\n";
    … …  
    267282
    268283        if ( $before_handle ) {
    269             $before_handle = sprintf( "<script type='text/javascript'>\n%s\n</script>\n", $before_handle );
     284            $before_handle = sprintf( "<script%s>\n%s\n</script>\n", $this->type_attr, $before_handle );
    270285        }
    271286
    272287        if ( $after_handle ) {
    273             $after_handle = sprintf( "<script type='text/javascript'>\n%s\n</script>\n", $after_handle );
     288            $after_handle = sprintf( "<script%s>\n%s\n</script>\n", $this->type_attr, $after_handle );
    274289        }
    275290
    276291        if ( $before_handle || $after_handle ) {
    277             $inline_script_tag = "{$cond_before}{$before_handle}{$after_handle}{$cond_after}";
     292            $inline_script_tag = $cond_before . $before_handle . $after_handle . $cond_after;
    278293        } else {
    279294            $inline_script_tag = '';
    … …  
    335350        $translations = $this->print_translations( $handle, false );
    336351        if ( $translations ) {
    337             $translations = sprintf( "<script type='text/javascript'>\n%s\n</script>\n", $translations );
     352            $translations = sprintf( "<script%s>\n%s\n</script>\n", $this->type_attr, $translations );
    338353        }
    339354
    … …  
    353368        }
    354369
    355         $tag = "{$translations}{$cond_before}{$before_handle}<script type='text/javascript' src='$src'></script>\n{$after_handle}{$cond_after}";
     370        $tag  = $translations . $cond_before . $before_handle;
     371        $tag .= sprintf( "<script%s src='%s'></script>\n", $this->type_attr, $src );
     372        $tag .= $after_handle . $cond_after;
    356373
    357374        /**
    … …  
    423440
    424441        if ( $echo ) {
    425             printf( "<script type='text/javascript'>\n%s\n</script>\n", $output );
     442            printf( "<script%s>\n%s\n</script>\n", $this->type_attr, $output );
    426443        }
    427444
    … …  
    558575
    559576        if ( $echo ) {
    560             printf( "<script type='text/javascript'>\n%s\n</script>\n", $output );
     577            printf( "<script%s>\n%s\n</script>\n", $this->type_attr, $output );
    561578        }
    562579

  • trunk/src/wp-includes/class.wp-styles.php

    r46088 r46164  
    102102
    103103    /**
     104     * Holds a string which contains the type attribute for style tag.
     105     *
     106     * If the current theme does not declare HTML5 support for 'style',
     107     * then it initializes as `type='text/css'`.
     108     *
     109     * @since 5.3.0
     110     * @var string
     111     */
     112    private $type_attr = '';
     113
     114    /**
    104115     * Constructor.
    105116     *
    … …  
    115126         */
    116127        do_action_ref_array( 'wp_default_styles', array( &$this ) );
     128
     129        if ( ! current_theme_supports( 'html5', 'style' ) ) {
     130            $this->type_attr = " type='text/css'";
     131        }
    117132    }
    118133
    … …  
    157172
    158173        if ( $inline_style ) {
    159             $inline_style_tag = sprintf( "<style id='%s-inline-css' type='text/css'>\n%s\n</style>\n", esc_attr( $handle ), $inline_style );
     174            $inline_style_tag = sprintf(
     175                "<style id='%s-inline-css'%s>\n%s\n</style>\n",
     176                esc_attr( $handle ),
     177                $this->type_attr,
     178                $inline_style
     179            );
    160180        } else {
    161181            $inline_style_tag = '';
    … …  
    198218
    199219        $rel   = isset( $obj->extra['alt'] ) && $obj->extra['alt'] ? 'alternate stylesheet' : 'stylesheet';
    200         $title = isset( $obj->extra['title'] ) ? "title='" . esc_attr( $obj->extra['title'] ) . "'" : '';
    201 
    202         $tag = "<link rel='$rel' id='$handle-css' $title href='$href' type='text/css' media='$media' />\n";
     220        $title = isset( $obj->extra['title'] ) ? sprintf( "title='%s'", esc_attr( $obj->extra['title'] ) ) : '';
     221
     222        $tag = sprintf(
     223            "<link rel='%s' id='%s-css' %s href='%s'%s media='%s' />\n",
     224            $rel,
     225            $handle,
     226            $title,
     227            $href,
     228            $this->type_attr,
     229            $media
     230        );
    203231
    204232        /**
    … …  
    224252            }
    225253
    226             $rtl_tag = "<link rel='$rel' id='$handle-rtl-css' $title href='$rtl_href' type='text/css' media='$media' />\n";
     254            $rtl_tag = sprintf(
     255                "<link rel='%s' id='%s-rtl-css' %s href='%s'%s media='%s' />\n",
     256                $rel,
     257                $handle,
     258                $title,
     259                $rtl_href,
     260                $this->type_attr,
     261                $media
     262            );
     263
    227264            /** This filter is documented in wp-includes/class.wp-styles.php */
    228265            $rtl_tag = apply_filters( 'style_loader_tag', $rtl_tag, $handle, $rtl_href, $media );
    … …  
    299336        }
    300337
    301         printf( "<style id='%s-inline-css' type='text/css'>\n%s\n</style>\n", esc_attr( $handle ), $output );
     338        printf(
     339            "<style id='%s-inline-css'%s>\n%s\n</style>\n",
     340            esc_attr( $handle ),
     341            $this->type_attr,
     342            $output
     343        );
    302344
    303345        return true;

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

    r45932 r46164  
    10011001 */
    10021002function print_embed_styles() {
     1003    $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
    10031004    ?>
    1004     <style type="text/css">
     1005    <style<?php echo $type_attr; ?>>
    10051006    <?php
    10061007    if ( SCRIPT_DEBUG ) {
    … …  
    10321033 */
    10331034function print_embed_scripts() {
     1035    $type_attr = current_theme_supports( 'html5', 'script' ) ? '' : ' type="text/javascript"';
    10341036    ?>
    1035     <script type="text/javascript">
     1037    <script<?php echo $type_attr; ?>>
    10361038    <?php
    10371039    if ( SCRIPT_DEBUG ) {

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

    r46128 r46164  
    54365436
    54375437    $printed = true;
     5438
     5439    $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
    54385440    ?>
    5439 <style type="text/css">
     5441<style<?php echo $type_attr; ?>>
    54405442img.wp-smiley,
    54415443img.emoji {
    … …  
    55185520    );
    55195521
    5520     $version = 'ver=' . get_bloginfo( 'version' );
     5522    $version   = 'ver=' . get_bloginfo( 'version' );
     5523    $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/javascript"';
    55215524
    55225525    if ( SCRIPT_DEBUG ) {
    … …  
    55295532
    55305533        ?>
    5531         <script type="text/javascript">
     5534        <script<?php echo $type_attr; ?>>
    55325535            window._wpemojiSettings = <?php echo wp_json_encode( $settings ); ?>;
    55335536            <?php readfile( ABSPATH . WPINC . '/js/wp-emoji-loader.js' ); ?>
    … …  
    55515554         */
    55525555        ?>
    5553         <script type="text/javascript">
     5556        <script<?php echo $type_attr; ?>>
    55545557            window._wpemojiSettings = <?php echo wp_json_encode( $settings ); ?>;
    55555558            include "js/wp-emoji-loader.min.js"

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

    r46078 r46164  
    19451945     */
    19461946    if ( apply_filters( 'use_default_gallery_style', ! $html5 ) ) {
     1947        $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
     1948
    19471949        $gallery_style = "
    1948         <style type='text/css'>
     1950        <style{$type_attr}>
    19491951            #{$selector} {
    19501952                margin: auto;

  • trunk/src/wp-includes/script-loader.php

    r46157 r46164  
    24662466    }
    24672467
    2468     $concat = trim( $wp_scripts->concat, ', ' );
     2468    $concat    = trim( $wp_scripts->concat, ', ' );
     2469    $type_attr = current_theme_supports( 'html5', 'script' ) ? '' : " type='text/javascript'";
    24692470
    24702471    if ( $concat ) {
    24712472        if ( ! empty( $wp_scripts->print_code ) ) {
    2472             echo "\n<script type='text/javascript'>\n";
     2473            echo "\n<script{$type_attr}>\n";
    24732474            echo "/* <![CDATA[ */\n"; // not needed in HTML 5
    24742475            echo $wp_scripts->print_code;
    … …  
    24852486
    24862487        $src = $wp_scripts->base_url . "/wp-admin/load-scripts.php?c={$zip}" . $concatenated . '&ver=' . $wp_scripts->default_version;
    2487         echo "<script type='text/javascript' src='" . esc_attr( $src ) . "'></script>\n";
     2488        echo "<script{$type_attr} src='" . esc_attr( $src ) . "'></script>\n";
    24882489    }
    24892490
    … …  
    26472648    }
    26482649
    2649     $concat = trim( $wp_styles->concat, ', ' );
     2650    $concat    = trim( $wp_styles->concat, ', ' );
     2651    $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
    26502652
    26512653    if ( $concat ) {
    … …  
    26612663
    26622664        $href = $wp_styles->base_url . "/wp-admin/load-styles.php?c={$zip}&dir={$dir}" . $concatenated . '&ver=' . $ver;
    2663         echo "<link rel='stylesheet' href='" . esc_attr( $href ) . "' type='text/css' media='all' />\n";
     2665        echo "<link rel='stylesheet' href='" . esc_attr( $href ) . "'{$type_attr} media='all' />\n";
    26642666
    26652667        if ( ! empty( $wp_styles->print_code ) ) {
    2666             echo "<style type='text/css'>\n";
     2668            echo "<style{$type_attr}>\n";
    26672669            echo $wp_styles->print_code;
    26682670            echo "\n</style>\n";

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

    r45926 r46164  
    703703        return;
    704704    }
    705     echo '<link rel="stylesheet" href="' . $stylesheet . '" type="text/css" media="screen" />';
     705
     706    $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
     707
     708    printf(
     709        '<link rel="stylesheet" href="%s"%s media="screen" />',
     710        $stylesheet,
     711        $type_attr
     712    );
    706713}
    707714
    … …  
    16421649    if ( ! $background && ! $color ) {
    16431650        if ( is_customize_preview() ) {
    1644             echo '<style type="text/css" id="custom-background-css"></style>';
     1651            $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
     1652            printf( '<style%s id="custom-background-css"></style>', $type_attr );
    16451653        }
    16461654        return;
    … …  
    16941702
    16951703        $style .= $image . $position . $size . $repeat . $attachment;
     1704
     1705        $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
    16961706    }
    16971707    ?>
    1698 <style type="text/css" id="custom-background-css">
     1708<style<?php echo $type_attr; ?> id="custom-background-css">
    16991709body.custom-background { <?php echo trim( $style ); ?> }
    17001710</style>
    … …  
    17101720    $styles = wp_get_custom_css();
    17111721    if ( $styles || is_customize_preview() ) :
     1722        $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
    17121723        ?>
    1713         <style type="text/css" id="wp-custom-css">
     1724        <style<?php echo $type_attr; ?> id="wp-custom-css">
    17141725            <?php echo strip_tags( $styles ); // Note that esc_html() cannot be used because `div &gt; span` is not interpreted properly. ?>
    17151726        </style>
    … …  
    23362347 *
    23372348 * @since 2.9.0
    2338  * @since 3.6.0 The `html5` feature was added
    2339  * @since 3.9.0 The `html5` feature now also accepts 'gallery' and 'caption'
    2340  * @since 4.1.0 The `title-tag` feature was added
    2341  * @since 4.5.0 The `customize-selective-refresh-widgets` feature was added
    2342  * @since 4.7.0 The `starter-content` feature was added
     2349 * @since 3.6.0 The `html5` feature was added.
     2350 * @since 3.9.0 The `html5` feature now also accepts 'gallery' and 'caption'.
     2351 * @since 4.1.0 The `title-tag` feature was added.
     2352 * @since 4.5.0 The `customize-selective-refresh-widgets` feature was added.
     2353 * @since 4.7.0 The `starter-content` feature was added.
    23432354 * @since 5.0.0 The `responsive-embeds`, `align-wide`, `dark-editor-style`, `disable-custom-colors`,
    23442355 *              `disable-custom-font-sizes`, `editor-color-palette`, `editor-font-sizes`,
    23452356 *              `editor-styles`, and `wp-block-styles` features were added.
     2357 * @since 5.3.0 The `html5` feature now also accepts 'script' and 'style'.
    23462358 *
    23472359 * @global array $_wp_theme_features
    … …  
    26362648        $classes = '.' . implode( ', .', $classes );
    26372649
     2650        $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
    26382651        ?>
    26392652        <!-- Custom Logo: hide header text -->
    2640         <style id="custom-logo-css" type="text/css">
     2653        <style id="custom-logo-css"<?php echo $type_attr; ?>>
    26412654            <?php echo $classes; ?> {
    26422655                position: absolute;
    … …  
    31973210    $home_origin  = parse_url( home_url() );
    31983211    $cross_domain = ( strtolower( $admin_origin['host'] ) != strtolower( $home_origin['host'] ) );
    3199 
     3212    $type_attr    = current_theme_supports( 'html5', 'script' ) ? '' : ' type="text/javascript"';
    32003213    ?>
    32013214    <!--[if lte IE 8]>
    3202         <script type="text/javascript">
     3215        <script<?php echo $type_attr; ?>>
    32033216            document.body.className = document.body.className.replace( /(^|\s)(no-)?customize-support(?=\s|$)/, '' ) + ' no-customize-support';
    32043217        </script>
    32053218    <![endif]-->
    32063219    <!--[if gte IE 9]><!-->
    3207         <script type="text/javascript">
     3220        <script<?php echo $type_attr; ?>>
    32083221            (function() {
    32093222                var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');

  • trunk/src/wp-includes/widgets/class-wp-widget-archives.php

    r44897 r46164  
    9999                    break;
    100100            }
     101
     102            $type_attr = current_theme_supports( 'html5', 'script' ) ? '' : ' type="text/javascript"';
    101103            ?>
    102104
    … …  
    106108        </select>
    107109
    108 <script type='text/javascript'>
     110<script<?php echo $type_attr; ?>>
    109111/* <![CDATA[ */
    110112(function() {

  • trunk/src/wp-includes/widgets/class-wp-widget-categories.php

    r44589 r46164  
    9090
    9191            echo '</form>';
     92
     93            $type_attr = current_theme_supports( 'html5', 'script' ) ? '' : ' type="text/javascript"';
    9294            ?>
    9395
    94 <script type='text/javascript'>
     96<script<?php echo $type_attr; ?>>
    9597/* <![CDATA[ */
    9698(function() {

  • trunk/src/wp-includes/widgets/class-wp-widget-recent-comments.php

    r45932 r46164  
    5454            return;
    5555        }
    56         ?>
    57         <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
    58         <?php
     56
     57        $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
     58
     59        printf(
     60            '<style%s>.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>',
     61            $type_attr
     62        );
    5963    }
    6064

  • trunk/tests/phpunit/tests/dependencies/scripts.php

    r45979 r46164  
    4545        wp_enqueue_script( 'empty-deps-version', 'example.com', array(), 1.2 );
    4646        wp_enqueue_script( 'empty-deps-null-version', 'example.com', array(), null );
     47
    4748        $ver       = get_bloginfo( 'version' );
    4849        $expected  = "<script type='text/javascript' src='http://example.com?ver=$ver'></script>\n";
    … …  
    5556        // No scripts left to print
    5657        $this->assertEquals( '', get_echo( 'wp_print_scripts' ) );
     58    }
     59
     60    /**
     61     * @ticket 42804
     62     */
     63    function test_wp_enqueue_script_with_html5_support_does_not_contain_type_attribute() {
     64        add_theme_support( 'html5', array( 'script' ) );
     65
     66        $GLOBALS['wp_scripts']                  = new WP_Scripts();
     67        $GLOBALS['wp_scripts']->default_version = get_bloginfo( 'version' );
     68
     69        wp_enqueue_script( 'empty-deps-no-version', 'example.com' );
     70
     71        $ver      = get_bloginfo( 'version' );
     72        $expected = "<script src='http://example.com?ver=$ver'></script>\n";
     73
     74        $this->assertEquals( $expected, get_echo( 'wp_print_scripts' ) );
    5775    }
    5876

  • trunk/tests/phpunit/tests/dependencies/styles.php

    r44157 r46164  
    5757        wp_enqueue_style( 'no-deps-null-version', 'example.com', array(), null );
    5858        wp_enqueue_style( 'no-deps-null-version-print-media', 'example.com', array(), null, 'print' );
     59
    5960        $ver       = get_bloginfo( 'version' );
    6061        $expected  = "<link rel='stylesheet' id='no-deps-no-version-css'  href='http://example.com?ver=$ver' type='text/css' media='all' />\n";
    … …  
    6768        // No styles left to print
    6869        $this->assertEquals( '', get_echo( 'wp_print_styles' ) );
     70    }
     71
     72    /**
     73     * @ticket 42804
     74     */
     75    function test_wp_enqueue_style_with_html5_support_does_not_contain_type_attribute() {
     76        add_theme_support( 'html5', array( 'style' ) );
     77
     78        $GLOBALS['wp_styles']                  = new WP_Styles();
     79        $GLOBALS['wp_styles']->default_version = get_bloginfo( 'version' );
     80
     81        wp_enqueue_style( 'no-deps-no-version', 'example.com' );
     82
     83        $ver      = get_bloginfo( 'version' );
     84        $expected = "<link rel='stylesheet' id='no-deps-no-version-css'  href='http://example.com?ver=$ver' media='all' />\n";
     85
     86        $this->assertEquals( $expected, get_echo( 'wp_print_styles' ) );
    6987    }
    7088
Note: See TracChangeset for help on using the changeset viewer.