Gutenberg: <br> tags appearing in random Parapgraph blocks

[maddisondesigns]

Describe the bug
Since ugrading to 5.0 Beta 1, I'm now seeing multiple random paragraph blocks being littered with <br> tags.

To Reproduce
Steps to reproduce the behavior:

1. Update to 5.0
2. View previously created pages

Desktop (please complete the following information):

• OS: macOS Sierra 10.12.6
• Browser: Firefox Quantum 63.0 (64-bit)
• Version: WP 5.0 Beta 1

[pagelab]

I'm experiencing this too after upgrading to WordPress 5.0-beta1-43823.

[youknowriad]

Duplicate of #11038 Should be fixed by #11050

[youknowriad]

Oh sorry this is a beta5 issue and slightly different. Probably better as a trac issue if you don't reproduce with the plugin.

[designsimply]

I tried testing this for the plugin with the following steps:

1. Install Gutenberg 4.0.0.
2. Create a new post.
3. Copy several paragraphs of text from https://www.lipsum.com/
4. Publish the post.
5. Upgrade to Gutenberg 4.1.0.
6. View the post on the front end.

Result: no extra <br> appeared in the text.

^{Seen at http://alittletestblog.com/2018/10/25/lorem-ipsum/ running WordPress 4.9.8 and Gutenberg 4.1.0 with the Twenty Seventeen 1.7 theme active using Firefox 62.0.3 on macOS 10.13.6.}

I did a quick search for "<br>" at https://core.trac.wordpress.org/search?q=%3Cbr%3E and didn't spot anything already filed there for WP 5.0 beta. It may also help to note how the content was created or if the line breaks make any sense to you as to where they're falling.

[maddisondesigns]

@designsimply The line breaks definitely don't make sense. You can see from my screenshots above, especially that first one, where the paragraph content no longer goes the full width of the line. These <br> tags defintely weren't there before upgrading to 5.0 as I would've noticed if that content was displaying like that.

[pagelab]

Updating the plugin to 4.1.1 solved the issue for me.

[ellatrix]

@maddisondesigns Is this still an issue in Gutenberg 4.2?

[maddisondesigns]

@iseulde When I view the page on the site, it's still displaying content with line breaks that were never there when the page was created.

When I edit the page, the paragraph seems to displays fine.

In the Visual Editor

But when I switch to the Code Editor I can see the line breaks

I haven't re-saved the page. If I Update/Re-save the page will that fix it? Let me know if you want me to do that.

This is using 5.0-beta2-43852

[lkraav]

@maddisondesigns is this a clean test site, or a multi-plugin staging/production site? Any plugin running wpautop() or apply_filters the_content incorrectly can result in this symptom, so trying to figure out if you have additional plugins active.

[maddisondesigns]

@lkraav It's not a brand new test site. It's one that I've been using for a lot of my Gutenberg testing. It's just a plain 'ol WP install, not Multisite. The only plugins activated (at the moment) are ACF Pro and WooCommerce.

The theme is my own (which is in the .org repo) and I'm not running wpautop or apply_filters on the_content. This content was displaying fine prior to upgrading to beta 1, so it's definitely not the theme.

[lkraav]

This content was displaying fine prior to upgrading to beta 1, so it's definitely not the theme.

Indeed, perhaps not in this particular case, sounds like a relatively clean situation.

When major things shift around (as in, some of the filter priorities in 4.0), new code execution order creates issues that weren't there before - was looking to eliminate that from this equation.

[catehstn]

@designsimply please can you take a look and close this if resolved?

[danielbachhuber]

Closing in favor of #5872, which I believe is the same underlying problem with the rich-text component.

[designsimply]

(For completeness) I re-tested using the following steps:

1. Install WordPress 4.9.8.
2. Create and publish a post with text copied from https://www.lipsum.com/feed/html
3. Install & activate the Gutenberg plugin.
4. Create and publish another post with text copied from https://www.lipsum.com/feed/html
5. Install & activate the WordPress Beta Tester plugin.
6. Go to Tools > Beta Testing, click "Bleeding edge nightlies," and click "Save Changes."
7. Go to Dashboard > Updates and click "Update Now." (5.0-RC1-43944 in my case)
8. View the published posts to look for extra line breaks (<br>) where they don't seem to belong.

Result: at no time could I get the paragraphs to show up with extra line breaks, the post created with the classic editor did not have line breaks added to the ends of headings but the post created with Gutenberg did (regardless of updating to 5.0-beta5 so this issue is confirmed present in the plugin itself).

^{Seen at view-source:https://profound-mouse-eared-118.jurassic.ninja/2018/11/23/lorem-ipsum-2/ for a post made with WP 4.9.8 & Gutenberg 4.5.1 which was then upgraded to WordPress 5.0-RC1-43944. Tested using Firefox 63.0.3 on macOS 10.13.6.}

@maddisondesigns I noticed the comments on #5872 do mention that the problem happens for some people in both headings and paragraphs. If you're still seeing the problem happen with paragraphs, please let me know because I am curious and would like to be able to confirm that part of the problem in testing. Other than that, we can defer to #5872.