Why are there no media queries?

[scottfennell-toptal]

Hello,

I'm confused as to why the concept of media queries seems to be completely absent from Gutenberg. For example, although I have a UI to make a button red or blue, what if I want to make it red on small screens and blue on large screens?

[tresorama]

I'm new to Gutenberg, so take my words with skepticism. I speak for myself only, i'm not a maintainer.

The Gutenberg system includes the Editor (the UI) and theme.json (the source of truth of design tokens exposed in UI controls in the editor, and primary way to customize core "blocks" like paragraphs or groups).

In Gutenberg design there is the concept of intrinsic design.
For example, for responsive typography you can define in theme.json typography as fluid, by defining for every token a min , a max, and an ideal value, will use css clamp function behind the scenes.
For responsive spacing i have no idea.

If you try to build a website you will find that the for some "parts" you need to write custom code.
This code can be in form of custom blocks or custom CSS that override core blocks.

---

I understand the decision to go with intrinsic design because:

• exposing a mobile-tablet-desktop variant for every editor control will be too much for the not dev user, that is the main consumer of the Gutenberg system
• is not in plan i think that Gutenberg will be comparable to Webflow or Elementor.
• in the near future when css container queries will be wide supported by browsers, every core blocks can includes code that make the design responsive independent of where the block is rendered, without requiring control from the consumer of the Editor.

But until that point, and even after, i think that decision makers should consider adding responsive control for some usual design pattern that requires responsive difference.

An example is core/navigation where the width depends on the number of items the nav has, and only user will know at which min-width the nav can be rendered in desktop layout .