Why column blocks are not wrapped in a DIV?

[manake]

Current:

<div class="wp-block-columns has-3-columns">
    <h2 class="layout-column-1">Heading</h2>
    <p class="layout-column-1">Paragraph.</p>
    <h2 class="layout-column-2">Heading</h2>
    <p class="layout-column-2">Paragraph.</p>
    <h2 class="layout-column-3">Heading</h2>
    <p class="layout-column-3">Paragraph.</p>
</div>

Proposed:

<div class="wp-block-columns has-3-columns">
    <div class="layout-column-1">
        <h2>Heading</h2>
        <p>Paragraph.</p>
    </div>
    <div class="layout-column-2">
        <h2>Heading</h2>
        <p>Paragraph.</p>
    </div>
    <div class="layout-column-3">
        <h2>Heading</h2>
        <p>Paragraph.</p>
    </div>
</div>

Otherwise I can't stack these columns on mobile resolutions and give each margin-bottom easily.

[manake]

Here's another problem regarding this situation which I just discovered:

<div class="wp-block-columns has-2-columns">
    <div class="layout-column-1" style="width: 100%; height: 400px; background: #eee;"></div>
    <div class="layout-column-2">
        <p>Text 1</p>
    </div>
    <div class="layout-column-2">
        <p>Text 2</p>
    </div>
</div>

In the above case the #eee rectangle and Text 1 are horizontally on the same line. But Text 2 is positioned 400px from the top in the second column (when it's expected to be right below Text 1).

Proposed fix:

• Wrapping columns in DIVs (like described in my first post) would solve this.
• However, the current behavior is useful for some things so a better fix is this:
  • Add a setting to the current "Columns (Experimental)" block that would switch between various display options for columns (the current behavior should not be default).

[ocean90]

Thanks for your feedback. #5351 has a lot of discussion about the current implementation of the column block. I'm closing this to keep the discussion at one place.