Paste from Word or LibreOffice produces block of CSS first

[ogalinski]

Description
When pasting some simple text (one heading, one paragraph) from Word or LibreOffice, Gutenberg first creates a paragraph block of some CSS text and then the content blocks.

To Reproduce

1. Create a document in Word or LibreOffice, one heading and one paragraph (any text will do). Select all and copy.
2. Create a new Gutenberg post.
3. Paste content.

Expected behavior
One heading block and one paragraph block.

Screenshots

Desktop (please complete the following information):

• Windows 10 Pro
• Tested on Chrome 69 and FireFox Quantum 62 (64 bits)

Additional context

• Gutenberg 3.7.0
• Tested on local setup and also on testgutenberg.com.

[maximebj]

I was about to post this issue too!

Same thing with Word for Mac.

I know than this is not a good practice to do this but we won't be able to avoid people to do this.

[youknowriad]

Is this a known issue @iseulde @mcsf?

[ogalinski]

Funny thing is, I tested this in Gutenberg v2.0 and it was working fine.

[maximebj]

Regression! I'm calling the unit test police !

I think that it could be handled simply by removing block beginning with a styles statement + comment tag

[designsimply]

Also see #9759, #9761.

[designsimply]

Tested and confirmed using LibreOffice 6.0.6.2 and WordPress 4.9.8 and Gutenberg 3.8.0-rc.1 with Firefox 62.0 on macOS 10.13.6.

Sample file https://github.com/WordPress/gutenberg/files/2367501/Word.docx
^{(h/t @troytempleman for linking to this sample file in another issue)}

^{Seen at http://alittletestblog.com/wp-admin/post.php?post=14846&action=edit running WordPress 4.9.8 and Gutenberg 3.8.0-rc.1 using Firefox 62.0 on macOS 10.13.6.}

[designsimply]

I re-tested to confirm whether this is a regression and I found that the problem does not happen in 3.6.2 but does happen in 3.7. Steps to reproduce:

1. Open https://github.com/WordPress/gutenberg/files/2367501/Word.docx with LibreOffice (or Microsoft Word).
2. Copy all.
3. Start a new Gutenberg post.
4. Paste.

Result: CSS is included as content in the paste and shows in the visual editor.

[troytempleman]

Pasting into Internet Explorer gives a different result, as described in #9759. Styles don't get inserted but all text gets inserted into one block and is not properly formatted (i.e paragraph breaks, lists, etc.).

[tanjoymor]

Tested and found that using a Classic block allows for proper pasting. No CSS code and it retains formatting.

[mcsf]

It's a bit late here for a proper Git bisecting, but we are indeed missing integration tests for document styling. See #10019 for said tests and a possible fix.

[pwkip]

This problem still occurs when you paste inside a block that only allows paragraphs.

To reproduce:

• create a block that only allows paragraphs. <!-- wp:myblocks/group-content {"allowedBlocks":["core/paragraph"]} --> ... <!-- /wp:myblocks/group-content -->
• Try to paste from word or libreoffice in this block.
• You will see the @page styles appearing as plain text

[paaljoachim]

WordPress 5.8
Twenty Twenty One theme
Gutenberg plugin 11.3. (Only plugin activated.)

Pasting text into a page. (I am not certain how to reproduce your testing @pwkip Jules.)

Testing with TextMakerFree from Softmaker Free office 2018.
---> Works.

---

Testing with LibreOffice 7.2.
---> Works.

[pwkip]

Thanks for testing Paal. However, you would need to create your own custom group that only allows paragraph blocks before you can reproduce this. Creating your own Gutenberg blocks is still not something trivial as you will need to register the block trough PHP and include some additional JS and CSS files. Explaining how to reproduce the error would mean writing a complete tutorial first. Instead, I'll try to write a quick plugin that registers a group that only allows <p>-blocks. Will keep you posted.