Ticket #31701: 31701.4.diff

Gruntfile.js

@@ -464 +464 @@
                                         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: {
@@ -613 +626 @@
                 'uglify:media',
                 'uglify:jqueryui',
                 'concat:tinymce',
+                'concat:emoji',
                 'compress:tinymce',
                 'clean:tinymce',
                 'jsvalidate:build'

src/wp-includes/default-filters.php

@@ -224 +224 @@
 add_action( 'init',                'check_theme_switched',            99    );
 add_action( 'after_switch_theme',  '_wp_sidebars_changed'                   );
 add_action( 'wp_print_styles',     'print_emoji_styles'                     );
+add_action( 'wp_print_scripts',    'print_emoji_detection_script'           );
 
 if ( isset( $_GET['replytocom'] ) )
     add_action( 'wp_head', 'wp_no_robots' );

src/wp-includes/formatting.php

@@ -4082 +4082 @@
  * @since 4.2.0
  */
 function print_emoji_styles() {
+        static $printed = false;
+        if ( $printed ) {
+                return;
+        }
+        $printed = true;
 ?>
 <style type="text/css">
 img.wp-smiley,
@@ -4100 +4105 @@
 <?php
 }
 
+function print_emoji_detection_script() {
+        global $wp_version;
+
+        static $printed = false;
+        if ( $printed ) {
+                return;
+        }
+        $printed = true;
+
+        $min = SCRIPT_DEBUG ? '' : '.min';
+
+        $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', '//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' ),
+                'ver'     => $wp_version,
+        );
+
+        if ( SCRIPT_DEBUG ) {
+                $settings['js'] = array(
+                        'wpemoji' => includes_url( "js/wp-emoji.js" ),
+                        'twemoji' => includes_url( "js/twemoji.js" ),
+                );
+        } else {
+                $settings['js'] = array(
+                        'wpemoji' => includes_url( "js/wp-emoji-release.min.js" ),
+                );
+        }
+
+        ?>
+                <script type="text/javascript">
+                        window._wpemojiSettings = <?php echo wp_json_encode( $settings ); ?>;
+                        <?php readfile( ABSPATH . WPINC . "/js/wp-emoji-loader$min.js" ); ?>
+                </script>
+        <?php
+}
+
 /**
  * Convert any 4 byte emoji in a string to their equivalent HTML entity.
  *

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

@@ +1 @@
+( function( window ) {
+        /**
+         * 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.
+         */
+        var browserSupportsEmoji = function( 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;
+                }
+        };
+
+        if ( ! browserSupportsEmoji( 'simple' ) || ! browserSupportsEmoji( 'flag' ) ) {
+                var src;
+                if ( window._wpemojiSettings.js.twemoji ) {
+                        src = window._wpemojiSettings.js.twemoji;
+                } else {
+                        src = window._wpemojiSettings.js.wpemoji;
+                }
+
+                var script = document.createElement( 'script' );
+                script.src = src + '?ver=' + window._wpemojiSettings.ver;
+                script.type = 'text/javascript';
+                document.getElementsByTagName( 'head' )[0].appendChild( script );
+
+                if ( window._wpemojiSettings.js.twemoji ) {
+                        waitForTwemoji();
+                }
+        }
+
+        function waitForTwemoji() {
+                if ( ! window.twemoji ) {
+                        // Still waiting.
+                        window.setTimeout( waitForTwemoji, 50 );
+                }
+
+                var script = document.createElement( 'script' );
+                script.src = window._wpemojiSettings.js.wpemoji + '?ver=' + window._wpemojiSettings.ver;
+                script.type = 'text/javascript';
+                document.getElementsByTagName( 'head' )[0].appendChild( script );
+        }
+
+} )( window );

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

@@ -165 +165 @@
                         supportsFlagEmoji = browserSupportsEmoji( 'flag' );
                         replaceEmoji = ! supportsEmoji || ! supportsFlagEmoji;
 
-                        if ( window.addEventListener ) {
-                                window.addEventListener( 'load', load, false );
-                        } else if ( window.attachEvent ) {
-                                window.attachEvent( 'onload', load );
+                        if ( 'loading' == document.readyState ) {
+                                if ( window.addEventListener ) {
+                                        window.addEventListener( 'load', load, false );
+                                } else if ( window.attachEvent ) {
+                                        window.attachEvent( 'onload', load );
+                                }
+                        } else {
+                                load();
                         }
                 }
 

src/wp-includes/script-loader.php

@@ -424 +424 @@
         $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(