Gutenberg: Preformatted blocks are losing whitespace.

[diegoreymendez]

Describe the bug

Preformatted blocks are not really working as expected. They're losing whitespace when converting from visual to HTML and back.

Gutenberg v2.9.2

To Reproduce

Steps to reproduce the behavior:

1. Add a "Preformatted" block
2. Write some text with extensive usage of whitespace. For example

This is some text
     in two lines        yes two lines

1. Save the post.
2. Exit and reopen it.

Expected behavior

The whitespace should be maintained.

Screenshots

Desktop (please complete the following information):

• OS: OS X
• Browser Safari
• Version 11.1 (13605.1.33.1.4)

[danielbachhuber]

Hi @diegoreymendez,

Thanks for the detailed report! I can't reproduce this issue in Safari Version 11.1 (13605.1.33.1.4) on master or in Gutenberg v2.9.2:

Are you running any plugins that might impact what's being saved? Can you debug further to see if you can track down any more details?

[diegoreymendez]

In the following example, the plugins I have are:

Gutenberg 2.9.2
Jetpack 6.1.1

[danielbachhuber]

Can you try disabling Jetpack and seeing if he problem reproduces with Jetpack disabled?

[danielbachhuber]

@diegoreymendez Were you able to track this down?

[diegoreymendez]

@danielbachhuber - I'm getting the same issue with Jetpack disabled. It's not properly rendering whitespace when following the steps from my GIF above.

[danielbachhuber]

@diegoreymendez Odd. Could it be a browser extension?

[diegoreymendez]

@danielbachhuber - This is what I see without WP Plugins (other than Gutenberg), and without Safari extensions (the only one I had was 1Password, and I disabled it for this).

I noticed you tested this doing some form of page reload... can you try switching to HTML mode and back to see if you can reproduce the same behavior?

[danielbachhuber]

can you try switching to HTML mode and back to see if you can reproduce the same behavior?

Yes, I can reproduce your bug report now. Thanks for diligently tracking down reproduction steps.

[rosswintle]

I've found what I think is the same thing. It occurs when duplicating blocks and when saving a post and re-loading.

This is:

• Chrome 67
• MacOS High Sierra 10.13.5
• WP 4.9.6
• Gutenberg 3.0.1
• Lots of plugins (this is on my live blog site)

Video: https://cl.ly/2C0d2w2W291P

Looks like you've managed to replicate but do you want me to try and make this happen in a simpler setup?

[danielbachhuber]

@rosswintle I think this part of your video describes the reproduction steps well:

Notably:

1. Create a pre-formatted block.
2. Write some indented text into the block.
3. Duplicate the block.
4. Notice that the text in the duplicated block has lost its formatting.

I wasn't able to reproduce the aforementioned steps with the paragraph block, so it seems specific to the pre-formatted block.

I don't know the transformation code well enough to know how to debug this yet though.

@iseulde @jorgefilipecosta @aduth Any tips for debugging?

[aduth]

I expect this is likely related to / duplicate of #4456 , caused by block serializer's beautification removing excess whitespace.

Though I might have thought js-beautify would at least ignore text within pre tags. Seems it's being respected okay at least for the original block?

I wasn't able to reproduce the aforementioned steps with the paragraph block, so it seems specific to the pre-formatted block.

It could be that TinyMCE is inserting whitespace as   entities, whereas the Preformatted block is using a simple textarea field.

[danielbachhuber]

Some good examples in #7836

[danielbachhuber]

This is fixed by #7892