Gutenberg: Columns too narrow when viewed on mobile device preview, should revert to single column

[MogHughson]

Describe the bug
When using column blocks in the Gutenberg editor, when you preview on a mobile device they are too narrow and I would expect a reactive design to revert to a single column at that time.

To Reproduce
Steps to reproduce the behavior:

1. Add Block -> Layout elements -> Columns (Beta)
2. Type some text in each of the two columns so you can see them
3. Save
4. Preview using the new editor rather than the classic one so that you can ask for Phone preview.

Expected behavior
I expect two columns to revert to a single column when viewed on a mobile device as good reactive design practice.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser: Firefox
• Version: 62.0

Smartphone (please complete the following information):
Not in use - using the editor preview

Additional context

• Sorry, I don't see a version number for Gutenberg mentioned anywhere in my WordPress blog.

[GlennMartin1]

Yes, I strongly agree and wish this would be prioritized. I opened a similar issue https://github.com/WordPress/gutenberg/issues/9449 but it was closed in favor of other open issues that address a wider range of column issues. I understand that, but still wish this fix could be prioritized.

[mrleemon]

At this stage in GB development, it's a bit puzzling that the columns block is still so far behind compared to other blocks and it's not getting any attention.

[GlennMartin1]

@mrleemon Agreed. Not an exaggeration: having an excellent Columns block is a necessary component to make Gutenberg a success. I have eight sites that are depending on it.

The Column block is called "Beta" which can mean two different things:
(1) hopefully, the developers plan to do a lot of work on it prior to WP 5.0, or
(2) the developers are unsure if the Columns block will ship in the WP 5.0 release.

I anticipate a clear answer from the Gutenberg team on this.

[SolespireMarcus]

Expected behavior
I expect two columns to revert to a single column when viewed on a mobile device as good reactive design practice.

I agree, @MogHughson. If not via Columns block, then through another block I would suggest called Grid, that would allow for as many columns as possible to retroactively fall beneath one another as the screen size narrows. Having the option to define breakpoints in the editor settings for the block would be a nice touch too.

[mtias]

Thanks for the report. Consolidating in #6048.