Gutenberg: 4.1: Heading blocks HTML often gets an invisible garbage trailing line break `<br>`

[lkraav]

Describe the bug

To Reproduce
Steps to reproduce the behavior:

1. Edit a H2 heading block "Markup garbage bad"
2. ... (not sure why or how, yet - effect might be due to editing heading, or perhaps surrounding blocks)
3. Frontend at one point renders <h2>Markup garbage bad<br></h2>

Expected behavior
Training invisible garbage should be unconditionally removed, probably even if the user has literally entered a shift+enter line-break.

<h2>Markup garbage bad</h2>

Screenshots

Desktop (please complete the following information):

• Linux
• Firefox
• 64

[designsimply]

I tried testing with WordPress 4.9.8 and Gutenberg 4.2.0 using Firefox 63.0 on macOS 10.13.6 and couldn't reproduce the problem where <br>s appeared at the end of headings unexpectedly. I did find that if I manually press Shift+Enter at the end of a heading then I do see <br>s at the end of the heading both in the editor and on the front end. Are you saying that you see the problem happen even if you aren't explicitly entering Shift+Enter at the end of headings?

[lkraav]

Are you saying that you see the problem happen even if you aren't explicitly entering Shift+Enter at the end of headings?

Yes, I'm specifically calling out unintended line breaks.

Like I said above, I'm not entirely sure yet what the process is to reliably produce them. They may also be remnants from some older Gutenberg version.

I'll post here as soon as I find a more specific clue. Until then, maybe someone else also sees them and finds their way here.

[designsimply]

Thanks for clarifying. 🙂 May I also ask which version of the Gutenberg plugin you are testing with or if you are using WP 5.0 beta? And just to confirm, have you confirmed whether any plugins or if the theme you are using attempts to add or remove wpautop? (You have probably checked that already!)

[lkraav]

May I also ask which version of the Gutenberg plugin you are testing with or if you are using WP 5.0 beta?

Anecdotally, I think I've seen it over the last few months of GB releases, and I usually update nearly instantly on releases.

And just to confirm, have you confirmed whether any plugins or if the theme you are using attempts to add or remove wpautop?

I have wpautop well in grip on frontend, but this is not about frontend.

These stray line breaks have been created and saved already during Gutenberg editing experience. They are part of content, not virtual rendering artefacts like with wpautop.

For example, something like "create header, write text, shift+enter force line break, write second line ... later delete second line" but maybe Gutenberg fails to also remove the trailing <br> here? Important part being - UI would probably show the header as a single line, so the user has no idea there's a trailing garbage line break.

[designsimply]

Tested and confirmed. Closing as a duplicate of #5872 as I think it's the same underlying issue. Let me know if you disagree though and we can re-visit!

Steps to reproduce:

1. Create and publish a new post with a few headings.
2. View page source (for the editor) to see if there are line breaks at the ends of headings.
3. Edit the post and make an update to any heading that didn't have a line break before.
4. View page source again (for the editor) to see if there are line breaks at the ends of headings.

After creating a post with two headings, I can see a line break at the end of one of them:

After editing the heading without a line break, I can see a line break is added:

^{Seen at view-source:https://tan-otter.jurassic.ninja/wp-admin/post.php?post=94&action=edit running WordPress 4.9.8 and Gutenberg 4.5.1 using Firefox 63.0.3 on macOS 10.13.6.}

Another testing note:

• I tested with WordPress 4.9.8 and Gutenberg master bd897f6cb as well. In both cases, sometimes I could see a trailing line break for a heading and sometimes I couldn't. In the cases where there was not a line break to start, if I edited the post and modified that heading and refreshed the page and then viewed source again… I could see a line break added at that point.