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

[cr0ybot]

What problem does this address?

Hardcoded screen width media queries like the 600px 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 (even if we don't agree with pixel-based breakpoints #16911), completely remove core Gutenberg front-end styles, or otherwise hack around the CSS which no one enjoys doing. Some of these styles are particularly egregious to work around because they involve !important declarations to override inline styles.

What is your proposed solution?

I recently submitted a proposed solution using CSS custom properties #35808 and then immediately found out that this is not currently possible: https://bholmes.dev/blog/alternative-to-css-variable-media-queries/.

There is also no hook or other customization vector available to change the breakpoints. #19460

Regardless, I don't think that standard back-end breakpoints should cross over into front-end styles.

Instead, there are ways to write CSS for responsive layouts that do not rely on external breakpoints, but rather internal sizes. A good example is the "Switcher" layout from Every Layout. This approach, combined with some contextual CSS custom properties, would allow for easier manipulation of minimum-width of columns before they break into a single column, for example.

The challenge to overcome here is that this might not be a very backwards-compatible solution. Some themes out there in the wild are probably depending on hacky CSS workarounds to change the breakpoint of certain blocks, for example. However, I feel like this would be a more sustainable approach for future overrideability.

Here are the blocks I found that include hardcoded breakpoints:

1. columns
2. gallery
3. latest-posts
4. media-text
5. navigation
6. post-template
7. rss

This search URL should probably find all of them: https://github.com/search?q=%24break-small+repo%3AWordPress%2Fgutenberg++path%3A%2Fpackages%2Fblock-library%2F+filename%3Astyle.scss&type=Code&ref=advsearch&l=&l=

Other issues that have attempted to start conversations similar to this:

• CSS Grid for columns block #21190

Related PRs:

• WIP - Auto-wrapping columns (no breakpoints) #33330
• [WIP] Update Columns block to use CSS Grid, add option to adjust grid gap #32137
• Columns: Avoid using CSS variables for block gap styles #37436

[DeoThemes]

That's definitely an important feature. 600px is very small for mobile screens, most of the frameworks collapse at ~700-1000px. It makes navigation looks messy if there are many links, they simply don't fit.

[cr0ybot]

@DeoThemes I have found in general that columns not collapsing until <600px results in some pretty extreme content squashing for more than 2 columns.

I'd like to also point out that using px units in media queries is just all-around not great. Different browsers (particularly Safari) handle px value breakpoints at different sizes depending on browser zoom and user font size. See https://zellwk.com/blog/media-query-units/

[kraftner]

Related: #12299 including a possible workaround covered in #12299 (comment)

[palmsout]

@cr0ybot I agree. There's a real need for grid layouts in the query loop block, and elsewhere, to respond at user defined breakpoints, and especially a need for columns to reduce responsively with screen size (beyond just going from, for instance, 3 columns above 600px to 1 column under 600px). Query loop block needs the option to define at least a middle ground option between say 600 & 100opx, but ideally at user defined points.

[Azragh]

#16911 (comment)

[cr0ybot]

Comparing the browserlist config for this project against Caniuse flexbox-gap, it looks like we should be safe swapping the margin stuff that ends up getting a little too specific to easily override with gap.

It looks like this effort is already underway with the block gap feature having been merged in: #33991

However, the underlying spacing in columns and other places is still being accomplished via margins instead of the gap property, though it seems like it's understood that this is the next step. Is there some kind of theme support proposal to opt themes into using gap instead of margins? Obviously changing the styles so dramatically would likely break backwards compatibility.

UPDATE: The core columns block uses gap now! #37436

The part that worries me most is that a columns block that breaks without a breakpoint would probably need to have its columns' flex-basis based on absolute values instead of relative percentages as they are currently done. This is a big change to how the columns block works currently. However, if column widths were based on an absolute size, they would fit side-by-side until they don't anymore, without the need for a hardcoded breakpoint.

[cr0ybot]

Related: #12299 including a possible workaround covered in #12299 (comment)

I finally got around to reading your blog post linked in that comment: https://kraftner.com/en/blog/building-your-own-wordpress-core-block-css/

Completely replacing the core block stylesheet is a workaround, but you end up in a situation that is very fragile. As WordPress/Gutenberg update with new/updated blocks, the replacement stylesheet is stuck at the old version.

If it were possible to override individual block styles, I'd feel that is a more tenable solution. It looks like the should_load_separate_core_block_assets hook might provide a possible way forward for that? We should be able to override the stylesheet enqueue via the slug, though combined stylesheets are still loaded in the editor. I'm going to mess around with this to see if it's feasible.

[kraftner]

@cr0ybot I 100% agree that this is a terrible workaround which I'd love to get rid of. I see my blog post 50% as showing a workaround and 50% as an illustration of how terrible the current situation is and why it needs fixing. 😉

[LukaszJaro]

Also by using grid it would reduce the amount of CSS shipped most likely, especially if media queries were eliminated. I recently ran into issue trying to override the 600px media query and had to use !Important.

I still use flexbox for items but grid is best for container type of layouts like columns.

[chthonic-ds]

Completely replacing the core block stylesheet is a workaround, but you end up in a situation that is very fragile.

This is something I've experimented with since WP 5.0 was released and it's been a lot less fragile than I initially worried it would be.

If it were possible to override individual block styles, I'd feel that is a more tenable solution. It looks like the should_load_separate_core_block_assets hook might provide a possible way forward for that?

I've been using something as simple as the following to achieve this:

add_filter( 'should_load_separate_core_block_assets', '__return_true' );

function use_custom_styles() {
  $blocks = array(
    'columns',
  );

  foreach ( $blocks as $block) {
    wp_deregister_style( 'wp-block-' . $block );
    wp_register_style( 'wp-block-' . $block, 'path/to/custom/block.css' );
  }
}

add_action( 'wp_enqueue_scripts', 'use_custom_styles' );

[RatzeR]

For some blocks, for example the navigation block, it would be great, if it would be possible to change the breakpoint where the block uses the mobile / desktop navigation.
And as it seems to be the goal to have everything configurable, it should be possible to change the breakpoint via the block.json or theme.json file.