Skip to content

Consolidate the style attributes of blocks #22700

@oandregal

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Feature] Design ToolsTools that impact the appearance of blocks both to expand the number of tools and improve the experi[Feature] ThemesQuestions or issues with incorporating or styling blocks in a theme.[Type] Tracking IssueTactical breakdown of efforts across the codebase and/or tied to Overview issues.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions