Opening Gutenberg post in Classic Visual editor adds unwanted <p>&nbsp;</p> content

[weavertheme]

Issue Overview

For GB 2.7:

I don't think gutenberg_disable_editor_settings_wpautop is working as expected. I would hope that it would prevent editing a GB post with the classic editor would prevent it from changing all the blank lines between the GB blocks into <p>&nbsp;</p> which then add lines and show up in GB as a Classic block.

Steps to Reproduce (for bugs)

1. Create a page/post with Gutenberg blocks (duplicate one you already have
2. From the All Pages/Posts view, edit that page in the Classic Editor, save
3. Open same page in Gutenberg - all the formerly blank lines have been changed to <p>&nbsp;</p> with unintended consequences.
4. It seems from the comments that gutenberg_disable_editor_settings_wpautop is supposed to prevent that, but it doesn't.

Expected Behavior

Current Behavior

Possible Solution

Maybe changing the priority of the gutenberg_disable_editor_settings_wpautop filter?

Screenshots / Video

Related Issues and/or PRs

Todos

• Tests
• Documentation

[danielbachhuber]

Related #4672 #4446

[danielbachhuber]

Specifically, if you start out with the following in the Text editor:

<!-- wp:heading -->
<h2>This is a heading block</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This is my paragraph text.</p>
<!-- /wp:paragraph -->

Switching to the Visual Editor and then back to the text editor leaves you with this:

<!-- wp:heading -->
<h2>This is a heading block</h2>
<!-- /wp:heading -->
<p>&nbsp;</p>
<!-- wp:paragraph -->
<p>This is my paragraph text.</p>
<!-- /wp:paragraph -->

Here's a GIF of the behavior:

[azaozz]

This is not related to wpautop. TinyMCE can make (empty) paragraphs from HTML comments that are on a separate new line. Example: http://fiddle.tinymce.com/Ctgaab/5.

To fix this we need to fix the white space between HTML comments when loading the content in TinyMCE, something like:

content = content.replace( /-->\s+<!--/g, '--><!--' );

And of course restore that on saving and switching to the Text editor with:

content = content.replace( /-->\s*<!--/g, '-->\n\n<!--' );

Edit: actually it makes sense for this to be in core right now. It's a bugfix there too. Created https://core.trac.wordpress.org/ticket/44308, will make a patch.

[azaozz]

https://core.trac.wordpress.org/attachment/ticket/44308/44308.patch

[danielbachhuber]

@azaozz I tested this locally against my wordpress-develop checkout:

grunt patch:https://core.trac.wordpress.org/attachment/ticket/44308/44308.patch
grunt build

However, the issue still manifests:

Is there some other step I'm missing?

[azaozz]

However, the issue still manifests

Testing TinyMCE in /build has some quirks. Enable SCRIPT_DEBUG and make sure the browser cache is cleared :)

[danielbachhuber]

Enable SCRIPT_DEBUG and make sure the browser cache is cleared :)

Even clearing browser cache didn't work for me! Opening in incognito did though.

[danielbachhuber]

@azaozz Do you think we can shim this into Gutenberg for a more immediate fix?

[azaozz]

Sure, think there was a place to add classic editor's TinyMCE fixes somewhere. If not, will have to make a tiny TinyMCE plugin :)

[danielbachhuber]

👍 Looks like fix/classic-editor-paragraphs-from-comments will shortly become a pull request :)