Emoji: Instead of loading the emoji JS files automatically, we now include a small JS shim in the header, to test if the user's browser needs Twemoji. It then loads the emoji JS files only if they're needed.

Props pento, azaozz.

Fixes #31701.



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

Gruntfile.js

@@ -464,6 +464,19 @@ module.exports = function(grunt) {
 					BUILD_DIR + 'wp-includes/js/tinymce/plugins/*/plugin.min.js'
 				],
 				dest: BUILD_DIR + 'wp-includes/js/tinymce/wp-tinymce.js'
+			},
+			emoji: {
+				options: {
+					separator: '\n',
+					process: function( src, filepath ) {
+						return '// Source: ' + filepath.replace( BUILD_DIR, '' ) + '\n' + src;
+					}
+				},
+				src: [
+					BUILD_DIR + 'wp-includes/js/twemoji.min.js',
+					BUILD_DIR + 'wp-includes/js/wp-emoji.min.js'
+				],
+				dest: BUILD_DIR + 'wp-includes/js/wp-emoji-release.min.js'
 			}
 		},
 		compress: {
@@ -502,6 +515,12 @@ module.exports = function(grunt) {
 				dest: SOURCE_DIR
 			}
 		},
+		includes: {
+			emoji: {
+				src: BUILD_DIR + 'wp-includes/formatting.php',
+				dest: '.'
+			}
+		},
 		_watch: {
 			all: {
 				files: [
@@ -615,6 +634,8 @@ module.exports = function(grunt) {
 		'concat:tinymce',
 		'compress:tinymce',
 		'clean:tinymce',
+		'concat:emoji',
+		'includes:emoji',
 		'jsvalidate:build'
 	] );
 

package.json

@@ -22,6 +22,7 @@
     "grunt-contrib-qunit": "~0.5.2",
     "grunt-contrib-uglify": "~0.8.0",
     "grunt-contrib-watch": "~0.6.1",
+    "grunt-includes": "~0.4.5",
     "grunt-jsvalidate": "~0.2.2",
     "grunt-legacy-util": "^0.2.0",
     "grunt-patch-wordpress": "~0.3.0",

src/wp-includes/default-filters.php

@@ -213,6 +213,7 @@ add_action( 'wp_head',             'adjacent_posts_rel_link_wp_head', 10, 0 );
 add_action( 'wp_head',             'locale_stylesheet'                      );
 add_action( 'publish_future_post', 'check_and_publish_future_post',   10, 1 );
 add_action( 'wp_head',             'noindex',                          1    );
+add_action( 'wp_head',             'print_emoji_detection_script',     7    );
 add_action( 'wp_head',             'wp_print_styles',                  8    );
 add_action( 'wp_head',             'wp_print_head_scripts',            9    );
 add_action( 'wp_head',             'wp_generator'                           );

src/wp-includes/formatting.php

@@ -4082,6 +4082,13 @@ function wp_spaces_regexp() {
  * @since 4.2.0
  */
 function print_emoji_styles() {
+	static $printed = false;
+
+	if ( $printed ) {
+		return;
+	}
+
+	$printed = true;
 ?>
 <style type="text/css">
 img.wp-smiley,
@@ -4100,6 +4107,64 @@ img.emoji {
 <?php
 }
 
+function print_emoji_detection_script() {
+	global $wp_version;
+	static $printed = false;
+
+	if ( $printed ) {
+		return;
+	}
+
+	$printed = true;
+
+	$settings = array(
+		/**
+		 * Filter the URL where emoji images are hosted.
+		 *
+		 * @since 4.2.0
+		 *
+		 * @param string The emoji base URL.
+		 */
+		'baseUrl' => apply_filters( 'emoji_url', set_url_scheme( '//s0.wp.com/wp-content/mu-plugins/emoji/twemoji/72x72' ) ),
+
+		/**
+		 * Filter the extension of the emoji files.
+		 *
+		 * @since 4.2.0
+		 *
+		 * @param string The emoji extension. Default .png.
+		 */
+		'ext'     => apply_filters( 'emoji_ext', '.png' ),
+	);
+
+	$version = 'ver=' . $wp_version;
+
+	if ( SCRIPT_DEBUG ) {
+		$settings['source'] = array(
+			'wpemoji' => includes_url( "js/wp-emoji.js?$version" ),
+			'twemoji' => includes_url( "js/twemoji.js?$version" ),
+		);
+
+		?>
+		<script type="text/javascript">
+			window._wpemojiSettings = <?php echo wp_json_encode( $settings ); ?>;
+			<?php readfile( ABSPATH . WPINC . "/js/wp-emoji-loader.js" ); ?>
+		</script>
+		<?php
+	} else {
+		$settings['source'] = array(
+			'concatemoji' => includes_url( "js/wp-emoji-release.min.js?$version" ),
+		);
+
+		?>
+		<script type="text/javascript">
+			window._wpemojiSettings = <?php echo wp_json_encode( $settings ); ?>;
+			include "js/wp-emoji-loader.min.js"
+		</script>
+		<?php
+	}
+}
+
 /**
  * Convert any 4 byte emoji in a string to their equivalent HTML entity.
  *
@@ -4163,10 +4228,10 @@ function wp_staticize_emoji( $text ) {
 		return $text;
 	}
 
-	/** This filter is documented in wp-includes/script-loader.php */
+	/** This filter is documented in wp-includes/formatting.php */
 	$cdn_url = apply_filters( 'emoji_url', set_url_scheme( '//s0.wp.com/wp-content/mu-plugins/emoji/twemoji/72x72/' ) );
 
-	/** This filter is documented in wp-includes/script-loader.php */
+	/** This filter is documented in wp-includes/formatting.php */
 	$ext = apply_filters( 'emoji_ext', '.png' );
 
 	$output = '';

src/wp-includes/js/wp-emoji-loader.js

@@ -0,0 +1,76 @@
+( function( window, document, settings ) {
+	var src;
+
+	/**
+	 * Detect if the browser supports rendering emoji or flag emoji. Flag emoji are a single glyph
+	 * made of two characters, so some browsers (notably, Firefox OS X) don't support them.
+	 *
+	 * @since 4.2.0
+	 *
+	 * @param type {String} Whether to test for support of "simple" or "flag" emoji.
+	 * @return {Boolean} True if the browser can render emoji, false if it cannot.
+	 */
+	function browserSupportsEmoji( type ) {
+		var canvas = document.createElement( 'canvas' ),
+			context = canvas.getContext && canvas.getContext( '2d' );
+
+		if ( ! context || ! context.fillText ) {
+			return false;
+		}
+
+		/*
+		 * Chrome on OS X added native emoji rendering in M41. Unfortunately,
+		 * it doesn't work when the font is bolder than 500 weight. So, we
+		 * check for bold rendering support to avoid invisible emoji in Chrome.
+		 */
+		context.textBaseline = 'top';
+		context.font = '600 32px Arial';
+
+		if ( type === 'flag' ) {
+			/*
+			 * This works because the image will be one of three things:
+			 * - Two empty squares, if the browser doesn't render emoji
+			 * - Two squares with 'G' and 'B' in them, if the browser doesn't render flag emoji
+			 * - The British flag
+			 *
+			 * The first two will encode to small images (1-2KB data URLs), the third will encode
+			 * to a larger image (4-5KB data URL).
+			 */
+			context.fillText( String.fromCharCode( 55356, 56812, 55356, 56807 ), 0, 0 );
+			return canvas.toDataURL().length > 3000;
+		} else {
+			/*
+			 * This creates a smiling emoji, and checks to see if there is any image data in the
+			 * center pixel. In browsers that don't support emoji, the character will be rendered
+			 * as an empty square, so the center pixel will be blank.
+			 */
+			context.fillText( String.fromCharCode( 55357, 56835 ), 0, 0 );
+			return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
+		}
+	}
+
+	function addScript( src ) {
+		var script = document.createElement( 'script' );
+
+		script.src = src;
+		script.type = 'text/javascript';
+		document.getElementsByTagName( 'head' )[0].appendChild( script );
+	}
+
+	settings.supports = {
+		simple: browserSupportsEmoji( 'simple' ),
+		flag:   browserSupportsEmoji( 'flag' )
+	};
+
+	if ( ! settings.supports.simple || ! settings.supports.flag ) {
+		src = settings.source || {};
+
+		if ( src.concatemoji ) {
+			addScript( src.concatemoji );
+		} else if ( src.wpemoji && src.twemoji ) {
+			addScript( src.twemoji );
+			addScript( src.wpemoji );
+		}
+	}
+
+} )( window, document, window._wpemojiSettings );

src/wp-includes/js/wp-emoji.js

@@ -1,5 +1,5 @@
 
-( function( window, twemoji, settings ) {
+( function( window, settings ) {
 	function wpEmoji() {
 		var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
 
@@ -28,7 +28,11 @@
 		 *
 		 * @var Boolean
 		 */
-		replaceEmoji = false;
+		replaceEmoji = false,
+
+		// Private
+		twemoji, timer,
+		count = 0;
 
 		/**
 		 * Runs when the document load event is fired, so we can do our first parse of the page.
@@ -36,6 +40,22 @@
 		 * @since 4.2.0
 		 */
 		function load() {
+			if ( typeof window.twemoji === 'undefined' ) {
+				// Break if waiting for longer than 30 sec.
+				if ( count > 600 ) {
+					return;
+				}
+
+				// Still waiting. 
+				window.clearTimeout( timer );
+				timer = window.setTimeout( load, 50 );
+				count++;
+
+				return;
+			}
+
+			twemoji = window.twemoji;
+
 			if ( MutationObserver ) {
 				new MutationObserver( function( mutationRecords ) {
 					var i = mutationRecords.length,
@@ -65,54 +85,6 @@
 			parse( document.body );
 		}
 
-		/**
-		 * Detect if the browser supports rendering emoji or flag emoji. Flag emoji are a single glyph
-		 * made of two characters, so some browsers (notably, Firefox OS X) don't support them.
-		 *
-		 * @since 4.2.0
-		 *
-		 * @param type {String} Whether to test for support of "simple" or "flag" emoji.
-		 * @return {Boolean} True if the browser can render emoji, false if it cannot.
-		 */
-		function browserSupportsEmoji( type ) {
-			var canvas = document.createElement( 'canvas' ),
-				context = canvas.getContext && canvas.getContext( '2d' );
-
-			if ( ! context || ! context.fillText ) {
-				return false;
-			}
-
-			/*
-			 * Chrome on OS X added native emoji rendering in M41. Unfortunately,
-			 * it doesn't work when the font is bolder than 500 weight. So, we
-			 * check for bold rendering support to avoid invisible emoji in Chrome.
-			 */
-			context.textBaseline = 'top';
-			context.font = '600 32px Arial';
-
-			if ( type === 'flag' ) {
-				/*
-				 * This works because the image will be one of three things:
-				 * - Two empty squares, if the browser doesn't render emoji
-				 * - Two squares with 'G' and 'B' in them, if the browser doesn't render flag emoji
-				 * - The British flag
-				 *
-				 * The first two will encode to small images (1-2KB data URLs), the third will encode
-				 * to a larger image (4-5KB data URL).
-				 */
-				context.fillText( String.fromCharCode( 55356, 56812, 55356, 56807 ), 0, 0 );
-				return canvas.toDataURL().length > 3000;
-			} else {
-				/*
-				 * This creates a smiling emoji, and checks to see if there is any image data in the
-				 * center pixel. In browsers that don't support emoji, the character will be rendered
-				 * as an empty square, so the center pixel will be blank.
-				 */
-				context.fillText( String.fromCharCode( 55357, 56835 ), 0, 0 );
-				return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
-			}
-		}
-
 		/**
 		 * Given an element or string, parse any emoji characters into Twemoji images.
 		 *
@@ -157,23 +129,33 @@
 			} );
 		}
 
+		// Load when the readyState changes to 'interactive', not 'complete'.
+		function onLoad() {
+			if ( 'interactive' === document.readyState ) {
+				load();
+			}
+		}
+
 		/**
 		 * Initialize our emoji support, and set up listeners.
 		 */
-		if ( twemoji && settings ) {
+		if ( settings ) {
-			supportsEmoji = browserSupportsEmoji();
+			supportsEmoji = window._wpemojiSettings.supports.simple;
-			supportsFlagEmoji = browserSupportsEmoji( 'flag' );
+			supportsFlagEmoji = window._wpemojiSettings.supports.flag;
 			replaceEmoji = ! supportsEmoji || ! supportsFlagEmoji;
 
-			if ( window.addEventListener ) {
+			if ( 'loading' == document.readyState ) {
-				window.addEventListener( 'load', load, false );
+				if ( document.addEventListener ) {
-			} else if ( window.attachEvent ) {
+					document.addEventListener( 'readystatechange', onLoad, false );
-				window.attachEvent( 'onload', load );
+				} else if ( document.attachEvent ) {
+					document.attachEvent( 'onreadystatechange', onLoad );
+				}
+			} else {
+				load();
 			}
 		}
 
 		return {
-			browserSupportsEmoji: browserSupportsEmoji,
 			replaceEmoji: replaceEmoji,
 			parse: parse
 		};
@@ -182,4 +164,4 @@
 	window.wp = window.wp || {};
 	window.wp.emoji = new wpEmoji();
 
-} )( window, window.twemoji, window._wpemojiSettings );
+} )( window, window._wpemojiSettings );

src/wp-includes/script-loader.php

@@ -424,29 +424,6 @@ function wp_default_scripts( &$scripts ) {
 	$scripts->add( 'media-audiovideo', "/wp-includes/js/media/audio-video$suffix.js", array( 'media-editor' ), false, 1 );
 	$scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'media-models', 'media-audiovideo', 'wp-playlist' ), false, 1 );
 
-	$scripts->add( 'twemoji', "/wp-includes/js/twemoji$suffix.js", array(), '1.3.2', 1 );
-	$scripts->add( 'emoji', "/wp-includes/js/wp-emoji$suffix.js", array( 'twemoji' ), false, 1 );
-	did_action( 'init' ) && $scripts->localize( 'emoji', '_wpemojiSettings', array(
-		/**
-		 * Filter the URL where emoji images are hosted.
-		 *
-		 * @since 4.2.0
-		 *
-		 * @param string The emoji base URL.
-		 */
-		'baseUrl' => apply_filters( 'emoji_url', '//s0.wp.com/wp-content/mu-plugins/emoji/twemoji/72x72' ),
-
-		/**
-		 * Filter the extension of the emoji files.
-		 *
-		 * @since 4.2.0
-		 *
-		 * @param string The emoji extension. Default .png.
-		 */
-		'ext'      => apply_filters( 'emoji_ext', '.png' ),
-	) );
-	$scripts->enqueue( 'emoji' );
-
 	if ( is_admin() ) {
 		$scripts->add( 'admin-tags', "/wp-admin/js/tags$suffix.js", array( 'jquery', 'wp-ajax-response' ), false, 1 );
 		did_action( 'init' ) && $scripts->localize( 'admin-tags', 'tagsl10n', array(