Gutenberg: Empty paragraph in text column block

[samikeijonen]

When I add text column block (2,3, or 4 columns) I always get empty (<p></p>) paragraph in the front end. No matter how I try to write text in the admin.

[Kuckovic]

I have the same issue!
How can we get rid of this??

[youknowriad]

I can't reproduce this, can we have more context? steps to reproduce?

[samikeijonen]

1. Add Text Columns block.
2. Write text in the columns.
3. Save.
4. Check front end, and there are empty <p> tags.

<section class="wp-block-text-columns alignundefined columns-2">
  <div class="wp-block-column">
    <p>This is it for me.</p>
    <p></p>
  </div>
  <div class="wp-block-column">
    <p>This is it for see.</p>
    <p></p>
  </div>
</section>

[afercia]

I'd also argue a <section> element is not appropriate in this case. Even a quick reading of the spec clarifies it pretty well: https://www.w3.org/TR/html51/sections.html#the-section-element

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. Each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.
...
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.

[samikeijonen]

In #2908 we are discussing about markup and changing to <div>.

But I still see the original issue, which is empty <p></p>.

[jorgefilipecosta]

This issue seems a bug in WordPress core, for example in the classic editor if we add this content:

  <div>
    <p>test</p>
  </div>

In the browser we get:

<div>
 <p>test</p>
 </p></div>

Then the browser adds the missing opening tag. This seems like the root cause of this problem.

[noisysocks]

I'm unable to reproduce this bug in Gutenberg 2.7.

[samikeijonen]

Now Enter doesn't create new <p> but <br>.

Markup looks like this in the front end:

<div class="wp-block-text-columns alignundefined columns-2">
    <div class="wp-block-column">
        <p>This is it.<br><br>And another one.<br>What, one line.</p>
    </div>
    <div class="wp-block-column">
        <p>This is it.<br>This is it.<br><br>It is.</p>
    </div>
</div>

That's not correct either.

[samikeijonen]

Is the above markup correct or should we close this? I personally feel it's weird that pressing Enter creates <br> and not new <p>.

[youknowriad]

In my testing, shift + Enter creates <br> but regular Enter creates new paragraphs.

[samikeijonen]

I was testing the plugin version, could be resolved in the master.

[ajitbohra]

Tested on master Enter creates <br>

[samikeijonen]

I confirm what @ajitbohra noted, this is still issue.

[noisysocks]

Here's my understanding of the issue:

1. Create a Text Columns block
2. Type some text into one of the columns
3. Press Enter
4. Type some more text
5. View the source of the post

Result: The two lines of text are separated by a <br>.
Expected result: The two lines of text should be in seperate <p> tags.

---

I'm on the fence as to whether this is a bug. On the one hand, it matches how other blocks that contain a rich text area work, e.g. Verse, Quote, Preformatted. On the other, it does not match how the Columns (not Text Columns) block works.

My gut feeling is to leave this as is because, hopefully, Columns will soon be stable enough for us to simply remove the Text Columns block.

Thoughts, @jasmussen?

[samikeijonen]

My gut feeling is to leave this as is because, hopefully, Columns will soon be stable enough for us to simply remove the Text Columns block.

That make sense.

[scamba]

To remove empty <p></p> i am positioned my cursor inside this possible paragrah and i pulse delete key until to get my real last element, and save page. Sorry for my english i hope this help anyone