Support for Responsive Columns

[ZebulanStanphill]

Issue Overview

The Columns block, while definitely improved from its first implementation, is still pretty useless due to the fact that the columns are not responsive. The only number of columns you might get away with on a phone screen is 2, and that is only for things like images or buttons, not textual content.

Additionally, the Columns block only allows for same-width columns, which is considerably restricting, but that is covered in #4902, so I'll just say that I think that between the two, responsive columns is more important, as non-equal width columns would not be very useful if they were not responsive.

Since the core of page building is the use of sections, rows, and columns, I think it is essential that the merge proposal version of Gutenberg contains usable Section (see #4900) and Columns blocks.

From a functionality perspective, the inability to have at least responsive columns would render the Columns block almost useless. If it is not responsive, it is almost never going to be used in practice. The Columns block needs at least responsive columns. For ideas on how to implement this in practice, take inspiration from how existing page builder plugins do it and how Bootstrap does it.

From a public relations perspective, Gutenberg would look like a ridiculously under-powered page builder to the average user if the Columns block was not at least decent enough to be used for responsive design. Gutenberg needs to make a good first impression when WordPress 5.0 launches, and I think a better Columns block is necessary for that. I can imagine blog posts appearing all over the internet talking about how incomplete the Gutenberg editor was for not including a decent Columns block in the 5.0 launch. It will be hard to get past all of that, because even when the Columns block is improved, people will still perceive Gutenberg as having been launched as a beta product.

Related Issues and/or PRs

4900

4902

[gziolo]

It needs some more work when there are 4-6 columns on wider screens, but for small and medium viewports it's quite good.

[shaunroselt]

Is there an easy way to make two columns display next to each other instead of underneath each other on Mobile?

Right now I honestly think the columns on Gutenberg sucks ass. The columns on other visual editors are a million times better.

[IvanPr]

The Wordpress 5.1 is out but this issue still remains...

[stuartcusackie]

If would be ideal if Gutenberg could make it easy to define breakpoints and gutters so it would fit well with other CSS frameworks.

Bootstrap have a nice implementation of flex columns and for the moment I am using this code to make my Gutenberg 5.1 columns behave like Bootstrap.

// Use negative margins to imitate BS rows
.wp-block-columns {
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.wp-block-column {

    // Use padding to imitate BS columns
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;

    // Override / reset gutenberg columns
    flex-basis: auto;
    flex-grow: 0;
    margin: 0 !important;
}

// Set up bs-style responsive behaviour for Gutenberg columns
// Columns only show on 'lg' screens (not very flexible)
@media (min-width: 992px) {
    .wp-block-columns.has-2-columns .wp-block-column {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

       // A custom class 'first-col-8' that can be added through the gutenberg editor for a two-thirds / one-third layout
    .wp-block-columns.has-2-columns.first-col-8 .wp-block-column:first-child {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.66666%;
        flex: 0 0 66.66666%;
        max-width: 66.66666%;
    }

    .wp-block-columns.has-2-columns.first-col-8 .wp-block-column:last-child {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }

    .wp-block-columns.has-3-columns .wp-block-column {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }

    // Add more column numbers...
}

[FayeDM]

I can't really figure this out. I have eliminated my child theme styles from this entirely. This is using the genesis theme seen here (and you'll note their demo does NOT do this) with a child theme (which I've disabled all styles for to show this).

This is a three column block with atomic block testimonials inside them (as is the genesis demo). Removing the testimonials and using paragraph content produces the same results.

Anyway, I'm pretty sure this is a bug for Gutenberg and not my styles, seeing how the styles being used in my example below are exclusively coming from wp-includes/css/dist/block-library/style.min.css?ver=5.1.1

SEE COLUMN BREAK