Columns Block: Disable the 50/50 view

[scruffian]

What problem does this address?

At "tablet" sizes, the columns block snaps to a 50/50 view:

(From the Stewart theme: Automattic/themes#4369)

When columns are used for structural elements of the page this is not always what we need. It is possible to disable this by turning off "stack on mobile", but that setting is still useful in these scenarios.

What is your proposed solution?

It would be good to have a block attribute which would disable this behaviour on the block. It needn't be surfaced in the UI.

[MaggieCabrera]

I think this issue uncovers the real problems of not having control over what happens on certain viewports. I know that themes can use CSS to achieve what the editor can't, but when it comes to designing the layout of the site this becomes a glaring issue. I can think of a few cases besides what this issue is explaining, for example, on a two-column layout for a site, with the sidebar being on the left, in most cases on mobile devices you want to have the sidebar to show AFTER the content on the right column, not before, even if the columns wrap correctly on all viewports.

@jasmussen @youknowriad what do you think? I suppose problems like these would be solved once the layout interface matures and offers more options like grid so we don't have to use the column blocks for the main layout of a site instead

[aristath]

Ideally we'd have a "minimum column width" control... I explored that option about 6 months ago (prototype code can be found on #33330) and it can work fine.
The idea would be that each column can have a minimum width, so we can say that a column can be a minimum of 30em, 500px etc. That can work in conjunction with the existing implementations, allowing columns to wrap when we need them to, and can be customized by the users to adapt to their content.
Note: This would also fall in line with @jasmussen's comment on #37436 (comment) about a future implementation of intrinsic sizing for columns 👍

[jasmussen]

I would echo Ari's thoughts: we should strive to simplify the block's responsive behavior to be smarter. If we do this right, potentially we can provide collapsing rules through the CSS that handle this directly. The examples shown in this codepen are a bit exploratory, but they do show how far we can go.

The added challenge here as Maggie outlines, is when you want the left sidebar to show up after the content of the right sidebar on mobile. I'm curious what's the best practice in plain HTML markup here, because it seems like both grid and order might present some accessibility challenges with regards to the DOM order. A good exercise might be to create the desired markup/layout in a codepen, and then discuss how we can make that happen in the block editor, whether through responsive enhancements to the Columns block, or whether it means revisiting the "Site" block with grid rules (#16998).

[andrewserong]

It looks like the removal of the 50/50 breakpoint was merged in #37436. @scruffian, does that mean we can close out this issue now?

[scruffian]

Yes I think so!