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. Built from https://develop.svn.wordpress.org/trunk@46164 git-svn-id: http://core.svn.wordpress.org/trunk@45976 1a063a9b-81f0-0310-95a4-ce76da25c4cd
WordPress · Sep 18, 2019 · 2526286 · 2526286
1 parent 095805b
commit 2526286
Show file tree

Hide file tree

Showing 12 changed files with 139 additions and 49 deletions.
diff --git a/wp-includes/admin-bar.php b/wp-includes/admin-bar.php
@@ -1117,8 +1117,9 @@ function wp_admin_bar_add_secondary_groups( $wp_admin_bar ) {
  * @since 3.1.0
  */
 function wp_admin_bar_header() {
+	$type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
 	?>
-<style type="text/css" media="print">#wpadminbar { display:none; }</style>
+<style<?php echo $type_attr; ?> media="print">#wpadminbar { display:none; }</style>
 	<?php
 }
 
@@ -1128,9 +1129,9 @@ function wp_admin_bar_header() {
  * @since 3.1.0
  */
 function _admin_bar_bump_cb() {
-
+	$type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
 	?>
-<style type="text/css" media="screen">
+<style<?php echo $type_attr; ?> media="screen">
 	html { margin-top: 32px !important; }
 	* html body { margin-top: 32px !important; }
 	@media screen and ( max-width: 782px ) {

diff --git a/wp-includes/class.wp-scripts.php b/wp-includes/class.wp-scripts.php
@@ -122,6 +122,17 @@ class WP_Scripts extends WP_Dependencies {
 	 */
 	public $default_dirs;
 
+	/**
+	 * Holds a string which contains the type attribute for script tag.
+	 *
+	 * If the current theme does not declare HTML5 support for 'script',
+	 * then it initializes as `type='text/javascript'`.
+	 *
+	 * @since 5.3.0
+	 * @var string
+	 */
+	private $type_attr = '';
+
 	/**
 	 * Constructor.
 	 *
@@ -130,6 +141,10 @@ class WP_Scripts extends WP_Dependencies {
 	public function __construct() {
 		$this->init();
 		add_action( 'init', array( $this, 'init' ), 0 );
+
+		if ( ! current_theme_supports( 'html5', 'script' ) ) {
+			$this->type_attr = " type='text/javascript'";
+		}
 	}
 
 	/**
@@ -205,7 +220,7 @@ public function print_extra_script( $handle, $echo = true ) {
 			return $output;
 		}
 
-		echo "<script type='text/javascript'>\n"; // CDATA and type='text/javascript' is not needed for HTML 5.
+		echo "<script{$this->type_attr}>\n"; // CDATA and type="text/javascript" is not needed for HTML 5.
 		echo "/* <![CDATA[ */\n";
 		echo "$output\n";
 		echo "/* ]]> */\n";
@@ -266,15 +281,15 @@ public function do_item( $handle, $group = false ) {
 		$after_handle  = $this->print_inline_script( $handle, 'after', false );
 
 		if ( $before_handle ) {
-			$before_handle = sprintf( "<script type='text/javascript'>\n%s\n</script>\n", $before_handle );
+			$before_handle = sprintf( "<script%s>\n%s\n</script>\n", $this->type_attr, $before_handle );
 		}
 
 		if ( $after_handle ) {
-			$after_handle = sprintf( "<script type='text/javascript'>\n%s\n</script>\n", $after_handle );
+			$after_handle = sprintf( "<script%s>\n%s\n</script>\n", $this->type_attr, $after_handle );
 		}
 
 		if ( $before_handle || $after_handle ) {
-			$inline_script_tag = "{$cond_before}{$before_handle}{$after_handle}{$cond_after}";
+			$inline_script_tag = $cond_before . $before_handle . $after_handle . $cond_after;
 		} else {
 			$inline_script_tag = '';
 		}
@@ -334,7 +349,7 @@ public function do_item( $handle, $group = false ) {
 
 		$translations = $this->print_translations( $handle, false );
 		if ( $translations ) {
-			$translations = sprintf( "<script type='text/javascript'>\n%s\n</script>\n", $translations );
+			$translations = sprintf( "<script%s>\n%s\n</script>\n", $this->type_attr, $translations );
 		}
 
 		if ( ! preg_match( '|^(https?:)?//|', $src ) && ! ( $this->content_url && 0 === strpos( $src, $this->content_url ) ) ) {
@@ -352,7 +367,9 @@ public function do_item( $handle, $group = false ) {
 			return true;
 		}
 
-		$tag = "{$translations}{$cond_before}{$before_handle}<script type='text/javascript' src='$src'></script>\n{$after_handle}{$cond_after}";
+		$tag  = $translations . $cond_before . $before_handle;
+		$tag .= sprintf( "<script%s src='%s'></script>\n", $this->type_attr, $src );
+		$tag .= $after_handle . $cond_after;
 
 		/**
 		 * Filters the HTML script tag of an enqueued script.
@@ -422,7 +439,7 @@ public function print_inline_script( $handle, $position = 'after', $echo = true
 		$output = trim( implode( "\n", $output ), "\n" );
 
 		if ( $echo ) {
-			printf( "<script type='text/javascript'>\n%s\n</script>\n", $output );
+			printf( "<script%s>\n%s\n</script>\n", $this->type_attr, $output );
 		}
 
 		return $output;
@@ -557,7 +574,7 @@ public function print_translations( $handle, $echo = true ) {
 JS;
 
 		if ( $echo ) {
-			printf( "<script type='text/javascript'>\n%s\n</script>\n", $output );
+			printf( "<script%s>\n%s\n</script>\n", $this->type_attr, $output );
 		}
 
 		return $output;

diff --git a/wp-includes/class.wp-styles.php b/wp-includes/class.wp-styles.php
@@ -100,6 +100,17 @@ class WP_Styles extends WP_Dependencies {
 	 */
 	public $default_dirs;
 
+	/**
+	 * Holds a string which contains the type attribute for style tag.
+	 *
+	 * If the current theme does not declare HTML5 support for 'style',
+	 * then it initializes as `type='text/css'`.
+	 *
+	 * @since 5.3.0
+	 * @var string
+	 */
+	private $type_attr = '';
+
 	/**
 	 * Constructor.
 	 *
@@ -114,6 +125,10 @@ public function __construct() {
 		 * @param WP_Styles $this WP_Styles instance (passed by reference).
 		 */
 		do_action_ref_array( 'wp_default_styles', array( &$this ) );
+
+		if ( ! current_theme_supports( 'html5', 'style' ) ) {
+			$this->type_attr = " type='text/css'";
+		}
 	}
 
 	/**
@@ -156,7 +171,12 @@ public function do_item( $handle ) {
 		$inline_style = $this->print_inline_style( $handle, false );
 
 		if ( $inline_style ) {
-			$inline_style_tag = sprintf( "<style id='%s-inline-css' type='text/css'>\n%s\n</style>\n", esc_attr( $handle ), $inline_style );
+			$inline_style_tag = sprintf(
+				"<style id='%s-inline-css'%s>\n%s\n</style>\n",
+				esc_attr( $handle ),
+				$this->type_attr,
+				$inline_style
+			);
 		} else {
 			$inline_style_tag = '';
 		}
@@ -197,9 +217,17 @@ public function do_item( $handle ) {
 		}
 
 		$rel   = isset( $obj->extra['alt'] ) && $obj->extra['alt'] ? 'alternate stylesheet' : 'stylesheet';
-		$title = isset( $obj->extra['title'] ) ? "title='" . esc_attr( $obj->extra['title'] ) . "'" : '';
-
-		$tag = "<link rel='$rel' id='$handle-css' $title href='$href' type='text/css' media='$media' />\n";
+		$title = isset( $obj->extra['title'] ) ? sprintf( "title='%s'", esc_attr( $obj->extra['title'] ) ) : '';
+
+		$tag = sprintf(
+			"<link rel='%s' id='%s-css' %s href='%s'%s media='%s' />\n",
+			$rel,
+			$handle,
+			$title,
+			$href,
+			$this->type_attr,
+			$media
+		);
 
 		/**
 		 * Filters the HTML link tag of an enqueued style.
@@ -223,7 +251,16 @@ public function do_item( $handle ) {
 				$rtl_href = $this->_css_href( $obj->extra['rtl'], $ver, "$handle-rtl" );
 			}
 
-			$rtl_tag = "<link rel='$rel' id='$handle-rtl-css' $title href='$rtl_href' type='text/css' media='$media' />\n";
+			$rtl_tag = sprintf(
+				"<link rel='%s' id='%s-rtl-css' %s href='%s'%s media='%s' />\n",
+				$rel,
+				$handle,
+				$title,
+				$rtl_href,
+				$this->type_attr,
+				$media
+			);
+
 			/** This filter is documented in wp-includes/class.wp-styles.php */
 			$rtl_tag = apply_filters( 'style_loader_tag', $rtl_tag, $handle, $rtl_href, $media );
 
@@ -298,7 +335,12 @@ public function print_inline_style( $handle, $echo = true ) {
 			return $output;
 		}
 
-		printf( "<style id='%s-inline-css' type='text/css'>\n%s\n</style>\n", esc_attr( $handle ), $output );
+		printf(
+			"<style id='%s-inline-css'%s>\n%s\n</style>\n",
+			esc_attr( $handle ),
+			$this->type_attr,
+			$output
+		);
 
 		return true;
 	}

diff --git a/wp-includes/embed.php b/wp-includes/embed.php
@@ -1000,8 +1000,9 @@ function enqueue_embed_scripts() {
  * @since 4.4.0
  */
 function print_embed_styles() {
+	$type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
 	?>
-	<style type="text/css">
+	<style<?php echo $type_attr; ?>>
 	<?php
 	if ( SCRIPT_DEBUG ) {
 		readfile( ABSPATH . WPINC . '/css/wp-embed-template.css' );
@@ -1032,8 +1033,9 @@ function print_embed_styles() {
  * @since 4.4.0
  */
 function print_embed_scripts() {
+	$type_attr = current_theme_supports( 'html5', 'script' ) ? '' : ' type="text/javascript"';
 	?>
-	<script type="text/javascript">
+	<script<?php echo $type_attr; ?>>
 	<?php
 	if ( SCRIPT_DEBUG ) {
 		readfile( ABSPATH . WPINC . '/js/wp-embed-template.js' );

diff --git a/wp-includes/formatting.php b/wp-includes/formatting.php
@@ -5435,8 +5435,10 @@ function print_emoji_styles() {
 	}
 
 	$printed = true;
+
+	$type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
 	?>
-<style type="text/css">
+<style<?php echo $type_attr; ?>>
 img.wp-smiley,
 img.emoji {
 	display: inline !important;
@@ -5517,7 +5519,8 @@ function _print_emoji_detection_script() {
 		'svgExt'  => apply_filters( 'emoji_svg_ext', '.svg' ),
 	);
 
-	$version = 'ver=' . get_bloginfo( 'version' );
+	$version   = 'ver=' . get_bloginfo( 'version' );
+	$type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/javascript"';
 
 	if ( SCRIPT_DEBUG ) {
 		$settings['source'] = array(
@@ -5528,7 +5531,7 @@ function _print_emoji_detection_script() {
 		);
 
 		?>
-		<script type="text/javascript">
+		<script<?php echo $type_attr; ?>>
 			window._wpemojiSettings = <?php echo wp_json_encode( $settings ); ?>;
 			<?php readfile( ABSPATH . WPINC . '/js/wp-emoji-loader.js' ); ?>
 		</script>
@@ -5550,7 +5553,7 @@ function _print_emoji_detection_script() {
 		 * and edit wp-emoji-loader.js directly.
 		 */
 		?>
-		<script type="text/javascript">
+		<script<?php echo $type_attr; ?>>
 			window._wpemojiSettings = <?php echo wp_json_encode( $settings ); ?>;
 			!function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039]))&&(!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]),!b));case"emoji":return b=d([55357,56424,55356,57342,8205,55358,56605,8205,55357,56424,55356,57340],[55357,56424,55356,57342,8203,55358,56605,8203,55357,56424,55356,57340]),!b}return!1}function f(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var g,h,i,j,k=b.createElement("canvas"),l=k.getContext&&k.getContext("2d");for(j=Array("flag","emoji"),c.supports={everything:!0,everythingExceptFlag:!0},i=0;i<j.length;i++)c.supports[j[i]]=e(j[i]),c.supports.everything=c.supports.everything&&c.supports[j[i]],"flag"!==j[i]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[j[i]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(h=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",h,!1),a.addEventListener("load",h,!1)):(a.attachEvent("onload",h),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),g=c.source||{},g.concatemoji?f(g.concatemoji):g.wpemoji&&g.twemoji&&(f(g.twemoji),f(g.wpemoji)))}(window,document,window._wpemojiSettings);
 		</script>

diff --git a/wp-includes/media.php b/wp-includes/media.php
@@ -1944,8 +1944,10 @@ function gallery_shortcode( $attr ) {
 	 *                    Otherwise, defaults to true.
 	 */
 	if ( apply_filters( 'use_default_gallery_style', ! $html5 ) ) {
+		$type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
+
 		$gallery_style = "
-		<style type='text/css'>
+		<style{$type_attr}>
 			#{$selector} {
 				margin: auto;
 			}

diff --git a/wp-includes/script-loader.php b/wp-includes/script-loader.php
@@ -2465,11 +2465,12 @@ function _print_scripts() {
 		$zip = 'gzip';
 	}
 
-	$concat = trim( $wp_scripts->concat, ', ' );
+	$concat    = trim( $wp_scripts->concat, ', ' );
+	$type_attr = current_theme_supports( 'html5', 'script' ) ? '' : " type='text/javascript'";
 
 	if ( $concat ) {
 		if ( ! empty( $wp_scripts->print_code ) ) {
-			echo "\n<script type='text/javascript'>\n";
+			echo "\n<script{$type_attr}>\n";
 			echo "/* <![CDATA[ */\n"; // not needed in HTML 5
 			echo $wp_scripts->print_code;
 			echo "/* ]]> */\n";
@@ -2484,7 +2485,7 @@ function _print_scripts() {
 		}
 
 		$src = $wp_scripts->base_url . "/wp-admin/load-scripts.php?c={$zip}" . $concatenated . '&ver=' . $wp_scripts->default_version;
-		echo "<script type='text/javascript' src='" . esc_attr( $src ) . "'></script>\n";
+		echo "<script{$type_attr} src='" . esc_attr( $src ) . "'></script>\n";
 	}
 
 	if ( ! empty( $wp_scripts->print_html ) ) {
@@ -2646,7 +2647,8 @@ function _print_styles() {
 		$zip = 'gzip';
 	}
 
-	$concat = trim( $wp_styles->concat, ', ' );
+	$concat    = trim( $wp_styles->concat, ', ' );
+	$type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';
 
 	if ( $concat ) {
 		$dir = $wp_styles->text_direction;
@@ -2660,10 +2662,10 @@ function _print_styles() {
 		}
 
 		$href = $wp_styles->base_url . "/wp-admin/load-styles.php?c={$zip}&dir={$dir}" . $concatenated . '&ver=' . $ver;
-		echo "<link rel='stylesheet' href='" . esc_attr( $href ) . "' type='text/css' media='all' />\n";
+		echo "<link rel='stylesheet' href='" . esc_attr( $href ) . "'{$type_attr} media='all' />\n";
 
 		if ( ! empty( $wp_styles->print_code ) ) {
-			echo "<style type='text/css'>\n";
+			echo "<style{$type_attr}>\n";
 			echo $wp_styles->print_code;
 			echo "\n</style>\n";
 		}