-
Notifications
You must be signed in to change notification settings - Fork 4.8k
Consolidate the style attributes of blocks #22700
Copy link
Copy link
Closed
Labels
Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.jsonAnything 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 experiTools 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.Questions 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.Tactical breakdown of efforts across the codebase and/or tied to Overview issues.
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 |
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.jsonAnything 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 experiTools 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.Questions 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.Tactical breakdown of efforts across the codebase and/or tied to Overview issues.
Type
Fields
Give feedbackNo fields configured for issues without a type.