Global styles: add text styles to blocks

[karmatosed]

Being able to set to the font style on all the contents of a block and all instances of that block when in global styles, is useful. This opens up more granular control of everything on the block over having to select which is the current state.

I took some time to explore what that could look like and began with the paragraph block as that has a lot of text options already. It's worth noting, this is when in global styles for now. This work builds on the new UI explorations of @pablohoneyhoney, @jasmussen and @mtias - so credit goes there for taking this into the global styles work I have been doing.

This is a simple addition to the paragraph block, nothing major here or that different from what we have now.

VIewing in global styles

Version one shows just adding text styling dropdown to any place we have text, for example when viewing the paragraph block in global styles.

Moving further into the future with the ideas in font pairing, perhaps this could then come in where we show text and heading fonts - maybe even letting themes set these. This is further on work, the proposal in this issue is just to add a font style option.

Feedback

Right now, it would be great to explore if the time is right to bring this in or we wait. Beyond that general feedback would be great. I feel that having this as an option on these blocks makes sense for global styles:

• Button
• Paragraph (whilst I demonstrated the edge case of bolding all, likely this would be useful for weights)
• Heading
• Quote

Here are some points to spring into feedback from:

• What other blocks could benefit from this?
• Should it only be on global styles or in some blocks by default? For example, paragraph block could benefit from this perhaps.
• As different fonts have different text styles, do we have a baseline we offer?

[ZebulanStanphill]

With regard to heading styles, I think it is important to note that we should be targeting the HTML elements directly, rather than Heading blocks, since blocks can be made that include heading elements but don't use Heading blocks. The same idea applies for standard body/paragraph and quote styles.

I should also note that I think that the vast majority of typography settings should be global-only. Setting custom line height values on individual blocks is a very bad idea. It bloats the user interface with options that serve only to increase design inconsistency. If you feel the need to increase the line height on something, it is almost always something that needs to be handled at the site wide level.

[jasmussen]

Should it only be on global styles or in some blocks by default? For example, paragraph block could benefit from this perhaps.

For the time being we've approached Global Styles from the theme level and down to blocks, as this has made the most sense. But we keep thinking about how a variable that is theme-defined, can be first globally overridable, then page overridable, then block overridable; the idea being that themes have base control, but users have control on top of that, and can switch themes without losing that.

But this is a mouthful that has not only technical headaches, but user interface challenges as well, and although we have plenty of ideas for how it might work, how do we start?

Perhaps we go the other direction. Maybe we start with just the block itself. We take the exact same interface you sketched out here and apply it to the Paragraph block. The chief benefit is it lets us look at these improvements now, for existing blocks, and hopefully implement those features in a way that can later be commandeered by the page level. And then the site-global level. And then the theme level. Working outside in, in other words.

As different fonts have different text styles, do we have a baseline we offer?

For starters, this value is probably "unset", but the point would be that this value could be pre-set by the page, or the site, or the theme as you walk backwards through the hierarchy.

---

Quick question on "version one", it shows some blue borders, what are they meant to imply? I would imagine you never have to style the individual block level in the global style system.

Nice!

[karmatosed]

Quick question on "version one", it shows some blue borders, what are they meant to imply? I would imagine you never have to style the individual block level in the global style system.

A great question. The idea so far being explored is if you click an individual block it would highlight all in global styles and you then style all of that block. For example, all paragraph blocks. The menu then also changes to reflect those specific styling options.

Initially, we were going with the approach of not clicking anything, that could be stepped back if preferred, however, this prototype link might explain a bit more: #20367

Perhaps we go the other direction. Maybe we start with just the block itself. We take the exact same interface you sketched out here and apply it to the Paragraph block.

More than happy to do that.

[jasmussen]

A great question. The idea so far being explored is if you click an individual block it would highlight all in global styles and you then style all of that block. For example, all paragraph blocks. The menu then also changes to reflect those specific styling options.

Oh interesting.

So instead of showing a super duper long list of global properties, you'd trim it down to just the properties that impacted said block (type)?

I would say: hold that thought. It feels a decent vision of challenges ahead. But it's also a problem we don't know will be a problem. As we work "outside in", we might find the problem a non-issue. Or we might find that in order to best handle things like a site-wide font, it's best done with nothing selected so it's visible how it affects all blocks.

[karmatosed]

So instead of showing a super duper long list of global properties, you'd trim it down to just the properties that impacted said block (type)?

Yep :)

I would say: hold that thought. It feels a decent vision of challenges ahead. But it's also a problem we don't know will be a problem. As we work "outside in", we might find the problem a non-issue. Or we might find that in order to best handle things like a site-wide font, it's best done with nothing selected so it's visible how it affects all blocks.

I would argue seeing everything is a problem we don't need to maybe wait and see? What do you think happens with clicking, would nothing be clickable?

[jasmussen]

I would argue seeing everything is a problem we don't need to maybe wait and see? What do you think happens with clicking, would nothing be clickable?

It is entirely possible I'm wrong on this. To perhaps decompress my slightly vague comment — as we get closer to having actual global style properties to update, we might find either that the problem becomes immediately clear and a solution such as the one you've thought about becomes necessary. But we might also find that the list of global properties might not be long enough to warrant zooming in on individual blocks.

As I'm saying that, I'm aware that we're thinking of a huge list — button border radii, heading fonts, body fonts, line-heights, whether a quote block has a vertical line on the left or no including its color, separator colors, etc etc etc. It seems obvious we'd need to trim down that list. And if we do, yeah, highlight it as you have!

But we might also find that some properties can be bundled together — maybe changing the default accent color changes both the separator color and the blockquote border at the same time, needing only a single global control?

Hard to know at this point, is what I wanted to suggest.

[mtias]

Closing in favor of the "typography" tools section in #27331.