WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#32995 closed defect (bug) (invalid)

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

Reported by: cesargml Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Formatting Keywords:
Focuses: Cc:

Description

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="

Attachments (2)

Screen Shot 2015-07-14 at 16.35.01.png (56.7 KB) - added by cesargml 6 years ago.
The bug on a Gmail client
Screen Shot 2015-07-15 at 09.42.29.png (114.1 KB) - added by cesargml 6 years ago.
Post by email works correctly

Download all attachments as: .zip

Change History (12)

@cesargml
6 years ago

The bug on a Gmail client

#1 @MattyRob
6 years ago

@cesargml

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

$emo = '&#x1f1ea;&#x1f1f8;';
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.

#2 @cesargml
6 years ago

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

#3 @MattyRob
6 years ago

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?

#4 @pento
6 years ago

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
6 years ago

Post by email works correctly

#5 @cesargml
6 years ago

@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

#6 @MattyRob
6 years ago

@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.

#7 @MattyRob
6 years ago

@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' );

#8 @MattyRob
6 years ago

  • Keywords reporter-feedback added

@cesargml

Can we close this ticket as a plugin bug now?

#9 @cesargml
6 years ago

Yes. Thanks.

#10 @peterwilsoncc
6 years ago

  • Keywords reporter-feedback removed
  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed
  • Version 4.2.2 deleted
Note: See TracTickets for help on using tickets.