Feature request: allow Columns block non-responsive option

[Sandstromer]

What problem does this address?

Currently the columns block will always go to a 50/50 layout at browser widths between 600px and 781px, and 100% at widths below 600px. This is regardless of the number of columns or customized column widths.

There will be instances where it is preferable to keep columns at their above 781px layout, even when viewed on narrower screens, so it would be great if the columns block could have an option to "turn off" the responsive layout.

What is your proposed solution?

Give the columns block something like a "not responsive" or "do not stack on mobile" toggle.

[Sandstromer]

In TT1-Blocks we have meta data in a columns block with date & author in the left column, and categories & tags right-aligned in the right column.

On smaller screens the columns are forced to 100% width by flex-basis: 100% !important.
IMHO this looks horrible especially as there is no way to make the right column switch to left-aligned when it is stacked.
This becomes even more apparent when a theme makes use of the flex-columns layout attribute of the query block. The columns are only resized based on the browser width, and not the width of each post in the query block columns, which can be similar widths on large screens and smaller devices, as the query block columns do resize based on the browser width.

The problem is that themes cannot overide this using a block style without removing and replacing the core columns-block stylesheet.

An idea would be to change the columns-block styling from this:

.wp-block-column {
  flex-basis: 100% !important;
}

...to something like this:

.wp-block-columns:not(.is-not-stacked) .wp-block-column {
  flex-basis: 100% !important;
}

This would be compatible with a toggle option to turn off the forced stacking, and would not break older columns layouts.

[kjellr]

I thought we had another issue filed for this, but I can't find one. In any case, I fully agree — the enforced one-and-two columns layouts on smaller screens really limit what's possible with block patterns. I'd love to see this one prioritized, as I imagine it's a relatively simple feature to implement.

[kjellr]

Here's another example of this being problematic:

One desktop, it makes sense for these footer columns to be side by side:

... and I'd prefer they stay that way on mobile when there's room. But instead, they stack automatically:

Here's a GIF to illustrate the issue as well. You can see the three-column layouts wrap into two-column layouts at the middle breakpoint:

[andrewserong]

I thought I'd have a go at this one. I've opened up a PR in #31816