Skip to content

Consolidate the style attributes of blocks #22700

Closed

Description

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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