Replace hardcoded breakpoint values with CSS custom properties for front-end styles

[cr0ybot]

What problem does this address?

The standard 600px hardcoded breakpoint for the core/columns block poses a not-insignificant problem for theme developers. We either have to work with that specific breakpoint, integrating it with our design system, completely remove core Gutenberg front-end styles, or otherwise hack around the CSS which no-one enjoys doing.

What is your proposed solution?

Issue #16911 has suggested using ems and/or providing a hook to change breakpoints, but I believe this is shortsighted. With the recent move to embracing CSS custom properties (CSS variables), I propose that the breakpoints used in front-end CSS be converted to custom properties.

If the front-end breakpoints were set as custom properties, it would not only be easy to override simply within a theme's styles, but it would even provide for an opportunity to alter that breakpoint based on context.

I realize this is a break with the effort to standardize breakpoints in the base-styles package. I think those values can still serve as default values, but the front-end styles should be more customizable without having to resort to bad hacks and workarounds.

Edit: This could also open the door for changing breakpoint values directly within theme.json.

[skorasaurus]

related previous discussion (#19460)

I too think this should be revisited.

[cr0ybot]

This may have been naive to propose without testing that this could work first. Apparently, CSS custom properties do not work in media queries (yet): https://bholmes.dev/blog/alternative-to-css-variable-media-queries/

The alternative might be to utilize container queries when those are ready, and drop global screen size media queries in front-end styles altogether.

[cr0ybot]

I'm closing this issue since the proposed solution is just not possible, but I'd really like to determine if there is a way for theme developers to alter that pesky 600px breakpoint. I could edit it with a new proposal but I think I'd like it to stay here for anyone else who had a similar thought. We'll need a different solution.