Add container divs for each column in the Columns block

[paulwilde]

The current way that the columns HTML is saved makes it impossible to style if you aren't using CSS Grid. Whist browser support for CSS Grid is decent, it's not good enough when dealing with particular clients (An example being the NHS in the UK).

For a 2 column block, the current output is as such:

<div class="wp-block-columns has-2-columns">
    <p class="layout-column-1">Column 1</p>
    <figure class="wp-block-image layout-column-1"><img src=""></figure>
    <p class="layout-column-2">Second one</p>
</div>

To allow for a grid using CSS Flexbox, or legacy floats it would need to be:

<div class="wp-block-columns has-2-columns">
    <div class="column layout-column-1">
        <p>Column 1</p>
        <figure class="wp-block-image"><img src=""></figure>
    </div>
    <div class="column layout-column-2">
        <p>Second one</p>
    </div>
</div>

Adding containers still works with CSS Grid, whilst also allowing for added flexibility. Having the added column class also allows for much more flexibility (Instead of targeting layout-column-1, layout-column-2 etc.) such as the following CSS:

.wp-block-columns {
    display: flex;
    flex: flex-wrap;
}

.has-2-columns > .column {
    flex: 0 0 50%;
}

[paulwilde]

Upon further testing it seems that the current implementation has bugs with what I'm trying to achieve anyway, so if anything this is required moving forward regardless.

In the Gutenberg admin here is the Columns block with 2 columns, text with right floated images:

Now on the front-end (Using identical grid markup as Gutenberg), this is how its displayed:

Due to the lack of containers, the image isn't contained. This isn't an issue within Gutenberg itself due to markup actually having containing divs:

[samikeijonen]

Discussion also in #5351.

[rchipka]

👍

[paulwilde]

#7234 resolved this.