Wordpress emojis and Discourse

Support WordPress
1

Hi,

I have default WP settings (if there is any…) regarding emojis.
On WP, I wrote a text with character emojis in it:

image

Wordpress automatically converts them to SVG twitter emoji:

image

Here’s the generated HTML code from the first emoji, as an example:

<span class="pq6dq46d tbxw36s4 knj5qynh kvgmc6g5 ditlmg2l oygrvhab nvdbi5me sf5mxxl7 gl3lb2sf hhz5lgdu"><img draggable="false" role="img" class="emoji" alt="👊" src="https://s.w.org/images/core/emoji/13.0.0/svg/1f44a.svg"> </span>

When the post is sent on Discourse, the HTML is slightly modified:

<span class="pq6dq46d tbxw36s4 knj5qynh kvgmc6g5 ditlmg2l oygrvhab nvdbi5me sf5mxxl7 gl3lb2sf hhz5lgdu">&#x1f44a; </span>

As it inserts the emoji HTML entity in the span.

The result is a nicely formatted post, but the emojis aren’t converted to the forum’s emoji set:

image

Is there a way so the emoji would display using the forum’s chosen set?

2

This may be an issue with Discourse, as opposed to the plugin.

If you’re using the default Wordpress emoji handling, I’m assuming you’re copy/pasting unicode emojis into the wordpress editor. If you do this the raw post content sent to discourse will just include the unicode emojis. Discourse should normally convert those into the emojiset of the forum. I can indeed reproduce the issue in certain circumstances.

I’ll have to get back to you on this one.

3 Likes
3

@Canapin Hey :slight_smile: Just an update on this one.

The issue here arises when

  1. You have enabled the “full post content” setting in wp-discourse
  2. You’ve created a post in wordpress with at least one line of content before the insertion of emojis.

Firstly, could you just confirm with me that that’s what you’ve done in this case (particularly the “full post content” setting)?

In these circumstances the wp-discourse plugin sends html over to Discourse, which is imported as a topic embed. A few different issues, including this one, can arise when Discourse attempts to process the html when creating a post. For example, another issue that arises is Fix broken images for posts created by the WP Discourse and RSS plugins - admins - Discourse Meta.

On the technical front (as I know you’re technical :wink: ), you can see the issue directly if you attempt to use the relevant Discourse ruby class to parse a html string with unicode emojis.

Technical detail of issue 
rails c
PrettyText.cook("<p>This is the sentence before the emojis</p><div>🦊🦊🦊🦊</div>")
=> "<p>This is the sentence before the emojis</p><div>🦊🦊🦊🦊</div>"

versus

rails c
PrettyText.cook("🦊🦊🦊🦊")
=> "<p><img src=\"/images/emoji/twitter/fox_face.png?v=9\" title=\":fox_face:\" class=\"emoji\" alt=\":fox_face:\"><img src=\"/images/emoji/twitter/fox_face.png?v=9\" title=\":fox_face:\" class=\"emoji\" alt=\":fox_face:\"><img src=\"/images/emoji/twitter/fox_face.png?v=9\" title=\":fox_face:\" class=\"emoji\" alt=\":fox_face:\"><img src=\"/images/emoji/twitter/fox_face.png?v=9\" title=\":fox_face:\" class=\"emoji\" alt=\":fox_face:\"></p>"

So what are we doing about it?

Generally speaking, some issues in Wordpress full post html > Discourse post conversion are not unexpected. The record of the Wordpress post on Discourse is just that, a record of the post.

That said, @simon and I are actively looking at improving that process in both wp-discourse and Discourse itself, with an appropriate prioritization. We’re going to focus on a few other things in this respect (e.g. the broken images issue mentioned above), before we get to this one. So you’ll need to sit tight for an official fix on this one for a bit.

3 Likes
4

There is indeed HTML code before the first emoji (as Wordpress wraps the content between <p> tags) and “full post content” is enabled.

Thanks for the information!

1 Like
5

Hey, just a note that addressing this is on my agenda for June of this year. If anyone has an issue closely related to this, please let me know and I will look at it at the same time.

2 Likes