Rendering empty paragraph blocks

[edirpedro]

The editor is rendering empty paragraph blocks and this always cause some issues in the front-end, placing empty spaces on screen that breaks the design and the client can't understand what is happening and how to fix it.

It's hard to fix too because the paragraphs can appear on the editor with just a click or using the arrow keys to navigate through the blocks. It's easy to create those empty tags when editing some content. I can understand the way the editor add this block automatically, but if empty, the editor shouldn't save them without some content, at least a space to indicate that it was really intentional.

Moving between blocks using arrow keys creates empty paragraph blocks

They are saved and rendered on the front-end

Testing on WordPress 5.2.1

[talldan]

Hi @edirpedro - thanks for creating the issue. Are you specifically talking about an empty paragraph at the end of a post? It's a bit hard to tell, because in your screen capture it's an empty paragraph between blocks.

I wasn't able to reproduce it in my editor. I tried:

1. Add a block
2. Add another block
3. Use arrow keys to navigate between them.

Result: no unexpected blocks were added.

If you can provide some specific steps that others can follow to reproduce the issue that would be really helpful. Thanks.

[edirpedro]

1. Add a columns block
2. Add an image block inside each one
3. Use arrows keys to navigate between them

Another way is just starting a document and hit enter to add new paragraphs. The empty tag <p> will be saved and rendered in the front.

Results in:

<h1>Gutenberg</h1>
<p></p>
<p></p>
<p></p>
<p></p>

In my opinion, only a paragraph with some space <p> </p> should be saved as intentional, when empty, the editor should remote it when saving.

[senadir]

some people use empty paragraphs for spacing between blocks of text, removing them all together might cause problems & compatibility issues

a fix you can implement on your side is to hide empty paragraphs all together

p:empty {
    display: none;
}

or hide the last one if you wish

p:empty:last-of-type {
    display: none;
}

[swissspidy]

Previously reported in #10051, #13599. Also related: #11238.

[edirpedro]

I was thinking about and first, using empty paragraphs is how text editors works and how people usually write when they need some space in the document, second, for web development this can be intended as a bug because empty tags is not a good practice.

As a developer I would like to see this "feature" removed, but i'm not sure how this would affect other people who will write content. But Gutenberg doesn't work exactly like a text editor because of the block elements used to create content, the interface is not clean like a text editor is, so empty paragraphs does not seems to fit good on it. In my recorded video you can see that they break good rendering even on the Gutenberg side.

There is a Spacer block so I think that this element should be the right one to create spaces inside Gutenberg and not empty blocks.

[senadir]

maybe we can find a way to keep compatibility & encourage the use of the Spacer Block

[jkd77]

Has there been any movement on this issue? If there's an empty block awaiting text (for admin convenience) it should either be deletable in back-end or should not render an empty element on the front-end. Visual element spacing should be the purview of style / css and not empty paragraphs.

[youknowriad]

Let's close this as a duplicate to #10051 to keep discussions focused.