Copy + pasting blocks inserts classic editor before and after the pasted element (On Windows only)

[QuietNoise]

Describe the bug
If you copy / paste a block or multiple blocks within the editor the pasted version of the content will be wrapped with Classic block before and after.

To reproduce
Steps to reproduce the behaviour:

1. Select one or few blocks (Heading, Paragraph, Image) while editing content in the Editor and copy it clipboard (Ctrl + C)
   

2. Click anywhere else in the editable area of the page and paste the clipboard (Ctrl + V).
   

3. Observe two additional empty Classic blocks added, one at the start and one at the end of the pasted content
   

Expected behavior
I would expect the pasted content does not have any extra blocks to it.

This is especially an abhorrent issue when we know that Classic block does not work in Container blocks (Group, Columns) and irrecoverably breaks them as reported by numerous. (consolidated here #13187).

So, if you happen to paste your content into a Column or Group and you don’t deliberately delete the extra Classic blocks then the content in your Containers block will be screwed after you update the post and come back to editing it later.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome 75
  Tested on WP Version 5.2.2 (with Gutenberg deactivated as well as with Gutenberg 5.9.2 and with 6.0.0).
  Tested on rather heavy customised sites as well as on fresh WP / Gutenberg installs.

Additional context
The copied blocks’ code doesn’t expose any ‘extras’ in them.

<!-- wp:heading -->
<h2>Heading</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Paragraph</p>
<!-- /wp:paragraph -->

The issue is appearing when you paste the code.

I consider this a very serious issue.
Most of my clients are aware to not use the Classic editor in the container blocks as of now. This adds another level of hurdle to their CMS experience.
I went to investigate few sites and I did observe this bug breaking content across the realm of WP. Quite often people don't even realize that the page they published / updated will have un-editable parts in them when they return to edit screen at a later date.

[youknowriad]

What version are you using? I'm not able to reproduce the issue personally.

[QuietNoise]

Hi @youknowriad
I've just replicated the issue on wordpress.com and on local fresh installation of WP 5.2.2 with Gutenberg 6.3.0.

Exact steps I did:

1. Create a new page.
2. Enter a paragraph block. Enter text. Convert to header.
3. Enter 2 more paragraph blocks.
4. Select above three blocks with your mouse so they are highlighted.
5. Copy to clipboard (Ctrl+C).
6. Paste them below (Ctrl+V).
   Pasted content will have Classic blocks above and below.

Tested on Windows 10 in Firefox, Chrome and Edge with same behaviour.

View from Wordpress.com:

View from local installation:

Hope that helps.

[youknowriad]

@QuietNoise Are you converting to "header" or "heading"? Header block is not something that is available in Gutenberg Core. I just tried again in master with the heading block and I'm still not able to reproduce. I'm using Chrome but MacOS.

Also, I wonder if it's specific to WordPress.com integration somehow?

[QuietNoise]

@youknowriad My bad. I meant the Heading block.
I went on to some macOS machines (Sierra, El Captain, Mojave) and I couldn't replicate it on any of them.
I went on to some other Windows computers and the problem is replicable on all of them.

We can then assume it's a Windows specific problem and that's why you can't see it. Maybe something to do with Ctrl key being pressed or with format of the clipboard on Windows. No idea. Wild guessing here.

[youknowriad]

Interesting. Let's reopen and debug. Thanks for helping. Would you be able to share the content of the browser console, when you paste?

[youknowriad]

cc @ellatrix weird windows pasting issue. Not sure if you know anything about that.

[QuietNoise]

As requested.

Console when pasting from mac:

Console when pasting on windows:

[youknowriad]

Thanks a lot @QuietNoise It seems that the error might come from the extra html/body tags added in windows to the received HTML content, we should probably strip them.

[QuietNoise]

There is definitely something to it. If I paste the clipboard HTML from Windows on a mac machine it will expose the bug behaviour. I.e. paste this in editor on mac:

<html><body>
<!--StartFragment--><!-- wp:heading -->
<h2>Heading Win</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Paragraph Win</p>
<!-- /wp:paragraph --><!--EndFragment-->
</body>
</html>

The text will be treated as a plain text rather than HTML but the bug will appear regardless.

[yankiara]

Same issue WP 5.3... Any news about this?
Gutenberg Editor is unusable in this state :-(

[ellatrix]

The issue seems to be the extra StartFragment and EndFragment comments together with other starting and ending tags added by the browser or OS. We're not stripping those if we detect Gutenberg content, so the parser puts those unrecognised pieces of HTML in a classic block. I'll look for a solution.

[ellatrix]

Output:

<p> <!--StartFragment--></p>

<!-- wp:heading -->
<h2>Heading Win</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Paragraph Win</p>
<!-- /wp:paragraph -->

<p><!--EndFragment-->  </p>