Wp-calypso: Gutenberg: Emojis as Square Blocks

[Aurorum]

Depending on how up to date a person's device is some folks can only see some unicode sets. Unsupported emoji characters are rendered as blocks. In the edit view, let's make sure to replace emoji with visual image placeholders like we do in the published view. See also https://github.com/Automattic/wp-calypso/issues/29831#issuecomment-450758213

Steps to reproduce

1. Starting at URL: https://wordpress.com/block-editor/post or /wp-admin/post.php
2. Visit a site such as https://getemoji.com (one recommended here)
3. Copy and paste a less common but still frequently used emoji (basically pretty much anything other than a smiley face)
4. Enter it an a post

What I expected

The classic editors displays the emoji itself.

Starting at https://wordpress.org/gutenberg and following the same steps, the emoji will appear.

What happened instead

Though very low priority (it's fine in the post), it'd be nice if emojis would appear as the emoji itself instead of a square box. Found this when writing my own posts.

[arunsathiya]

I am not able to reproduce this. When I copy from https://getemoji.com/ or https://emojipedia.org/, the emoji appears fine on the WordPress Editor.

Here is a video showing this behaviour.

Most often when emoji does not show as expected, and renders as a square, it means that your device does not support this emoji.

It's a bit strange because you are able to see this emoji on the Calypso editor, classic editor on /wp-admin but not on WordPress Editor.

What browser, which version of the browser and what operating system you are on at the moment?

[Aurorum]

It's odd, because I'm assuming my device doesn't support this emoji, although I'm fairly certain there's something which can be done for it to be seen. I've always assumed that because it works in the previous editors (and the Gutenberg one on wordpress.org) and other sites, such as Discord & Twitter - maybe I'm wrong though? Using a Mac OS X 10.6.8, running Chrome 49, but I didn't realise that this issue might be a case of your device/browser.

[arunsathiya]

Yes, I am a bit surprised as well, as it appears fine on your Calypso editor amongst other editors you have mentioned. I am going to tag this for developers' attention to see if they have any thoughts.

[arunsathiya]

@torres126 While we are discussing this, can you check if the common emoji appear fine on your WordPress Editor?

Can you also check if this is limited to https://wordpress.com/block-editor/post or does it happen on the WordPress Editor on the /wp-admin dashboard as well?

[Aurorum]

Tested with a heart. And yep, I can still recreate from the /wp-admin Dashboard (see screenshot above).

[gwwar]

What's happening is that in the edit view is using the unicode characters directly, and the published view is replacing these with tweemoji images.

Edit View:

Published:

@torres126 how many of these can you see?
Unicode 6.1: 😀😗😙😑😮😯😴😛😕😟
Unicode 7.0: 🙂🙁🕵🗣🕴🖕🖖🖐
Unicode 8.0: 🤗🤓🤔🙄🤐🙃🤑🤒🤕🤖
Unicode 9.0: 🤣🤠🤡🤥🤤🤢🤧🤴🤶🤵🤷
Unicode 10.0: 🤩🤨🤯🤪🤬🤮🤫🤭🧐🧒
Unicode 11.0: 🥰🥾🦞🧬🧹🥭

The latest released set is: https://emojipedia.org/unicode-11.0/ and requires software updates. So likely the old Chrome version here is causing issues.

It looks like we are having some trouble with the Unicode 11 set in the published view, but that's better left as a new bug 🤔

Next Steps:

• [x] See if we have similar behavior in Gutenberg core. If so, file an enhancement to replace with twemoji in the edit view. If this is custom to Calypso, we can update the summary and turn this into an enhancement
• [x] File an issue against the Unicode 11 set.

I'm happy to circle back to items noted here, but feel free to take on items if you'd like to help test/file.

[Aurorum]

@gwwar On GitHub directly on my (unsupported) computer, none. On my Android device, the top four rows. Here's some screenshots from my computer:

Since https://wordpress.org/gutenberg & https://wordpress.com/post displays all emojis fine, it'd be nice if the edit view used twemoji too.

From my understanding, Unicode 11 is only available on recent iOS devices currently. That being said, they load fine at both https://wordpress.org/gutenberg, but they don't load at all in Calypso (just square boxes, as shown above).

For comparison, here's Twitter, where I'm assuming all emojis would load fine regardless of device.

I'm guessing therefore that there's an issue with the Unicode 11 set with Calypso (no issues when testing with Gutenberg at https://wordpress.org/gutenberg), so I'll file a separate issue for that. _Edited:_ Done! #29866

[gwwar]

Since https://wordpress.org/gutenberg & https://wordpress.com/post displays all emojis fine, it'd be nice if the edit view used twemoji too.

Thanks @torres126 ! Right it looks like core is using a different image emoji set but still has the same issue, that we don't replace the unicode in the edit view, which may display squares for some folks.

I'll go ahead and update the summary of this one to indicate the edit case for Calypso, and I think we have an open one here for Gutenberg core:
https://github.com/WordPress/gutenberg/issues/7440

[Portekoi]

I'm the author of this post. Since the update to Gutenberg, copy/past emoticons stop working.