Responsive Global Styles

[johnstonphilip]

Problem to solve
A single global style will not work at all screen widths. For example, a really large font size might look great on desktop, but not look as great on mobile.

Example:

Describe the solution you'd like
I would like to see separate global-style controls for specific screen widths, similar to the concept of CSS Media Queries.

The technical side of this will likely need to fit with the Global Styles proposal:
#19611

I believe this should be something considered with "The Parts" as defined in #19611:

• Responsive Default theme styles
• Responsive Theme styles (e.g. Twenty Twenty)
• Responsive User styles
• Merged styles
• CSS Variable rendering

One approach to deal with this might be to make the value of the style an object, with each key being the max-screen-width where that value would be used. Something like this:

{
	"global": {
		"color": {
			"text": {
				"600px": "red",
				"1000px": "blue",
				"1500px": "green"
		}
	}
}

This would then have to be exposed somewhere in the UI when allowing user overrides. This probably fits best with the site block:
#16998

As far as how to display that in a UI, one possible idea is to allow the user to resize the viewport, similarly to how the Chrome Inspector does, with the controls auto-updating to affect only that screen-width and smaller. This allows people to see how it looks at a set width, fix it, and move on, without needing to see an "option" for the screen width, and instead making a simple "decision" instead (Decisions, not Options).

This is only one possible set of ideas to deal with this, and I am sure there are many "gotchas" I have not thought about, as this is not an easy problem to solve from a UI/UX perspective. Feedback welcome for sure! @ItsJonQ

[ItsJonQ]

@johnstonphilip Thanks for getting this issue started! You've provided a wonderful breakdown, which will be helpful as we consider the more difficult challenges of Global Styling 😅

One approach to deal with this might be to make the value of the style an object, with each key being the max-screen-width where that value would be used. Something like this:

That's a great approach. I've seen this strategy applied in various Sass implementation. A similar strategy would be to use Array values, like what's happening with Theme spec.

The tricky part is that without context of why, the values feel very cryptic. The Array values of Theme Spec feel super cryptic. Your Object example less so, as the px values provide some ideas.

This leads me nicely into another aspect of designing the Global Styling system.

The system's foundations have to work/render as expected. On top of that, the code used to customize/define these styles must feel intuitive + easy to write as well

🤗

[epiqueras]

The reason theme specs don't use this object form is that breakpoints are the same for every property. Having the numbers as keys to every responsive value for every responsive property would be pretty unnecessary data duplication and make it harder to change the breakpoints without changing the values.

[johnstonphilip]

@epiqueras Thanks for shedding some light on that. It looks like breakpoints are added in a breakpoints array in the Theme spec here.

To clarify my understanding from "Skipping breakpoints", adding a new breakpoint after-the-fact would require adding a new value to each propertty's breakpoints array, and essentially defaulting those to null. Is that correct?

For example, if my breakpoints array was this

{
  breakpoints: [
    '40em', '56em', '64em',
  ],
}

And my property's breakpoint settings were this:

width: [10%, 15%, '25%'],

But then I update my breakpoints array to have a new breakpoint after-the-fact like this:

{
  breakpoints: [
    '10em', '40em', '56em', '64em',
  ],
}

My property's breakpoint settings would need to be updated as well like this:

width: [null, 10%, 15%, '25%'],

Is that accurate?

[epiqueras]

Yes, but we could smoothly interpolate the missing value until the user fills it.

[skorasaurus]

overlap with #27107

[jordesign]

Closing this issue to be considered as a part of #13363

[sinanisler]

related to this issue
#55619

[hgeist2]

I feel like Gutenberg is doomed. I am sorry, i did not work on the wordpress core so far, so its easy to complain. Thx for all the hard work in advance.

That said, i think its horrible, how the answer to every proposal around device specific controls is "have a better design philosophy". What kind of clients do you work for? Their websites must be ridiculously small and they must be super nice.

I have clients that just want things to work in a certain way and i need these controls for it. Also browsers like safari for ipad, iphone have specific quirks that make it impossible to use some of the very advanced css for now.

A medium sized companies website feels like a big hack. I need a theme, i am forced to use some part of their block bundle and another one, because gutenberg is way too simple. And then i wrote 6000 lines of scss. What the hell man?

Apart from speed problems, because react is horribly slow (should be rebuilt with svelte), the lack of advanced, breakpoint specific controls is the main issue with Gutenberg.

Do you know which users are most important in the decision making / for approving PRs related to this?