Global Styles: Allow themes to give all blocks a particular "Block Style" using theme.json

[scruffian]

What problem does this address?

Sometimes themes want to be able to set all instances of a block to use a particular block style.

What is your proposed solution?

We should make this possible to do via theme.json so that themes can opt in to block styles for all blocks.

I imagine the syntax to look something like this:

"core/tag-cloud": {
    "style": "style-slug"
}

[jasmussen]

Wouldn't this require updating every post?

[scruffian]

Wouldn't this require updating every post?

I think we'd have to change the way that block styles work, so that we have the styles stored in a data structure rather than in CSS.

[jasmussen]

One thing I'd like to see is styles becoming presets for design controls. For instance, a "large" style for a Quote block would remove the default left border, increase the padding all around, increase the font size, and apply an italic font. This would allow us to absorb most of what exists in current theme.scss files as block properties instead.

In that light, styles would be less of an attribute to a block, and more like a shortcut to a bundle of properties. Couldn't a theme then just apply those same properties for particular blocks?

[scruffian]

Yeah that sounds good.

[dabowman]

@annezazu pointed me here.

This sounds like it could solve something we're experiencing.

Type styles are the classic example of where we want to be able to use and manage block styles more easily. We don't want our users to be able to control individual style properties like font-size font-family or line-height but instead we want to offer them a list of combined style options that match our design system. Right now we're registering those as block styles and putting the styles in css where they reference the token variables from our theme.json.

Here's an example of one of our heading styles:

.heading-01 {
	font-family: var(--wp--preset--font-family--sans-serif);
	font-style: normal;
	font-weight: normal;
	font-size: var(--wp--custom--fs--3);
	line-height: var(--wp--custom--lh--2);
	letter-spacing: -0.01em;
	&-300 {
		@extend .heading-01;
		font-weight: 300;
	}
}

If we had the option to define this styles and manage it in theme.json instead of css, that could be nice.

In that light, styles would be less of an attribute to a block, and more like a shortcut to a bundle of properties.

this would be amazing if we could control what properties are editable after the style is applied. You'll notice in the above style we're extending it to add a lighter weight version. We do this with a lot of our styles (and it's pretty common practice in design systems) where there's a main style and then some small variants that override certain properties. We've been struggling with implementing this effectively in the block editor because if we do all these as block styles it turns into a lot and many of these variants aren't used very often.

I think our ideal state would be to be able to apply this main heading-01 style and have it preset the typography controls but only let the user further edit the parameters we've defined—in this case they could change the font weight from normal to 300 but they wouldn't be able to change any other properties. That would let us simplify the experience of choosing styles by nesting these little "sub-styles" within their parents in an intuitive way.

[mtias]

Closing this as contained in #7551