Specification Change for Column Block Breakpoints

[nendeb]

What problem does this address?

In the Column Block, the breakpoint for becoming a single column has been fixed at 781px using CSS media for some time now. Consequently, when placing a Column Block inside another Column Block, the visual appearance becomes challenging due to the narrow display width at the media breakpoint of 781px.

For instance, when using a Column Block to set up a sidebar (2 columns) in a block template, the content width becomes narrow. As a result, when using a Column Block in the content area, one is forced to design with a width that accounts for the sidebar's space, which is a minimum of 782px, restricting design layout possibilities.

Therefore, I propose a specification change for the Column Block breakpoints.

What is your proposed solution?

Here are a couple of potential approaches:

1. Use container instead of media.
   Breakpoints will occur based on the actual width of the Column Block, regardless of its placement.

2. Allow setting breakpoint values for each Column Block.
   Introduce a TextControl in InspectorControls to set breakpoint values for each Column Block.

There may be other viable approaches as well.

It's important to consider that this change will have implications for themes and block patterns.

Reference Current CSS code

Gutenberg 17.0.2
gutenberg/build/block-library/blocks/columns/style.css
gutenberg/build/block-library/style.css

WordPress 6.4.1
wp-includes/blocks/columns/style.css
wp-includes/css/dist/block-library/style.css

@media (min-width:782px){
  .wp-block-columns{
    flex-wrap:nowrap !important;
  }
}
@media (max-width:781px){
  .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column{
    flex-basis:100% !important;
  }
}
@media (min-width:782px){
  .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column{
    flex-basis:0;
    flex-grow:1;
  }
}

Related Issues

There were related issues and PRs in the past, but they seem to have stopped.

Replace hardcoded breakpoints in front-end CSS with more modular CSS #35848

CSS Grid for columns block #21190

Can the breakpoint value be changed? #19460

Columns Block: Improve readability on smaller screens #30480

[WIP] Update Columns block to use CSS Grid, add option to adjust grid gap #32137

Example

Captured at 782px screen width
When displayed at 781px, the display breaks and all column blocks are displayed in a single column.

Upper:Column block (3 columns) in place
Bottom row:Column block (3 columns) inside column block (2 columns)