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

[cavalierlife]

I don't understand why #4902 was closed or why it is considered a customizer thing. I could see it being a customizer thing if the only concern was column widths for global theme layout, but I don't see why column width wouldn't be considered an editor thing as obviously the columns will be used within the post/page editor. In any case, I agree columns should be responsive. That's a must. But I also think column width is equal in importance, with both being VERY important.

[ZebulanStanphill]

@cavalierlife Actually, I think "Customizer focus" was referring to the customization phase of Gutenberg (which I think comes after the merge proposal and WordPress 5.0 release), not the WordPress Customizer, although that may end up being affected by the customization phase as well.

Personally, I would really prefer non-equal width columns to be added before the 5.0 release, and I think that those and responsive columns are related in terms of how they affect UI design and functionality, but if I had to pick just one of the two to be worked on and completed before the merge proposal, it would be responsive columns, because those are basically required for the columns to be useful in the majority of situations.

I could wait a while longer for non-equal width columns (understanding that they are in the works), but I am not so sure about everyone else, and I can imagine the lack of them might leave a bad impression and give them the feeling that Gutenberg is "so weak compared to other page builders" and that "the WordPress team does not understand what a page builder is used for". I get the big picture with where Gutenberg is going and what is planned for the future, but will the general user, designer, or developer understand that or even know about it? To many people right now, Gutenberg just looks like half an attempt at a page builder, but seemingly lacking most features that people expect from a page builder plugin.

Of course, the long term plan for Gutenberg, if successful, will end up creating a common API that all page builders can use as a backend, turning most of them into essentially alternative UIs for a common website builder system that replaces widgets, shortcodes, "modules" (or whatever each page builder calls them), and some metaboxes (the other metaboxes would be replaced by the custom sidebar APIs) with a common element (blocks) and removes the need for manually creating PHP template files in most situations by allowing page template layouts including sidebars, footers, and other non-post-content areas to be built using Gutenberg.

But I only know about that from doing a lot of research on this GitHub and reading lots of articles about Gutenberg. Most people will not spend that much time looking into it, and will just hear about "a page builder in WordPress core" and think that is all there is to it. They will expect features that are standard for page builder plugins to be present in the version of Gutenberg that is shipped in WordPress 5.0.

If non-equal width columns do not make it into 5.0, I think it would help a lot if the post-update welcome screen mentioned that they (along with various other features) were being worked on for a future update. It might give people the impression that Gutenberg was launched too early (and I can not say I would disagree with them), but it would certainly be better than not making it obvious that the features were planned at all.

@karmatosed Could we get a clarification on what you were referring to in #4902?

[chrisvanpatten]

Variable-width columns are going to be a big part of a client project we're working on (to enable customisable homepage layouts), and my hope is that this is an area where our team can contribute back to Gutenberg and get this included in prior to the merge proposal (or shortly thereafter).

[rchipka]

Rather than adding responsive settings to the Columns block, we should consider adding a "Responsive" block around the Columns block.

[melchoyce]

Related, with some existing discussion: #5351

[ZebulanStanphill]

Related: #7414.

[designsimply]

Closed #7742 as a duplicate and noting the question from that issue for reference because it's relevant to this discussion:

How can I convert multiple column content to 1 column in Mobile view? It looks very weird when I add 4 columns in content & they show side by side even in mobile.

[designsimply]

Closed #7315 as a duplicate and wanted to include their comment here as well:

It's not currently possible to resize the columns in the columns block. The ability to have columns is imperative for providing more flexible layouts. If you can only add equal width columns though, it makes it extremely limiting.

Ideally, you should be able to specify a percentage width for each column. At a bare minimum though, you should at least be able to select a different layout.

[rickcurran]

Yep, agree with both of those comments above. It shows however that there's quite a lot of combinations possible when it comes to media queries / break points for responsive layouts. There isn't going to be a one-size-fits-all solution but I think there would need to be default Columns block specific behaviour. I'd probably suggest that multiple columns should all wrap to a single column somewhere between 640px - 480px wide. Personally I usually go for < 640px but that can be a bit wide for a single column in some situations. Additionally for a four-column layout these would often break to two-by-two rows on medium size screens so again there are a lot of potential options here.

It would be challenging to build a UI to choose from all of the possible combinations but I think you'd need to pick some of the most common options and leave the more complex options to be possible via custom classes on the parent and / or child columns, or extending the column block itself.

For my own usage of the Columns block I'd be looking to override the standard WP classes on them to use my own preferred column layout classes, most commonly for me would be those used in the Foundation framework, so 'row' classes on the parent and 'columns' classes along with column sizing classes such as 'small-12', 'medium-6', 'large-8' etc on the child columns. This would be doable via custom classes on the parent and child columns, but it would be essential to have a default way to override these for all Columns blocks without having to set these each time, basically just globally overriding the names of the standard WP Columns block classes.

[lkraav]

Based on working for years with shortcode-based column implementations, my current conclusion is that each column must have its own configuration/classes to be available when needed.

Frameworks like https://purecss.io/grids/ (not to mention Bootstrap etc) have provided the general grid architecture and surfaced the related issues for a long time.

Ideally, Gutenberg would be able to toggle between device modes, like Customizer has today, and the block-based content "wireframe" (since Gutenberg will fail to be a polished page builder for a while) should be able to render itself for a quick preliminary human-eye cross-device QA. Final QA would have to still go through frontend Preview function, until real page building / frontend content editing becomes a reality for Gutenberg.

[mtias]

Apart from expanding on the controls, I think a good first step could be to default to stacked columns on mobile, and maybe add a toggle option to the inspector to disable that behaviour.

[lkraav]

Apart from expanding on the controls, I think a good first step could be to default to stacked columns on mobile, and maybe add a toggle option to the inspector to disable that behaviour.

Defining 3 width categories is usually the minimum, or you will get massively white-space heavy wide stacked blocks too often (because columns often already fail to fit on portrait tablets, so the stacking breakpoint needs to generous).

There are also cases where you need to display something in 2 columns even on mobiles.

This is really a framework level challenge, hardcoding some opinionated rules will not get far.

Pretty much anything is good as the first iteration step, though.

[ZebulanStanphill]

Yeah, getting responsive styles with columns done right is a tricky thing to accomplish, but at this point a hardcoded responsiveness (with a toggle to turn it off) would be better than what exists right now. Divi actually has hardcoded breakpoints and no way to customize them (without using custom CSS, of course), and yet a lot of people are pretty happy with it, so I think Gutenberg can get away with hardcoded breakpoints as well for now. Obviously a more flexible solution should be worked on for the future, but I doubt such a thing would make it into WordPress 5.0 at this point.

Just make sure to choose good default breakpoints (check out what page builder plugins do by default for some existing examples). I would recommend at least 3 breakpoints (phone, tablet, and desktop) to start off with.

Also, I recommend checking out how Oxygen uses a CSS flex-based layout system and exposes the settings in a really nice way. I think perhaps in the future a flex-layout block could be something that could work as an alternative to the Columns block.

https://oxygenbuilder.com/documentation/visual-editing/layout-spacing/
https://oxygenbuilder.com/documentation/visual-editing/responsive-controls/

[rickcurran]

@SuperGeniusZeb The most recent 3.2 update changed the columns block to use Flexbox instead of the original css grid method.

For my own usage I'd need a way to specify specific break points and also to be able to set custom classes for the columns block in order for it to be usable in my own projects.

I realise that my needs are probably beyond what is feasible in the short term, but column blocks are such a key feature of what makes Gutenberg attractive it has so far been a a frustrating experience personally trying to work with them.

The core Columns block as it stands isn't capable enough so I've been trying to write my own column-based blocks but with limited success so far, part of the challenge being that I want to use the Foundation framework for the layout classes but it's proving very difficult to use these on the admin side due to clashes with the various extra "editor-block-..." markup that exists there.

I'd expect that adding responsiveness to the existing Columns block with options like different sized columns etc would encounter some of the same issues I've experienced in attempting to write my own block.

[ZebulanStanphill]

@rickcurran I know the Columns block was updated to use Flexbox. I was thinking more along the lines of a block that did not use columns and instead laid out its items depending on its Flexbox settings, reducing the need for columns in the first place, while still allowing them through the use of a generic Container block (perhaps like the one described in the later comments in #4900) to group other blocks.

It is hard to explain; just check out what Oxygen does. It is really neat, and uses a lot less <div>s and feels a lot cleaner than the traditional Section→Columns→Column layout system that nearly everything else uses.

[rickcurran]

@SuperGeniusZeb Ah ok, I see what you mean. That sounds like something that would be suited to CSS Grid style layout methodology. For my part I'd need specific columns as containers for the content in the layouts I'm building so the approach you're looking at doesn't seem like it would work for me.

I'm going to need to persevere with my own column block I think as I don't think the core Columns block is going to work well enough for my needs, for a while at least anyway.

[ZebulanStanphill]

@rickcurran Actually, you can still have individual columns as containers themselves with what Oxygen does. It is simply optional. Check out the video to see how it all works:

https://www.youtube.com/watch?v=NnSfR-YFcQI

I think the Container block described in the later comments of #4900 could have the stack horizontal/vertical and alignment options that the Oxygen Section/Div elements have, and the Columns block could be used in addition to those to provide a full range of layout options. Maybe the Column blocks nested in the Columns block could even end up being replaced by the same Container block used for sections and generic <div>s, though I think that depends on how certain things are implemented in the Columns block.

[kadencewp]

I appreciated the discussion here, I am very interested in what core ends up with for columns. I used part of the mockup design from @karmatosed when implementing a row layout block https://wordpress.org/plugins/kadence-blocks/ perhaps not a perfect solution yet but something I thought might interest those as a block to test with that includes some responsive options for columns.

[maddisondesigns]

Just adding my 2 cents... In my own theme I simply add a media query and then set each column (.wp-block-columns) to display:block. Benefit being that it keeps all the columns a consistent size rather than having some wrap and some not wrapping.

@media only screen and (max-width: 767px) {
	.wp-block-columns {
		display: block;
	}
	.has-2-columns .wp-block-column,
	.has-3-columns .wp-block-column,
	.has-4-columns .wp-block-column,
	.has-5-columns .wp-block-column,
	.has-6-columns .wp-block-column {
		width: 100%;
	}
}

Vid: https://cl.ly/16b4d0ae58b5

[lkraav]

I'd be looking out for adopting an established UI kit / grid framework. Rolling yet another new one is probably not what the world needs.

[Chris2011]

As I understand it right, was is correct, that the columns where implemented as css-grid and now with flex-box? It's kind of off-topic but css-grid has the appearance to make it responsive out of the box afaik. Why was it changed? I tried gutenberg in version 2.* and the rendered HTML was using css4-grid for the columns. What was the decission to change it?

[andonette]

i know it's mildly hacky but this helps: edit for widths as you see fit
.wp-block-gallery .blocks-gallery-item { @media screen and (max-width: 600px) { width: calc(100% / 1 - 16px); } }

[imagelucidity]

Just adding my 2 cents... In my own theme I simply add a media query and then set each column (.wp-block-columns) to display:block. Benefit being that it keeps all the columns a consistent size rather than having some wrap and some not wrapping.

@media only screen and (max-width: 767px) {
	.wp-block-columns {
		display: block;
	}
	.has-2-columns .wp-block-column,
	.has-3-columns .wp-block-column,
	.has-4-columns .wp-block-column,
	.has-5-columns .wp-block-column,
	.has-6-columns .wp-block-column {
		width: 100%;
	}
}

Vid: https://cl.ly/16b4d0ae58b5

I used this method and it worked well for equal 2 column grid to become mobile responsive. I only specified display block and everything looks ok so far.

@media (max-width: 1140px) {
.wp-block-columns {
display: block;
}
}

[rafafields]

Hello there!

I have created a simple displaygrid column system using block classes in pure SCSS. I added few settings options in SCSS variables (just imagine them as block backend settings panel .)

Also, I added a secondary breakpoint where the number of columns become the half (only for even numbers). What do you guys think about this?

I hope it can help anyone :)

//Settings

$column-support: 12;
$breakpoint-lg: 1200px;
$breakpoint-md: 992px;
$vertical-alignment: center;
$gap: 2rem; 

//Column Block

.wp-block-columns{
    display: grid;
    column-gap: $gap;
    row-gap: $gap;
    align-items: $vertical-alignment;
}

// The grid

@for $i from 2 through $column-support{
    
    .wp-block-columns.has-#{$i}-columns{
      
        // Check if $i is even
        @if($i % 2 == 0){
          // Create a medium breakpoint grid only for even numbers of columns
          @media (min-width: $breakpoint-md){
            grid-template-columns: repeat( $i / 2, 1fr);
          }

        }
        // Main breakpoint for large screens
        @media (min-width: $breakpoint-lg){
            grid-template-columns: repeat( $i, 1fr);
        }
    }
}

Source: https://codepen.io/Rafafields/pen/QZwpyN

[lkraav]

Following up on #6048 (comment) I'd recommend peeking at http://demo.kadencethemes.com/kadence-blocks/ for an impressive Gutenberg page building experience implementation all around, including columns cc @kadencethemes

[xy0]

@rafafields
It works for me right out of the box, thanks!

[ZebulanStanphill]

🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉

[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