From ed754069cab4b95e095a8e906e765761ab017286 Mon Sep 17 00:00:00 2001 From: Peter Wilson Date: Thu, 11 May 2017 04:25:22 +0000 Subject: [PATCH] Emoji: Update Twemoji to version 2.2.5 Updates Twemoji and adds a second Emoji 4 test to include a shrugging man. Emoji 4 is being implemented gradually, while some browsers now support the female technologist, the indifferent shrugging man is breaking things with his presence. Props peterwilsoncc, pento for code review. Fixes #40615. git-svn-id: https://develop.svn.wordpress.org/trunk@40626 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-includes/formatting.php | 6 ++--- src/wp-includes/general-template.php | 2 +- src/wp-includes/js/wp-emoji-loader.js | 31 +++++++++++++++++++++--- tests/phpunit/tests/formatting/Emoji.php | 12 ++++----- 4 files changed, 37 insertions(+), 14 deletions(-) diff --git a/src/wp-includes/formatting.php b/src/wp-includes/formatting.php index 80e1545caf..a057cce063 100644 --- a/src/wp-includes/formatting.php +++ b/src/wp-includes/formatting.php @@ -5012,7 +5012,7 @@ function _print_emoji_detection_script() { * * @param string The emoji base URL for png images. */ - 'baseUrl' => apply_filters( 'emoji_url', 'https://s.w.org/images/core/emoji/2.2.1/72x72/' ), + 'baseUrl' => apply_filters( 'emoji_url', 'https://s.w.org/images/core/emoji/2.2.5/72x72/' ), /** * Filters the extension of the emoji png files. @@ -5030,7 +5030,7 @@ function _print_emoji_detection_script() { * * @param string The emoji base URL for svg images. */ - 'svgUrl' => apply_filters( 'emoji_svg_url', 'https://s.w.org/images/core/emoji/2.2.1/svg/' ), + 'svgUrl' => apply_filters( 'emoji_svg_url', 'https://s.w.org/images/core/emoji/2.2.5/svg/' ), /** * Filters the extension of the emoji SVG files. @@ -5142,7 +5142,7 @@ function wp_staticize_emoji( $text ) { $text = wp_encode_emoji( $text ); /** This filter is documented in wp-includes/formatting.php */ - $cdn_url = apply_filters( 'emoji_url', 'https://s.w.org/images/core/emoji/2.2.1/72x72/' ); + $cdn_url = apply_filters( 'emoji_url', 'https://s.w.org/images/core/emoji/2.2.5/72x72/' ); /** This filter is documented in wp-includes/formatting.php */ $ext = apply_filters( 'emoji_ext', '.png' ); diff --git a/src/wp-includes/general-template.php b/src/wp-includes/general-template.php index e186e18a31..97468acf2a 100644 --- a/src/wp-includes/general-template.php +++ b/src/wp-includes/general-template.php @@ -2845,7 +2845,7 @@ function wp_resource_hints() { * The path is removed in the foreach loop below. */ /** This filter is documented in wp-includes/formatting.php */ - $hints['dns-prefetch'][] = apply_filters( 'emoji_svg_url', 'https://s.w.org/images/core/emoji/2.2.1/svg/' ); + $hints['dns-prefetch'][] = apply_filters( 'emoji_svg_url', 'https://s.w.org/images/core/emoji/2.2.5/svg/' ); foreach ( $hints as $relation_type => $urls ) { $unique_urls = array(); diff --git a/src/wp-includes/js/wp-emoji-loader.js b/src/wp-includes/js/wp-emoji-loader.js index 236415c162..9c5043f499 100644 --- a/src/wp-includes/js/wp-emoji-loader.js +++ b/src/wp-includes/js/wp-emoji-loader.js @@ -19,7 +19,7 @@ */ function browserSupportsEmoji( type ) { var stringFromCharCode = String.fromCharCode, - flag, flag2, technologist, technologist2; + flag, flag2, emoji41, emoji42; if ( ! context || ! context.fillText ) { return false; @@ -79,6 +79,26 @@ return flag !== flag2; case 'emoji4': + /* + * Emoji 4 support was implemented gradually, multiple tests are used to + * confirm support. + * + * In this test we try rendering man shrugging, light skin tone and compare + * it to how it would look if the browser does not render it correctly + * (person shrugging: light skin town + male sign). + */ + context.fillText( stringFromCharCode( 55358, 56631, 55356, 57339, 8205, 9794, 65039 ), 0, 0 ); + emoji41 = canvas.toDataURL(); + + context.clearRect( 0, 0, canvas.width, canvas.height ); + + context.fillText( stringFromCharCode( 55358, 56631, 55356, 57339, 9794, 65039 ), 0, 0 ); + emoji42 = canvas.toDataURL(); + + if ( emoji41 !== emoji42 ) { + return false; + } + /* * Emoji 4 has the best technologists. So does WordPress! * @@ -86,15 +106,18 @@ * then compare it to how it would look if the browser doesn't render it correctly * (woman technologist: medium skin tone + personal computer). */ + // Cleanup from previous test. + context.clearRect( 0, 0, canvas.width, canvas.height ); + context.fillText( stringFromCharCode( 55357, 56425, 55356, 57341, 8205, 55357, 56507), 0, 0 ); - technologist = canvas.toDataURL(); + emoji41 = canvas.toDataURL(); context.clearRect( 0, 0, canvas.width, canvas.height ); context.fillText( stringFromCharCode( 55357, 56425, 55356, 57341, 55357, 56507), 0, 0 ); - technologist2 = canvas.toDataURL(); + emoji42 = canvas.toDataURL(); - return technologist !== technologist2; + return emoji41 !== emoji42; } return false; diff --git a/tests/phpunit/tests/formatting/Emoji.php b/tests/phpunit/tests/formatting/Emoji.php index b68791199d..f52af61995 100644 --- a/tests/phpunit/tests/formatting/Emoji.php +++ b/tests/phpunit/tests/formatting/Emoji.php @@ -8,8 +8,8 @@ class Tests_Formatting_Emoji extends WP_UnitTestCase { * @ticket 36525 */ public function test_unfiltered_emoji_cdns() { - $png_cdn = 'https://s.w.org/images/core/emoji/2.2.1/72x72/'; - $svn_cdn = 'https://s.w.org/images/core/emoji/2.2.1/svg/'; + $png_cdn = 'https://s.w.org/images/core/emoji/2.2.5/72x72/'; + $svn_cdn = 'https://s.w.org/images/core/emoji/2.2.5/svg/'; $output = get_echo( '_print_emoji_detection_script' ); @@ -25,8 +25,8 @@ class Tests_Formatting_Emoji extends WP_UnitTestCase { * @ticket 36525 */ public function test_filtered_emoji_svn_cdn() { - $png_cdn = 'https://s.w.org/images/core/emoji/2.2.1/72x72/'; - $svn_cdn = 'https://s.w.org/images/core/emoji/2.2.1/svg/'; + $png_cdn = 'https://s.w.org/images/core/emoji/2.2.5/72x72/'; + $svn_cdn = 'https://s.w.org/images/core/emoji/2.2.5/svg/'; $filtered_svn_cdn = $this->_filtered_emoji_svn_cdn(); @@ -49,8 +49,8 @@ class Tests_Formatting_Emoji extends WP_UnitTestCase { * @ticket 36525 */ public function test_filtered_emoji_png_cdn() { - $png_cdn = 'https://s.w.org/images/core/emoji/2.2.1/72x72/'; - $svn_cdn = 'https://s.w.org/images/core/emoji/2.2.1/svg/'; + $png_cdn = 'https://s.w.org/images/core/emoji/2.2.5/72x72/'; + $svn_cdn = 'https://s.w.org/images/core/emoji/2.2.5/svg/'; $filtered_png_cdn = $this->_filtered_emoji_png_cdn();