Twemoji image broken in WordPress dashboard

[butterflymedia]

This happens with all WordPress 6.0 websites, updated this morning.

The twemoji images are all broken. As an example, the lock emoji is pointing to a 404 location:

​https://twemoji.maxcdn.com/v/14.0.2/1f510.svg

[desrosj]

Hi @butterflymedia,

Thanks for this ticket. I've been trying to reproduce the problem you are seeing, but I have been unable to.

Even after installing the plugin you are using, I am still seeing the Emoji characters loading from the WordPress.org CDN location.

The twemoji.maxcdn.com location is the default location used for loading Twemoji characters, but WordPress should be overriding that URL to point to one controlled by the WordPress project under w.org.

The URL for characters is filterable, so it is possible a plugin is changing the URL back to the default one. It's also possible you experienced an incomplete update. Could you try reinstalling WordPress to see if that fixes the issue?

Adding a close suggestion as I'm currently unable to reproduce the problem.

[butterflymedia]

I have tested it on 3 different websites, all using WordPress 6.0 (freshly updated).

There are no specific plugins to mess with the filters. I have some custom ones that add CPT and custom meta features, Post SMTP, BackupWP and Yoast SEO. So, nothing that could block filtering of those URLs.

Also, the issue started after upgrading to 6.0.

I'll keep investigating.

[desrosj]

Some follow up questions:

• Is SCRIPT_DEBUG enabled?
• Are there any JavaSript errors in the console?
• Is window._wpemojiSettings = .... found in the page's source code? This is some inline JavaScript printed that configures Twemoji to use the desired settings (including the w.org URL), and adds the detection script.

Please leave the keywords the same. close is just a suggestion, and shows that someone has suggested it is a candidate to close. This remains until someone else can reproduce the problem.

[butterflymedia]

I'll leave close at it is. I believe I added my reply at the same time as you added it.

Second, yes, I do have this in the source code:

<script>
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/14.0.0\/72x72\/","ext":".png","svgUrl":false,"svgExt":".svg","source":{"concatemoji":"https:\/\/dev76.designbricks.ie\/wp-includes\/js\/wp-emoji-release.min.js?ver=6.1-alpha-53441"}};
/*! This file is auto-generated */
!function(e,a,t){var n,r,o,i=a.createElement("canvas"),p=i.getContext&&i.getContext("2d");function s(e,t){var a=String.fromCharCode,e=(p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,e),0,0),i.toDataURL());return p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,t),0,0),e===i.toDataURL()}function c(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(o=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},r=0;r<o.length;r++)t.supports[o[r]]=function(e){if(!p||!p.fillText)return!1;switch(p.textBaseline="top",p.font="600 32px Arial",e){case"flag":return s([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])?!1:!s([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&&!s([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]);case"emoji":return!s([129777,127995,8205,129778,127999],[129777,127995,8203,129778,127999])}return!1}(o[r]),t.supports.everything=t.supports.everything&&t.supports[o[r]],"flag"!==o[r]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[o[r]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(e=t.source||{}).concatemoji?c(e.concatemoji):e.wpemoji&&e.twemoji&&(c(e.twemoji),c(e.wpemoji)))}(window,document,window._wpemojiSettings);
</script>

Also, the only error in the console is the maxcdn.com 404. SCRIPT_DEBUG is on.

[ianpegg]

I was experiencing the same issue as the OP after upgrading to WP 6.0. But @desrosj comment about filters set me on the right track. Since I normally have no use for emojis I remove all actions and filters related to them from both front and back end with a custom function.

Up until this release, doing so hasn't caused an issue but I've noticed that if I remove the following line of code from my function then Twemojis work correctly once again:

add_filter('emoji_svg_url', '__return_false');

[desrosj]

@butterflymedia Have you been able to identify the source of this issue?

[butterflymedia]

I still think it's a WordPress 6.0 bug, as it never happened before. However, I fixed it like this:

if ( ! is_admin() ) {
    add_filter( 'emoji_svg_url', '__return_false' );
}

Basically, I don't need emojis on front-end, so I am only checking for ! is_admin().

[nonchiedercilaparola]

hi, is this bug will be fix in next release? on wp 6.0.1 it is still present.

[desrosj]

@nonchiedercilaparola no fix has been made because the exact conditions to reproduce this on a fresh install of WordPress have not been identified.

Once exact steps to reproduce are identified, the actual issue can be found.

@nonchiedercilaparola are you able to disable all plugins to see if the issue still is present? Also, can you look for the emoji_svg_url filter being used within the plugins you have active? And lastly, are there any console errors present?

[nonchiedercilaparola]

the culprit is wpmudev hummingbird. I will contact support as soon as possible. Thanks for support.

[desrosj]

Somewhat related: It seems MaxCDN will be sunset at the end of the year. There’s a Twemoji issue tracking this upstream: ​https://github.com/twitter/twemoji/issues/556.

[fitli65]

Replying to nonchiedercilaparola:

the culprit is wpmudev hummingbird. I will contact support as soon as possible. Thanks for support.

Thanks for this hint!
I was able to solve my problem like this:
Hummingbird/Advanced Tools - Disable the "Remove the default Emoji JS & CSS files" (was eneabled in my case)