One of the fun bits of the utf8mb4 upgrade is that we can now store emoji! Once your site is upgraded to utf8mb4, it can natively store any emoji character. There were a couple of problems with that, though:
- Some browsers don’t know how to render emoji 👎, or they have bugs in their implementation 😢. Notably, Chrome either doesn’t work or has bugs, older versions of IE don’t work, and Firefox has bugs.
- Not all sites will be able to upgrade to utf8mb4, which means they’ll be unable to save emoji characters that they enter.
Not being able to use emoji makes everyone a sad panda (😭🐼), so we need to fix this. There are a few moving parts of our emoji support, so lets go through them.
utf8 backwards compatibility
If a site can’t be upgraded to utf8mb4, we convert emoji to their HTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.-encoded equivalent, and store that, instead. From a UI User interface perspective, post editing works as expected 🎉. Because fields need to be white listed to support this, we don’t allow it everywhere – just post_title, post_content and post_excerpt. We also allow it in the site title and the site description.
Browser support
There’s a small compatibility check included on every page, both on the front end, and in the Dashboard. For those interested, this adds 1-4ms (⚡️-fast!) to the page render time – the aim was to keep this as low as possible, to avoid affecting your UX User experience. If you notice a little chunk of compressed JS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. at the top your HTML, that’s probably it. If you’d like to check out how it works in a more readable format, have a look through wp-emoji-loader.js.
Email ✉️ and RSS 📯 (There’s no RSS emoji, give me a break.)
Of course, the JS shim won’t work in email and RSS. So, we replace all emoji with a static PNG version in those cases.
TinyMCE 📝
In addition to the browser support JS, there’s a TinyMCE plugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party that handles keeping emoji looking good, while you type. It’s pretty magical.
Taxonomies and URL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org slugs
You can totally make taxonomies and URL slugs with emoji in them. Because we love you, and want you to be happy. 😀
—
So, that’s about it. If you have any questions about the implementation, drop them in the comments below.
💩
#4-2, #dev-notes, #%f0%9f%91%bb, #emoji
