Items (like Galleries) Disappearing from Visual Editor

[crushgear]

When you create a post in WordPress and insert a gallery (or any item, like a more tag), the items disappear as you are working on the post. You can get the items to reappear by toggling between the "Visual" and "Text" tabs.

Testing Notes:
Working with johnjamesjacoby, we've been able to replicate this issue on trunk, 3.5, 3.4, 3.3, 3.2, and 3.1. I was not able to replicate it in 3.0. We noticed that with each version back, the bug takes longer and longer to appear, and we think it has to do with the autosave.

When we turned off autosave while running trunk, the bug went away.

How to Replicate:

1. Make a new post
2. Insert a gallery
3. Click outside of TinyMCE (you can also navigate away, to another tab)
4. Wait 5 seconds
5. Click back into TinyMCE
6. Poof.

[johnjamesjacoby]

When we turned off autosave while running trunk, the bug went away.

For context, I disabled autosaves by not enqueueing autosave.js. Should help narrow it down to a specific ajax action and/or offending script.

[azaozz]

There is a connection between autosave and TinyMCE: each time we do autosave, we trigger the 'save content' functionality in TinyMCE to move the content from the iframe to the underlying textarea. This is a pretty complex process: the DOM gets serialized, cleanup and quite a few filters run before and after that, etc. The gallery placeholder image is replaced with the gallery shortcode at this time too.

This looks like another new Chrome bug. The gallery placeholder image doesn't disappear, however the style for it is not applied any more...

It seems there may be a conflict between the placeholder image class name and the TinyMCE plugin name, both are wpGallery. That sounds very weird but changing the class name seems to fix it here. @crushgear, @johnjamesjacoby could you see if this fixes it for you too.

If that doesn't work, another workaround would be to add inline style to the placeholder image. However that will prevent themes from changing it in editor-style.css.

[azaozz]

In 24215:

TinyMCE: fix for the disappearing placeholders bug in Chrome, see #24177

[SergeyBiryukov]

Related: #24344

Twenty Twelve would need to use the renamed .mce-wp-nextpage class in editor-style.css:
tags/3.5.1/wp-content/themes/twentytwelve/editor-style.css#L311​

[azaozz]

Twenty Twelve would need to use the renamed .mce-wp-nextpage...

Yes, will need to update editor-style.css in some themes. As far as I can tell, the changed class names fix the Chrome bug. Would be best if that is tested and confirmed by few other people though. After that we can make the rest of the changes.

[ryan]

I used to see this problem all the time. No longer. Looks fixed to me.

[aaroncampbell]

I was getting this pretty regularly and haven't seen it since the fix either. What themes need to be tweaked?

[azaozz]

In 24319:

TwentyTwelve: in editor-style.css change .mceWPnextpage to .mce-wp-nextpage to match the core fix for Chrome. See #24177.

[azaozz]

The fix in [24215] seems to work well in all cases.

[tiraeth]

The issue still exists in 3.5.2, at least using Chrome 28.0.1500.71. When autosave triggers the gallery item (for instance) goes missing (the styling is not applied, because in text edit the shortcode exists).

Any ideas?

[helen]

Replying to tiraeth:

Edit: I see the milestone 3.6. The code from [24215] hasn't been applied to 3.5 branch. Does this mean that I will have to wait until 3.6 is released?

Yes.

[programmin]

Interesting. According to that patch, adding dashes in the classname fixes it? I'm real curious about what the underlying bug is in Webkit that causes this.