Solvedgutenberg Support for Responsive Columns

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

33 Answers

βœ”οΈ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%;
	}
}

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

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.

Related Issues:

179
gutenberg Can't NPM Install: ENOENT: no such file or directory .staging/core-js-c2a9e69c (solved with rm -rf node_modules && npm install)
Delete package-lock.json and run npm install Hey @mintplugins which version of node and npm do you u...
78
gutenberg What is the proposed way to update blocks?
I am facing the same issue and absolutely agree with Fabian on this What if the frontend switches to...
49
gutenberg Are iframes a viable long-term solution for meta boxes?
Do all metaboxes have to work on mobile? Yes why wouldn't they? What are the cases (if any) that wou...
38
gutenberg Supporting Metaboxes
I also want to emphasize that many plugins use custom post types that rely on meta boxes without a c...
36
gutenberg Block API: Server-side awareness of block types
@aduth thanks for creating this ticket and CCing me! there is still a lack of general understanding ...
31
gutenberg Immediate crash of editor upon opening new post page (solved by updating nginx config)
Fixed tldr: if you run Nginx you might need to update your nginx config I have the same problem With...
25
gutenberg Gutenberg breaks completely if site URL is not the same as wordpress URL
Here's what I did to make it work (I only have 1 site): Issue Overview I have wordpress installed on...
23
gutenberg The editor has encountered an unexpected error. (solved by updating the try_files nginx configuration)
Just to confirm the following worked for me: try_files $uri $uri/ /index.php$is_args$args; @Zenexer ...
21
gutenberg Block Transforms should be more discoverable/obvious
I'd like to propose an alternative as I think there is already an over-reliance on iconography in Gu...
20
gutenberg Can't style embedded videos properly due to inline width & height
Here's basic front-end css: You are welcome. Describe the bug There's numerous issues open that disc...
16
gutenberg Is it possible to disable default block styles?
Removing works fine for me with the following example: This script is enqueued via wp_enqueue_script...
16
gutenberg Introduce concept of block templates for full site editing
Since we already did some Full Site Editing work on WordPress.com I’ll try to convey some of the thi...
16
gutenberg Allow multiple InnerBlocks per block
Imagine something simple as this example... Currently InnerBlocks can only be rendered once into any...
14
gutenberg Event or callback after block loaded on editor
I was also looking for the same options but could not find any solutions anywhere It seems like no e...
13
gutenberg @wordpress/env: A zero-config, self contained local WordPress environment for development and testing.
We've iterated a lot on @wordpress/env these past few weeks and I think we're now at the point where...
13
gutenberg Classic + Custom HTML blocks: Convert to Blocks removes valid inline formatting
@ZebulanStanphill @danielbachhuber F.Y.I I tried some fix phrasingContentReducer for ruby tag Now it...
12
gutenberg Metaboxes overlap Gutenberg in Chrome 77
Confirmed that the CSS solution worked for us I dropped this into our theme, ~~ Added by @nerrad ~~ ...
12
gutenberg Improve behaviour when saving content while offline
It would indeed be a great improvement to show a warning when offline and to store the changes in lo...
11
gutenberg How to replace the Document Settings panels or controls?
@jonathanstegall The removeEditorPanel() method only supports the removal of 5 built-in meta boxes: ...
9
gutenberg Support for Responsive Columns
Just adding my 2 cents.. In my own theme I simply add a media query and then set each column (.wp-bl...
7
gutenberg How to add blocks is not obvious enough and only getting worse.
Please I'm submitting this issue because I think that issue #5074 doesn't quite go far enough in out...
7
gutenberg My Parent Pages Are Still Missing In Gutenberg
I started work on implementing an accessible-autocomplete for sites with a large number of pages in ...
6
gutenberg How to server render block with nested blocks?
Hey sorry all for the delay but it is possible to have an InnerBlocks and render your block on the s...
3
gutenberg Dynamic reusable blocks: technical details
I might be missing a piece of this puzzle so apologies for wading into this late! The above REST spe...
139
ddev In WSL2 ddev start fails at docker-credential-desktop.exe, "error listing credentials"
I had to set credsStore: in my ~/.docker/config.json .. it was previously set to credentials.exe ...
41
woocommerce The Header Mini Cart does not update after a product is removed
Here is my fix EXPLANATION OF THE ISSUE After removing a product on the Shopping cart page /cart/ ...
39
FoundationPress Missing modules when running npm run build or npm install
The error in the original post is from running npm run build Hi I am working on a foundation press p...
34
woocommerce Rethinking 3.6's Dashboard Ads (#22857 )
​It appears what you're doing here is tracking usage reporting that back to your API and returning t...
31
FoundationPress After Node update, Issue running npm run production
Try this: npm uninstall gulp --save Then once that is complete run: npm install then: npm run build ...
24
lando Unhandled rejection Error: problem parsing null.tooling.cache. Ensure it is valid JSON!
Hi I had the same issue just now and apparently I only missed adding the name on my .lando.yml file ...
20
wp graphql Get Single Nodes (posts, terms, users, etc) by more than ID
The next release I'm working on (#1086) addresses this (the ability to fetch single nodes by various...
16
lando lando does not start
On ubuntu 16.04 docker rm landoproxyhyperion5000gandalfedition_proxy_1 helped me to ged rid of this ...
16
sage Sage 9.0.10 - postcss.config.js not working
To anyone else hung up on this I found a workaround My version of this issue was not font related bu...
16
woocommerce Negative amount as fee and tax calculation in checkout
If someone is still looking for an answer here is mine It works like a charm Describe the bug I have...
15
wp calypso Editor: Permission Errors when trying to Update/Publish Post/Pages
The fix has been deployed today to wpcom as D57128 after the first attempt had to be reverted due to...
15
lando Permissions issue with Docker
I also ran into this on: macOS 11.1 (Big Sur) Lando v3.0.25 I fixed with sudo chown -R username /Use...
14
acf to rest api How to get ACF post object field with ACF fields
Hi @travis-zookacreative Thanks for using my plugin bellow I wrote an example most generic V3 V2 Fun...
14
lando Unable to 'lando pull' pantheon site
This worked for me: lando terminus auth:login --machine-token=ABCDEFGHIJKLMNOPQRSTUVQXYZ (don't stea...
13
lando Please add Docs for Drupal's "Drush" CLI Command Debugging via XDebug
This is what worked for me: Then turning on Listen for PHP Debug Connections in PHPStorm and calling...
11
lando mysql stop connecting after lando restart
I think I found a solution I had same issue multiple times and I was forced to completely uninstall ...
11
woocommerce Attributes lost all parents
Hi @ABCPortugal like Claudio wrote you need to use the filter woocommerce_taxonomy_args_{$name} for ...
8
lando Support Xdebug 3
This worked for me PHPStorm 2020.3 drupal9 Xdebug 3 is out and comes with a lot of performance optim...
8
wp graphql How to create query/mutation for custom table in WP
WPGraphQL can work with any data source It's optimized to work with WordPress core data (Posts Terms...
7
woocommerce PayPal Intermittent Transaction cancelled or Internal server error on guest checkout
Thanks @mikejolley EXPLANATION OF THE ISSUE Using WooCommerce 3.0.5 and guest checkout ...
6
woocommerce product slider not working for rtl on woocommerce update
all you need to do is just set direction for gallery wrapper to rtl EXPLANATION OF THE ISSUE I updat...
5
jetpack Jetpack JSON API access crashes PHP-FPM running PHP 7.1
The Jetpack people noticed me about the freshly baked 5.3 update today: https://jetpack.com/2017/09/...
5
acf to rest api Apply same post format as WP JSON if ACF return format is Post Object
Allright thanks! The ticket on core is picked up and it will be fixed in WP 4.9.5 For the people who...
5
ddev Create a service configuration for varnish
Hi this is how we are doing this at wegewerk: What happened (or feature request): Edit: @stborchert ...
4
wp calypso Calypso: Deep links redirecting
This is a real bug and it's probably been around for some time Not a recent regression ...