Classic Editor - TinyMCE Visual Page editor not working correctly after updating to version 5.6 or later

[spikeuk1]

I have encountered a problem following updating to version 5.6 (from 5.5.3–en_GB). When I (or other users) try to edit an existing page (or unpublished draft) the editing box in Visual mode is empty.
If you click on the Text tab the content is displayed. Clicking back to Visual mode and the content is now visible.
However, if you edit the content in the Visible tab and save (or preview) the edit is lost.
(There are several reports on ​https://wordpress.org/support/ of other people experiencing the same issue)

[spikeuk1]

Replying to spikeuk1:

I have encountered a problem following updating to version 5.6 (from 5.5.3–en_GB). When I (or other users) try to edit an existing page (or unpublished draft) the editing box in Visual mode is empty.
If you click on the Text tab the content is displayed. Clicking back to Visual mode and the content is now visible.
However, if you edit the content in the Visible tab and save (or preview) the edit is lost.
(There are several reports on ​https://wordpress.org/support/ of other people experiencing the same issue)

[spikeuk1]

Just to add that this problem is observed using Firefox (64-bit) 84.0 under Win10 and also Chrome.
Spike

[johnbillion]

Thanks for the report @spikeuk1 ! I've milestoned this for 5.6.1 pending investigation.

[spikeuk1]

Replying to johnbillion:

Thanks for the report @spikeuk1 ! I've milestoned this for 5.6.1 pending investigation.

Many thanks!
If there is anything I can do to help push the investigation forward do please shout. My main production server is running WordPress 5.6 and exhibits this problem. My staging server is identical (content, plug-ins, custom theme and templates) except I have left this on 5.5.3 - and works as expected. Would be delighted to to any A-B comparisons on my servers.

Spike

[herrvigg]

hello,
I’m the maintainer of qTranslate on github and we are also encountering a case that looks related, it is a major issue. This seems to occur quite randomly, but so far I observed it only in combination with WP5.6, Firefox, and the Visual Editor – using the Classic Editor that many, many people still use. Sometimes the problem disappears just by reloading exactly the same page in a different tab…
For reference: ​https://github.com/qtranslate/qtranslate-xt/issues/931

I observed one interesting event: for some reason (due to WP 5.6 + Firefox?), a listener i have on window.load even does not trigger all the time as it should, though i’m sure the addEventListener is called. If i add another dummy listener on window.load, this one is called all the time, which looks quite insane. Why would a window.load not be triggered?

A few elements grabbed from ​https://wordpress.org/support/topic/edit-post-page-broken-after-update-to-wp-5-6/:

The issue seems to be that:
wp.oldEditor.initialize() is no longer firing and many plugins/blocks looking for this > event are no longer functioning.

Could this be related to what I observed with window.load not firing properly in some event listener?

Uhh, I just reverted to an older jquery via a plugin – and that fixed it. :/

That seems to confirm something is going wrong with some event.

This post can also be found here: ​https://wordpress.org/support/topic/edit-post-page-broken-after-update-to-wp-5-6-2/

[herrvigg]

Could this issue be related to #52046 ? In that case there is a patch in the pipe already.

[oxpal]

I think this is a general issue with the Classic Editor containing outdated JavaScript. Thus it's breaking after updating jQuery with 5.6.

The Classic-Editor support forums are full with issues that I think all come from this. Lot's of plugins break because if it.
For me it is not browser related (breaks in Chrome as well), and not related to the manner I enable the Classic Editor, as any plugin or functions-code causes the issue.

A temporary fix is to use the jQuery Migration Helper ​https://wordpress.org/plugins/enable-jquery-migrate-helper/.

I personally find Gutenberg unusable (despite giving it a try every couple months), and millions of other users seem to think the same, considering that the "Enable Classic Editor plugin" has 5+ million active installations (plus there are more such plugins and other ways to deactivate Gutenberg). So this is an urgent usability issue for many.

[spikeuk1]

Replying to herrvigg:

Could this issue be related to #52046 ? In that case there is a patch in the pipe already.

Thank you for that and for the previous comment.

This (and may other issues) do seem to have the same root cause.

5.6.1 is/was due for release "mid January", which by my calendar is less than a week away - hopefully most problems will be solved.

[spikeuk1]

Replying to oxpal:

A temporary fix is to use the jQuery Migration Helper ​https://wordpress.org/plugins/enable-jquery-migrate-helper/.

Thank you for the suggestion. I have installed the plug-in as you suggested and I can confirm that the problem I was seeing has now (once I reverted JQuery to a previous version) has now gone.
This is Firefox - I have not checked with Chrome or anything else yet.

[metalandcoffee]

Just bumping this up to 'major' severity since I think this issue should definitely be resolved in 5.6.1.

Please note that the following tickets may also be related/duplicates: #52050, #52133.

Would recommend closing the other tickets if that is the case.

[audrasjb]

Given 5.6.1 is slated to next week, let's move this ticket to 5.6.2 to give it some more time.

[spikeuk1]

I updated my WordPress installation from 5.6 to 5.6.1 this morning and can confirm that the problem I reported seven weeks ago is still there.
Still having to use (the excellent) jQuery Migrate Helper set to "Legacy 1.12.4-wp" to permit page editing via the "visual" tab.
As previously stated, I have access to a clone version of my website that I can use to help test any proposed more permanent solutions. Or I can give full admin (temp ;-) ) access to any developer that would like to do more diagnostic testing on a broken website.
Spike

[Marius84]

Is there any news about this bug?

[audrasjb]

For the moment, this ticket still needs a patch. Please note that WP 5.6.2 release candidate is expected for Tuesday, so we'll need someone to reproduce the issue and to propose a patch quickly, otherwise the ticket will be moved to the next milestone.

[spikeuk1]

Replying to audrasjb:

For the moment, this ticket still needs a patch. Please note that WP 5.6.2 release candidate is expected for Tuesday, so we'll need someone to reproduce the issue and to propose a patch quickly, otherwise the ticket will be moved to the next milestone.

Good day!
It it very likely that this issue is the same (or at least has the same cause) as in ticket https://core.trac.wordpress.org/ticket/52133 - which is currently flagged as "need testing". As I have noted on this ticket several times, I would be delighted to run tests and or diagnostics on the WordPress installations that I admin.
Regards
Spike

[desrosj]

Thanks for this ticket, and welcome to Trac, @spikeuk1!

My apologies that a contributor has not yet been able to investigate this. It seems that the related tickets noted above have a code example to cause the issue, but it's still not clear where the bug is, or how to fix it.

Since 5.6.2 RC is going to be packaged in a few hours and this one still requires some investigation, I'm going to punt to Future Release.

[spikeuk1]

Have just updated my WordPress installation from 5.6.1 to 5.6.2 and can confirm that the fault reported is still there.
I am temporarily masking the problem using the good ol' jQuery Migrate Helper plugin (set to "Legacy 1.12.4-wp").
Spike

[herrvigg]

Not sure but this could explain the problem, asynchronous firing with jQuery3: ​https://github.com/jquery/jquery/issues/3194

With jQuery3 ready handlers fire asynchronously and may be fired after load... there's no guarantee so that can explain some "random" behaviors.

Long story short, the load trigger should never be set in the ready callback but outside. Ideally it should even be avoided when using ready.

[spikeuk1]

Have just updated my WordPress installation from 5.6.2 to 5.7 and can confirm that the fault reported is still there.
I am temporarily masking the problem using the good ol' jQuery Migrate Helper plugin (set to "Legacy 1.12.4-wp").
Spike

[floriantactisens]

Hi everyone,

I am still stuck with this issue even when I use the JQuery Migrate Helper plugin (either set to "Wordpress default" or "Legacy 1.12.4-wp")
I can no longer add or modify articles or pages since every time I switch from the visual to text tab on the classical editor it adds this code :
"<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>"

Does anyone have news on this issue?

I am still on 5.6.2 version for now.

Thanks in advance,
Florian

[spikeuk1]

Replying to floriantactisens:

Hi everyone,

I am still stuck with this issue even when I use the JQuery Migrate Helper plugin (either set to "Wordpress default" or "Legacy 1.12.4-wp")
I can no longer add or modify articles or pages since every time I switch from the visual to text tab on the classical editor it adds this code :
"<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>"

Does anyone have news on this issue?

I am still on 5.6.2 version for now.

Thanks in advance,
Florian

Thank you for the comment (and bumping my ticket up the pile ;-) ), but I believe that the symptoms, cause, and probably fix for your problem is not the same as the issue that this ticket was raised for.
You would be better off creating another ticket as this one seems doomed to never be looked at :(
Spike

[Howdy_McGee]

I've installed a fresh version of WordPress 5.7 with the Classic Editor plugin installed ( no other plugins, Twenty Twenty One Theme ) and did not run into any of the described issues.

Windows 10
Firefox 87.0
Edge 89.0
Chrome 89.0

PHP 7.3.12
PHP 8.0.3

I've tried publishing new posts and switching between Visual/Text, Saving Drafts, built-in Pages, built-in Posts, Custom Post Type, leaving the post, and coming back to edit the published or draft. All of which functioned as expected. I didn't run into any issues of the editor freezing, content disappearing, or refusing to display text.

Could there be a common Browser Extension, Theme, or other Plugin interfering with how TinyMCE should be displaying?

[SergeyBiryukov]

Moving to the current milestone for more testing and investigation.

[gwwar]

If folks are able to reproduce this one, are there any JS errors thrown? A screenshot of Chrome or FF DevTools would be useful.

Does this trigger with some specific post content? Any other plugins running?

[yeisonbp]

Hi, with our current plugin, Get Awesome Support, each customer and each site we have we see this error as well. Our developers confirmed that this is from the WordPress side. you can install it an replicate it:

• Install Awesome Support (free)
• Log in as a support agent role
• Create a ticket (choose a ticket creator) and click on the blue "open ticket" button.
• choose the same ticket, add a reply and click on the "reply" button.
• Now that you have a new ticket and a ticket reply, click on the ticket again and go to the reply. Click on the pencil icon "edit ticket" button and you will see the error message.

Thanks.

[floriantactisens]

Hi everyone,

Here is my update on this problem. I tried to be as thorough as possible.

First it does not seem like a browser problem, since I tried on several browsers and on private session (no browser plugin) and I have the same issues.

I tried to deactivate all my wordpress plugins one by one and I found some interesting leads.
FYI I am still on Wordpress 5.6.3 and I use the Classic Editor plugin.
All the following observations are made on the page where I edit an article.

• First I found that when I activate "Jquery Migrate Helper" (Old version 1.12.4-wp), it adds 4 js errors at the beginning of the pile. They are of this sort : "Uncaught ReferenceError: jQuery is not defined". When I click on the visual/text tabs nothing happens.
• If I set "Jquery Migrate Helper" to "Wordpress Default", those 4 js errors disappear and I can click on the visual/text tabs, but the visual tab is empty and every time I click on it I have the js error "mce-view.min.js?ver=5.6.3:2 Uncaught TypeError: _.pluck is not a function"

When I go back to the text tab, it adds everytime another "<span>" as I described before ("<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start">")

• Deactivating all my wordpress plugins one by one allowed me to find oud that the Yoast plugin added a lot of js errors! When I deactivate it, I'm able now to switch between the visual and text tabs and I see my content in both tabs. I still have 4 js errors that say "Uncaught ReferenceError: tinymce is not defined" but does work...

Does anyone have experienced something similar with Yoast?

Here are a few screenshots if you want to have a closer look at the js errors :
​https://ibb.co/8c3V465
​https://ibb.co/N9nDvKY
​https://ibb.co/d4y9gr0
​https://ibb.co/Bn8ZgGd

Thanks again,
Florian

[spikeuk1]

Well that is all very interesting Florian - many thanks for that.

I have the Yoast Duplicate Post and Yoast SEO plugins - which of these do you have please?

Spike

Replying to floriantactisens:

Hi everyone,

Here is my update on this problem. I tried to be as thorough as possible.

First it does not seem like a browser problem, since I tried on several browsers and on private session (no browser plugin) and I have the same issues.

[floriantactisens]

I have both of those :

• Yoast SEO version 16.2
• Yoast Duplicate Post version 4.1.2

It looks like the Yoast SEO plugins causes the conflict problems, and not the Yoast Duplicate Post plugin.

EDIT : I just found a post that may be linked to this issue : ​https://wordpress.org/support/topic/yoast-bug-conflict-with-classic-editor-plugin/

Replying to spikeuk1:

Well that is all very interesting Florian - many thanks for that.

I have the Yoast Duplicate Post and Yoast SEO plugins - which of these do you have please?

Spike

Replying to floriantactisens:

Hi everyone,

Here is my update on this problem. I tried to be as thorough as possible.

First it does not seem like a browser problem, since I tried on several browsers and on private session (no browser plugin) and I have the same issues.

[spikeuk1]

I've just tried deactivating the Yoast SEO and then the Yoast Duplicate Post plugins one at a time and unfortunately my problem is still there if I set the JQuesry Migration Helper to "Default from WP" :(

I am also using version 4.1.2 and 16.2 of the Yoast plugins but am running with WP 5.7.1.

Thanks for the link to the post - I'll have a look at that.

Thanks!
Spike

Replying to floriantactisens:

I have both of those :

• Yoast SEO version 16.2
• Yoast Duplicate Post version 4.1.2

It looks like the Yoast SEO plugins causes the conflict problems, and not the Yoast Duplicate Post plugin.

EDIT : I just found a post that may be linked to this issue : ​https://wordpress.org/support/topic/yoast-bug-conflict-with-classic-editor-plugin/

Replying to spikeuk1:

Well that is all very interesting Florian - many thanks for that.

I have the Yoast Duplicate Post and Yoast SEO plugins - which of these do you have please?

Spike

Replying to floriantactisens:

Hi everyone,

Here is my update on this problem. I tried to be as thorough as possible.

First it does not seem like a browser problem, since I tried on several browsers and on private session (no browser plugin) and I have the same issues.

[azaozz]

Been looking/trying to consistently reproduce this for a while. Thinking @herrvigg is right, seems caused by the changes in the async firing of load/ready events. Moving the tinymce.init() to fire on DOM ready seems to fix all cases here. Patch coming up.

[azaozz]

In 52111.diff: initialize TinyMCE editors on DOM ready.

Please test this patch asap as 5.8 beta is fast approaching :)

[spikeuk1]

Replying to azaozz:

In 52111.diff: initialize TinyMCE editors on DOM ready.

Please test this patch asap as 5.8 beta is fast approaching :)

Many thanks @azaozz - I will try your patch ASAP.

[floriantactisens]

Replying to azaozz:

In 52111.diff: initialize TinyMCE editors on DOM ready.

Please test this patch asap as 5.8 beta is fast approaching :)

Hi @azaozz and thank you for your patch!

I just applied it to my class-wp-editor.php file and it looks like it didn't change anything for me, I still have the same javacript errors as indicated before.

But let's wait for Spike's test first, maybe something else is wrong on my end.

In any case many thanks for looking into it :)
Florian

[spikeuk1]

Replying to spikeuk1:

Replying to azaozz:

In 52111.diff: initialize TinyMCE editors on DOM ready.

Please test this patch asap as 5.8 beta is fast approaching :)

Many thanks @azaozz - I will try your patch ASAP.

Thanks again @azaozz - I have tried your patch and it does does not appear to make and difference to my prime problem ie edits made with the "Visual" tab in TinyMCE are not saved.

Lines 1665 to 1695 of my edited class-wp-editor.php file are as ​https://pastebin.com/cs7UNtDC

@floriantactisens - please excuse newbiness but could you tell me please how I can see the javascript error messages (I'm using Firefox but could use Chrome).

Thank you both!
Spike

[floriantactisens]

@floriantactisens - please excuse newbiness but could you tell me please how I can see the javascript error messages (I'm using Firefox but could use Chrome).

Hi Spike,

I'm more familiar with the interface of the Chrome tools but it should also work on Firefox. You just have to right+click on your web page and go to "inspect" (in french "inspecter" so I think the translation should be "inspect", anyway it's the last option). And then you'll have to go to the "console" tab and you can filter what you want to see (in this cas javascript errors).

I hope it helps :)
Florian

[spikeuk1]

Replying to floriantactisens:

@floriantactisens - please excuse newbiness but could you tell me please how I can see the javascript error messages (I'm using Firefox but could use Chrome).

Hi Spike,

I'm more familiar with the interface of the Chrome tools but it should also work on Firefox. You just have to right+click on your web page and go to "inspect" (in french "inspecter" so I think the translation should be "inspect", anyway it's the last option). And then you'll have to go to the "console" tab and you can filter what you want to see (in this cas javascript errors).

I hope it helps :)
Florian

Many thanks Florian, I can see the errors now :)

I appreciate your help.

Spike

[azaozz]

@floriantactisens looking at the error messages in your previous comment, seems the first is related to/caused by pixMediaInsert. No idea where that code comes from though. The "Failed to load plugin..." is most likely caused by using a very old TinyMCE plugin and shouldn't break anything. Worst case of this is you could see some untranslated strings on some specific TinyMCE modal or button.

The second, third and forth errors seem to refer to "missing" files/404s. Perhaps look in the Network tab in the browser tools for more info.

The <span data-mce-type="bookmark"... comes from TinyMCE trying to keep the cursor position when switching from Visual to Text, but something is preventing it to clean the content. These spans could get saved in the DB when other js errors happen, and can be safely deleted.

None of the above errors seem to be caused by core. Also switching to the old jQuery version with the jQuery Migrate Helper plugin should work fine. Perhaps look in the Network tab of the browser tools for more clues.

@spikeuk1 right, as @floriantactisens mentioned above you can right-click anywhere in the browser window and select "Inspect". That will open the browser tools. More info on how to use them: ​https://wordpress.org/support/article/using-your-browser-to-diagnose-javascript-errors/#step-3-diagnosis. Could you please post what errors you are seeing in the console (preferably screenshots).

In my testing 52111.diff seems to fix (or at least significantly improve) the initially reported problem (although I could reproduce it very rarely here):

...try to edit an existing page (or unpublished draft) the editing box in Visual mode is empty.
If you click on the Text tab the content is displayed. Clicking back to Visual mode and the
content is now visible.

It also seems to fix the related #52050 and #52133.

[spikeuk1]

Many thanks @azaozz for your help with this.

I have reverted class-wp-editor.php back the the original version.
Enabled SCRIPT_DEBUG as per step 2 of ​https://wordpress.org/support/article/using-your-browser-to-diagnose-javascript-errors/
Using Chrome I repeated the action that is causing my problems (saving and edit to a Page using the Visual tab of TinyMCE.
There was a lot of info in the console but the screen grabs are the errors highlighted (highlit?) in red.

​https://www.dropbox.com/s/t3t17rxs8zzrymz/Chrome_Error_Console_1.jpg?dl=0

​https://www.dropbox.com/s/bohndu8ylzd9dtt/Chrome_Error_Console_2.jpg?dl=0

Thanks again
Spike

[desrosj]

Today is beta 1 day for 5.8 and the cutoff for this ticket to make the release. Because there is still investigation happening to pinpoint the issue, I am going to punt this.

If a committer is able and interested in working on this between now and the deadline later today, it can be moved back.

[azaozz]

Thanks for posting the js errors.

Replying to spikeuk1:

Looking at ​https://www.dropbox.com/s/t3t17rxs8zzrymz/Chrome_Error_Console_1.jpg?dl=0 it seems something's wrong with the plugin or theme that adds wcpb.js. The jQuery is not defined error suggests that wcpb.js is loading before jQuery. Could be caused by a some sort of caching plugin or something that "moves" where the jQuery script is loaded.

Looking at ​https://www.dropbox.com/s/bohndu8ylzd9dtt/Chrome_Error_Console_2.jpg?dl=0 it seems there are two versions of jQuery UI loaded at the same time. One is from core, version 1.12.1, the other is jquery-ui.min.js and seems to be version 1.0. You can see where the second is coming from by clicking on the file name. If you can disable it, I'm guessing things would start working as expected.

Replying to floriantactisens:

Looking at the js errors, tinymce is not defined and jQuery is not defined could be some sort of caching plugin problems, or perhaps server errors (although then you should be able to see the HTTP errors in the browser tools network tab).

The Unexpected end of JSON suggests that some js was not outputted fully by the server. Seems related to/coming from media-upload.js?ver=1.0 (click on it to see what plugin adds that file). That could be related to the above errors.

It seemed that this ticket is related to initializing TinyMCE but all of the above errors seem to be coming either from the theme or from plugins. It's possible some are related to the jQuery update in core. Installing the ​Enable jQuery Migrate Helper will remedy these temporarily, but the plugins or themes that cause them will have to be updated or replaced (don't forget to clear all caches after installing or uninstalling Enable jQuery Migrate Helper).

Next step would be to identify where the scripts causing the js errors are coming from. The URL will point to the location and help identify the theme or plugin. Then looking through or posting on the appropriate support forum would be best.

Closing this as invalid. Please feel free to reopen if it can be reproduced with no plugins and a default theme.