Solvedgutenberg Support for Responsive Columns
✔️Accepted Answer
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%;
}
}
Other Answers:
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.
@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?
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.
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