Update Twemoji to v15.1.0

[peterwilsoncc]

​Twemoji 15.1.0 has been released, adding support for ​Emoji 15.1.

This release introduces 118 new Emoji that many WordPressers will want to run (to the right) not walk (to the right) to use in their blog posts.

No existing images have been modified in the new version of the library so the systems update for the new images can be added to the existing 15.0.3 directory on the w.org CDN.

[audrasjb]

Moving for 6.8 consideration, and switching to a task as it is not really a bug :)

[jorbin]

It's great to see Twemoji reborn 🐦‍🔥

Do I think we should update in 6.8? 🙂‍↕️

[hbhalodia]

Hi @peterwilsoncc, I would like to pick this task and work on it.

Thank You,

Trac ticket: https://core.trac.wordpress.org/ticket/63064

Updated the Twemoji to use 15.1 version.

[hbhalodia]

Hi Team, I have raised the PR to update the twemoji to use 15.1 version. As I run through the codebase, I did not find any such instance in package.json or JS inclusion, I did only find this instance.

Let me know if we need to update somewhere else as well, I can update the PR for the same.

Thank You,

[azaozz]

Updating sounds good. Just keep in mind the WP version was patched/modified to allow exclusions based on the classname of the HTML element that contains the text node(s) with the emojis, see #52219.

There modifications will probably have to be added to the new version too. There are two of them:

• https://core.trac.wordpress.org/browser/trunk/src/js/_enqueues/vendor/twemoji.js#L309
• https://core.trac.wordpress.org/browser/trunk/src/js/_enqueues/vendor/twemoji.js#L532

Also a good idea to add a warning in the file's headers about that.

[peterwilsoncc]

No existing images have been modified in the new version of the library so the systems update for the new images can be added to the existing 15.0.3 directory on the w.org CDN.

This was incorrect, a new directory will be needed.

---

@hbhalodia There's a little more to do but images need to be uploaded to WordPress.org before work can continue on the PR. This is to prevent the CDN from caching file not found responses, I'll follow up your pull request once that is done.

[hbhalodia]

Thanks, @peterwilsoncc @azaozz, I would wait for the update on wp.org library.

[SergeyBiryukov]

Twemoji 15.1.0 images have been uploaded to the WordPress.org CDN.

[hbhalodia]

Hi @peterwilsoncc, Any update on this, like where I need to do more changes related to change in library?

Thank You

[peterwilsoncc]

@hbhalodia This is the ​pull request for the last update that you'll be able to use as a guide. Some of the changes are not relevant as we needed to change Grunt.js a little more than usual.

It's actually a surprisingly complex change, here are the main steps:

• Replace the twemoji file in WordPress with ​twemoji.js from the current release
• Apply the WordPress changes to the file, see the ​diff
• Update the tests in src/js/_enqueues/lib/emoji-loader.js to test for new emoji in the release, I suggest ​Person Running Facing Right: Medium Skin Tone. This is the most complex step.
• In various places throughout the code base, replace s.w.org/images/core/emoji/15.0.3 with s.w.org/images/core/emoji/15.1.0
• In Grunt.js, replace the string v15.0.3:assets/svg with v15.1.0:assets/svg
• Run npm run grunt precommit:emoji which will apply some changes to the file src/wp-includes/formatting.php and commit those changes.

Because it's more complex that it seems, I'm happy to help out if you find some of the steps confusing. If it's much more than you expected and you wish to observe how it's done this time, that's fine too.

[hbhalodia]

Thanks, @peterwilsoncc, For the steps. I would be happy to try this out in the PR raised and would update here, if any of the steps seems confusing or need help on that.

Thank You,

Hi @peterwilsoncc, I have updated the PR with the steps mentioned in the ticket, however I need the clarification on few points,

1. Is the below update related to UTF encoding escape sequence is correct?

​https://github.com/WordPress/wordpress-develop/blob/8b05cc998b8cd57d552fcada18d4b13be5974d08/src/js/_enqueues/lib/emoji-loader.js#L250-L253

2. I was not able to run npm run grunt precommit:emoji, it is giving some issue Fatal error: gh: Bad credentials (HTTP 401). Not sure, is something permission related issue?

Other than above, all the steps have been added.

Thank You,

[hbhalodia]

Hi @peterwilsoncc, The PR is now updated with the steps mentioned, however I do have some issue which I have pasted in GH comments.

Thank You,

Thanks for this, I really appreciate it.

Is the below update related to UTF encoding escape sequence is correct?

Yes, that's correct --- 200D is replaced with 200B in the second version

I was not able to run npm run grunt precommit:emoji, it is giving some issue Fatal error: gh: Bad credentials (HTTP 401). Not sure, is something permission related issue?

Sorry, I forgot about authentication. You need to run gh auth login first.

As I'm already set up and authenticated I've taken the liberty of pushing the change to your branch.

I'll test the PR and come back with a review.

[peterwilsoncc]

To assist with determining which is the best emoji to test support with, it would be great if a few people could take a look at this screen and let me know if they are seeing any broken emoji and which one if you are.

Broken emoji will appear in one of the following forms:

• a square
• one emoji represented by two characters

If folks could review this webpage on various devices and let me know if and what they are seeing as broken, it would be most helpful. ​https://output.jsbin.com/cuputov

[audrasjb]

The emojis displayed on the test page are all good on my side on MacOS/Chrome, MacOS/Firefox and Safari/iOS.

[SirLouen]

Tested on Android/Chrome, Windows 11/Chrome, Firefox and Edge.
✅ The emojis are displaying correctly

[SergeyBiryukov]

Replying to audrasjb:

The emojis displayed on the test page are all good on my side on MacOS/Chrome, MacOS/Firefox and Safari/iOS.

Same here, Windows 11/Chrome.

[peterwilsoncc]

I've done some testing on some old and really old phones we have laying around the house.

"Person Running Facing Right: Medium Skin Tone Emoji" can be broken in one of two ways:

• On old operating systems: 🏃🏽➡️ (person running medium skin tone & right arrow)
• On really old operating systems: 🏃🏽🏽➡️ (person running, medium skin tone & right arrow)

This will cause some false positives for emoji 15.1 support if the emoji is broken in the way that isn't being tested. In the PR I'll suggest switching to a phoenix as it will break consistently.

Hi @peterwilsoncc, PR is now updated to use the Phoenix emoji and also updated the comments to best describe the emoji.

[peterwilsoncc]

In 60035:

Emoji: Update the Twemoji library to 15.1.0.

This version adds support for the latest emoji added in Unicode Emoji 15.1.

I will rise like a phoenix 🐦‍🔥 but you’re my flame 🔥.

Props audrasjb, azaozz, hbhalodia, jorbin, sergeybiryukov, sirlouen.
Fixes #63064.