Make WordPress Core

Changeset 55241


Ignore:
Timestamp:
02/06/2023 09:35:25 PM (15 months ago)
Author:
flixos90
Message:

Emoji: Fix emoji feature detection.

The emoji feature detection that occurs on every page load by default has been broken at least since [45769], causing the feature detection to fail for browsers that in fact support emoji correctly. This has led to the wp-emoji-release.min.js file being loaded unnecessarily even in modern browsers, which accounts for roughly 4.7 KB of extra JavaScript on every page load.

This changeset fixes the feature detection, by using the correct sequences of char codes.

Props sergiomdgomes, dmsnell, peterwilsoncc.
Fixes #57301.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/_enqueues/lib/emoji-loader.js

    r53150 r55241  
    1717     * @private
    1818     *
    19      * @param {number[]} set1 Set of Emoji character codes.
    20      * @param {number[]} set2 Set of Emoji character codes.
     19     * @param {string} set1 Set of Emoji to test.
     20     * @param {string} set2 Set of Emoji to test.
    2121     *
    2222     * @return {boolean} True if the two sets render the same.
    2323     */
    2424    function emojiSetsRenderIdentically( set1, set2 ) {
    25         var stringFromCharCode = String.fromCharCode;
    26 
    2725        // Cleanup from previous test.
    2826        context.clearRect( 0, 0, canvas.width, canvas.height );
    29         context.fillText( stringFromCharCode.apply( this, set1 ), 0, 0 );
     27        context.fillText( set1, 0, 0 );
    3028        var rendered1 = canvas.toDataURL();
    3129
    3230        // Cleanup from previous test.
    3331        context.clearRect( 0, 0, canvas.width, canvas.height );
    34         context.fillText( stringFromCharCode.apply( this, set2 ), 0, 0 );
     32        context.fillText( set2, 0, 0 );
    3533        var rendered2 = canvas.toDataURL();
    3634
     
    3937
    4038    /**
    41      * Detects if the browser supports rendering emoji or flag emoji.
    42      *
    43      * Flag emoji are a single glyph made of two characters, so some browsers
    44      * (notably, Firefox OS X) don't support them.
     39     * Determines if the browser properly renders Emoji that Twemoji can supplement.
    4540     *
    4641     * @since 4.2.0
     
    7065            case 'flag':
    7166                /*
    72                  * Test for Transgender flag compatibility. This flag is shortlisted for the Emoji 13 spec,
    73                  * but has landed in Twemoji early, so we can add support for it, too.
     67                 * Test for Transgender flag compatibility. Added in Unicode 13.
    7468                 *
    7569                 * To test for support, we try to render it, and compare the rendering to how it would look if
     
    7771                 */
    7872                isIdentical = emojiSetsRenderIdentically(
    79                     [ 0x1F3F3, 0xFE0F, 0x200D, 0x26A7, 0xFE0F ],
    80                     [ 0x1F3F3, 0xFE0F, 0x200B, 0x26A7, 0xFE0F ]
     73                    '\uD83C\uDFF3\uFE0F\u200D\u26A7\uFE0F', // as a zero-width joiner sequence
     74                    '\uD83C\uDFF3\uFE0F\u200B\u26A7\uFE0F'  // separated by a zero-width space
    8175                );
    8276
     
    9387                 */
    9488                isIdentical = emojiSetsRenderIdentically(
    95                     [ 0xD83C, 0xDDFA, 0xD83C, 0xDDF3 ],
    96                     [ 0xD83C, 0xDDFA, 0x200B, 0xD83C, 0xDDF3 ]
     89                    '\uD83C\uDDFA\uD83C\uDDF3',       // as the sequence of two code points
     90                    '\uD83C\uDDFA\u200B\uD83C\uDDF3'  // as the two code points separated by a zero-width space
    9791                );
    9892
     
    10397                /*
    10498                 * Test for English flag compatibility. England is a country in the United Kingdom, it
    105                  * does not have a two letter locale code but rather an five letter sub-division code.
     99                 * does not have a two letter locale code but rather a five letter sub-division code.
    106100                 *
    107101                 * To test for support, we try to render it, and compare the rendering to how it would look if
     
    109103                 */
    110104                isIdentical = emojiSetsRenderIdentically(
    111                     [ 0xD83C, 0xDFF4, 0xDB40, 0xDC67, 0xDB40, 0xDC62, 0xDB40, 0xDC65, 0xDB40, 0xDC6E, 0xDB40, 0xDC67, 0xDB40, 0xDC7F ],
    112                     [ 0xD83C, 0xDFF4, 0x200B, 0xDB40, 0xDC67, 0x200B, 0xDB40, 0xDC62, 0x200B, 0xDB40, 0xDC65, 0x200B, 0xDB40, 0xDC6E, 0x200B, 0xDB40, 0xDC67, 0x200B, 0xDB40, 0xDC7F ]
     105                    // as the flag sequence
     106                    '\uD83C\uDFF4\uDB40\uDC67\uDB40\uDC62\uDB40\uDC65\uDB40\uDC6E\uDB40\uDC67\uDB40\uDC7F',
     107                    // with each code point separated by a zero-width space
     108                    '\uD83C\uDFF4\u200B\uDB40\uDC67\u200B\uDB40\uDC62\u200B\uDB40\uDC65\u200B\uDB40\uDC6E\u200B\uDB40\uDC67\u200B\uDB40\uDC7F'
    113109                );
    114110
     
    134130                 */
    135131                isIdentical = emojiSetsRenderIdentically(
    136                     [0x1FAF1, 0x1F3FB, 0x200D, 0x1FAF2, 0x1F3FF],
    137                     [0x1FAF1, 0x1F3FB, 0x200B, 0x1FAF2, 0x1F3FF]
     132                    '\uD83E\uDEF1\uD83C\uDFFB\u200D\uD83E\uDEF2\uD83C\uDFFF', // as the zero-width joiner sequence
     133                    '\uD83E\uDEF1\uD83C\uDFFB\u200B\uD83E\uDEF2\uD83C\uDFFF'  // separated by a zero-width space
    138134                );
    139135
Note: See TracChangeset for help on using the changeset viewer.