Consolidate the style attributes of blocks

[oandregal]

We're exploring a solution that allows a block to declare a set of style attributes it supports, which are usually referred to as the style attributes of the block. The Block Editor uses this data to auto-generate InspectorControls for them, as well as enabling their use in experimental-theme.json.

A block would declare support for these style attributes via its block.json. See example from the paragraph block:

{
  "name": "core/paragraph",
  // ...
  "supports": {
    "__experimentalColor": true,
    "__experimentalLineHeight": true,
    "__experimentalFontSize": true,
  }
}

which means that the paragraph block has support for color, line-height, and font-size.

This master issue keeps track of this work.

Colors

Context	Text	Background	Gradient	Link
global #21032 #22722	✔️	✔️	✔️	✔️
core/button
core/columns #21038 #21375 #22722	✔️	✔️	✔️	✔️
core/cover
core/group #21021 #21375 #22722	✔️	✔️	✔️	✔️
core/heading #21039 #22722	✔️	✔️		✔️
core/list #21387
core/media-text #21169 #21375 #22722	✔️	✔️	✔️	✔️
core/paragraph #21037 #22722	✔️	✔️		✔️
core/post-author #21087	✔️	✔️	✔️	✔️
core/post-comments #21087	✔️	✔️	✔️	✔️
core/post-comments-count #21087	✔️	✔️	✔️
core/post-comments-form #21087	✔️	✔️	✔️	✔️
core/post-content #21087
core/post-date #21087	✔️	✔️	✔️
core/post-excerpt #21087	✔️	✔️	✔️	✔️
core/post-tags #21087	✔️	✔️	✔️	✔️
core/post-title #21087	✔️	✔️	✔️
core/pullquote
core/quote
core/site-tagline	✔️	✔️	✔️
core/site-title #21087	✔️	✔️	✔️

Typography

Context	Font Size	Font Family	Font Weight	Line Height
global #21030 #21028 #20773	✔️
core/columns
core/cover
core/group
core/heading #21215 #21431	✔️			✔️
core/list
core/media-text
core/paragraph #20775 #21153	✔️			✔️
core/post-author #21087	✔️			✔️
core/post-comments #21087	✔️			✔️
core/post-comments-count #21087	✔️			✔️
core/post-comments-form #21087	✔️			✔️
core/post-content #21087
core/post-date #21087	✔️			✔️
core/post-excerpt #21087	✔️			✔️
core/post-tags #21087	✔️			✔️
core/post-title #21087	✔️			✔️
core/pullquote
core/quote
core/site-tagline	✔️			✔️
core/site-title #21087	✔️			✔️

Spacing

Context	Margin	Padding
global #20771
core/columns
core/cover #21492		✔️
core/group #14747
core/heading
core/list
core/media-text
core/paragraph
core/post-author #21087
core/post-comments #21087
core/post-comments-count #21087
core/post-comments-form #21087
core/post-content #21087
core/post-date #21087
core/post-excerpt #21087
core/post-tags #21087
core/post-title #21087
core/pullquote
core/quote
core/site-title #21087
core/site-tagline

[jffng]

Thanks for opening this!

When you mark a block's style attribute ✔️in this issue, does that also mean that there's support for modifying those attributes via experimental-theme.json styles and features functions?

[oandregal]

Yes, that's the idea. Although I've realized that, as of today, background (gradients) & background-color (solid) are missing from experimental-theme.json. TLDR: I forgot to add them when we had that manual list hard-coded.

The good news is that I'm now working on #22698 which removes that manual list and pulls data directly from the blocks, which wasn't possible at the time, hence enabling backgrounds.

I've clarified the issue description.

[oandregal]

#22722 added support for link color the following blocks: paragraph, heading, columns, group, and media/text.

[oandregal]

Padding for cover has landed in #21492

[oandregal]

We've seen a lot of progress and the API was deemed stable for 5.6 (dev note upcoming), so I think we can close this tracking issue and open individual ones as we need them.

[strarsis]

Coming from a related issue, does this now allow to give pieces of text in a block (e.g. core/paragraph) an individual background color?