Flag Emoji in emails substituted by img HTML tag, alt attribute is erroneously substituted

[cesargml]

Using Wordpress with WooCommerce (2.3.13), I have some products with titles that contain flag emojis. The flag emojis display correctly on the frontend and backend. But I noticed that on the order confirmation emails, there was an error with the creation of the HTML version (see attached image).

I tracked the generation of this HTML to wp-includes/formatting.php line 4278, part of the function wp_staticize_emoji(). This function substitues emojis with imgs for RSS and emails. On those lines The ALT attribute of the generated IMG tag is set to html_entity_decode($flag) where flag is the flag emoji (in my case 🇪🇸).

The wrongly generated HTML is in this case, with GMail as email client:

<img src="https://ci6.googleusercontent.com/proxy/ri25l2bmLkJ0tNLqPXbY8C-I9nCBGWOOGBCGysveg6e7QYb_mnqFw8da89OS1k4k7RWGWjx142nfLxLDBxoGdCrqUuM5nj1-3_F2zA=s0-d-e1-ft#http://s.w.org/images/core/emoji/72x72/1f1ea-1f1f8.png" alt="<img src=" style="min-height:1em;max-height:1em" class="CToWUd"><img src="https://ci6.googleusercontent.com/proxy/4YCB-609xwpaVaGeE7Jur5ePhECuKkxG0ADWLB8pyF7gAf9-M9m740c5stRdsgylSLOWQVp1UM-O6KPsfjJYIgOLsLBEaw=s0-d-e1-ft#http://s.w.org/images/core/emoji/72x72/1f1f8.png" alt="

[cesargml]

The bug on a Gmail client

[MattyRob]

@cesargml

Does this issue happen on your site with the following code?

$emo = '🇪🇸';
echo $emo;
echo wp_staticize_emoji( $emo );

The first echo should just print the Emoji, the second will print the static version in an <img> tag.

I've tried that above on my site and it works okay - also worth noting that the src should be on the s.w.org domain - not googlecontent so it may be an issue in Google Mail or perhaps a plugin bug.

[cesargml]

No, the issue does not happen with the code above used on content to be displayed on a browser.

The src is substituted by Google Mail, to avoid security problems with images hosted externally. The same happens with Outlook webmail (both the src substitution, and the formatting error)

It seems to be an issue with emailing only, maybe Gmail tries to substitute the flag inside the alt attribute, doing its own image substitution.

In any case, if we are escaping the emoji into an image, to avoid issues with email and RSS (see ​https://make.wordpress.org/core/2015/04/02/omg-emoji-%F0%9F%98%8E/) ... then why are we using the emoji inside the alt attribute? Won't this bring the same issues as using the emoji direcly?

César

[MattyRob]

I see what you mean, coming from this line:
$entity = sprintf( '<img src="%s" alt="%s" class="wp-smiley" style="height: 1em; max-height: 1em;" />', $cdn_url . $char . $ext, html_entity_decode( $emoji ) ); which is inserting the Emoji code as the 'alt' parameter.

I suppose if it is then parsed again it'll cause issues.

@pento - Any thoughts?

[pento]

Putting the real emoji in the alt attribute is intentional - this means that when a user selects and copies text including an emoji image, the emoji will be copied as the emoji character, instead of the image.

As for this bug, it looks like the emoji are being double encoded, as @MattyRob suggested.

@cesargml - are you seeing this same bug with other email clients, or just GMail? Are you seeing it with all emails (say, if you make a blog post), or just those coming from WooCommerce?

[cesargml]

Post by email works correctly

[cesargml]

@pento I have tried on Gmail and Outlook.com (former Hotmail). I have also tried with:

• Squirrelmail
• Horde
• Mail.app

I have setup a test website and added Jetpack to test with post-by-email. The emojis are displayed correctly (see attachment). It seems indeed like double-encoding, on the WooCommerce side. Where should I report this bug?

Thanks,
César

[MattyRob]

@cesargml

You could open a new thread on the WooCommerce support forum:

​https://wordpress.org/support/plugin/woocommerce

I'm just trying to have a look through the files and see if I can find any issues.

[MattyRob]

@cesargml

I can't see anywhere that WooCommerce handles for Emojis. There are a few filters for email content however so this could be impleted through a little code, try the following and see if it helps:

function woocommerce_emoji_handler( $content ) {
	return wp_staticize_emoji( $content );
}

add_filter( 'woocommerce_mail_content', 'woocommerce_emoji_handler' );
add_filter( 'woocommerce_email_content_low_stock', 'woocommerce_emoji_handler' );
add_filter( 'woocommerce_email_content_no_stock', 'woocommerce_emoji_handler' );
add_filter( 'woocommerce_email_content_backorder', 'woocommerce_emoji_handler' );

[MattyRob]

@cesargml

Can we close this ticket as a plugin bug now?

[cesargml]

Yes. Thanks.