Tracking: Color Design Tools Consistency #43245
Description
Overview
This issue details the current state of color block support or design tool adoption across all blocks and tasks required to fill any gaps. Overall design tool consistency efforts are being tracked via the parent issue: #43241.
Legend
| Value | Description |
|---|---|
| ✅ | Feature has been adopted and is displayed as a default control |
| ✅ (Optional) | Feature has been adopted but is an optional control |
| ⚠ | There is a bug or issue with this block support feature's adoption |
| ❌ | Feature has been explicitly opted out of |
| 🚫 | Block support will not be adopted for this block |
| <PR#> | Links to PR adopting the feature for this block |
| - | Feature has not explicitly been adopted/omitted |
| 🛠 | Implemented via an ad hoc / bespoke control |
| 🚧 | Work is in progress towards adopting this feature (no PR yet) |
Known Issues
Recently the Color gradient settings dropdown was refactored. Part of this update made controls show by default unless explicitly flagged as optional.
This goes against the way all other block support controls work, isn't documented as such, and is counter to the design goal for reducing all unnecessary clutter and controls from the sidebar. It does however assist consistency. This should be removed so the controls show by default as instructed via the block.json file. We can update blocks to make the default controls consistent and will be done in Phase 2 as outlined in #43241.
When we address potentially defining a consistent set of default controls per block support, the code linked wouldn't be required as it would be handled elsewhere.
Block Support Adoption
Note: Deprecated blocks have been omitted from this table. e.g. Comment Author Avatar, Post Comment & Text Columns.
| Block | Text | Background | Gradients | Link | Heading | Button | Duotone |
|---|---|---|---|---|---|---|---|
| Archives | ✅ | ✅ | ✅ | ✅ | 🚫 | 🚫 | - |
| Audio | - | - | - | - | 🚫 | 🚫 | - |
| Avatar | ❌ | ❌ | - | - | 🚫 | 🚫 | ✅ |
| Button | ✅ | ✅ | ✅ | - | 🚫 | 🚫 | - |
| Buttons | ❌ | ✅ | ✅ | ❌ | 🚫 | 🚫 | ❌ |
| Calendar | ✅ | [✅ | ✅ (Optional) | ✅ (Optional) | 🚫 | 🚫 | - |
| Categories | ✅ | ✅ | ✅ | ||||
| Code | ✅ | ✅ | ✅ | - | 🚫 | 🚫 | - |
| Column | ✅ | ✅ | ✅ | ⚠ ✅ (Optional) | ✅ (Optional) | ✅ (Optional) | - |
| Columns | ✅ | ✅ | ✅ | ⚠ ✅ (Optional) | ✅ (Optional) | ✅ (Optional) | - |
| Comment Author Name | ✅ | ✅ | ✅ | ✅ | 🚫 | 🚫 | - |
| Comment Content | ✅ | ✅ | ✅ | ⚠ ✅ (Optional) | - | - | - |
| Comment Date | ✅ | ✅ | ✅ | ✅ | 🚫 | 🚫 | - |
| Comment Edit Link | ❌ | ✅ | ✅ | ✅ | 🚫 | 🚫 | - |
| Comment Reply Link | ❌ | ✅ | ✅ | ✅ | 🚫 | 🚫 | - |
| Comment Template | - | - | - | - | - | - | - |
| Comments | ✅ | ✅ | ✅ | ✅ | ✅ (Optional) | - | - |
| Comments Pagination | ✅ | ✅ | ✅ | ✅ | 🚫 | 🚫 | - |
| Comments Pagination Next | ❌ | ✅ | ✅ | - | 🚫 | 🚫 | - |
| Comments Pagination Numbers | ❌ | ✅ | ✅ | - | 🚫 | 🚫 | - |
| Comments Pagination Previous | ❌ | ✅ | ✅ | - | 🚫 | 🚫 | - |
| Comments Title | ✅ | ✅ | ✅ | - | 🚫 | 🚫 | - |
| Cover | ✅ | ❌ | - | - | ✅ (Optional) | - | ✅ |
| Details | ✅ | ✅ | ✅ (Optional) | ✅ (Optional) | - | - | - |
| Embed | - | - | - | - | 🚫 | 🚫 | - |
| File | - | - | - | - | 🚫 | 🚫 | - |
| Footnotes | ✅ | ✅ (Optional) | - | ✅ | 🚫 | 🚫 | - |
| Gallery | ❌ | ✅ | - | - | 🚫 | 🚫 | - |
| Group | ✅ | ✅ | ✅ | ⚠ ✅ (Optional) | ✅ (Optional) | ✅ (Optional) | - |
| Heading | ✅ | ✅ | ✅ | ⚠ ✅ (Optional) | 🚫 | 🚫 | - |
| Home Link - Navigation | - | - | - | - | 🚫 | 🚫 | - |
| HTML | - | - | - | - | - | - | - |
| Image | ❌ | ❌ | - | - | 🚫 | 🚫 | ✅ |
| Latest Comments | ✅ | ✅ | ✅ | ✅ | 🚫 | 🚫 | - |
| Latest Posts | ✅ (Optional) | ✅ (Optional) | ✅ (Optional) | - | 🚫 | 🚫 | - |
| List | ✅ | ✅ | ✅ | ⚠ ✅ (Optional) | 🚫 | 🚫 | - |
| List Item | ✅ | ✅ | ⚠ ✅ (Optional) | ⚠ ✅ (Optional) | 🚫 | 🚫 | - |
| Login/logout | ❌ | ✅ | ✅ | ✅ (Optional) | 🚫 | 🚫 | - |
| Media & Text | ✅ | ✅ | ✅ | ⚠ ✅ (Optional) | ✅ (Optional) | - | - |
| More (Read More) | - | - | - | - | 🚫 | 🚫 | - |
| Navigation | ⚠ #42092 | ⚠ #42092 | ⚠ #42092 | - | - | - | - |
| Navigation Link | - | - | - | - | 🚫 | 🚫 | - |
| Navigation Submenu | - | - | - | - | 🚫 | 🚫 | - |
| Next Page (Page Break) | - | - | - | - | 🚫 | 🚫 | - |
| Page List | ✅ | ✅ | ✅ | ✅ | 🚫 | 🚫 | - |
| Paragraph | ✅ | ✅ | ✅ | ⚠ ✅ (Optional) | 🚫 | 🚫 | - |
| Post Author | ✅ | ✅ | ✅ | ⚠ ✅ (Optional) | 🚫 | 🚫 | ✅ |
| Post Author Biography | ✅ | ✅ | ✅ | ⚠ ✅ (Optional) | 🚫 | 🚫 | - |
| Post Author Name | ✅ | ✅ | ✅ | ✅ | 🚫 | 🚫 | - |
| Post Comments Count | ✅ | ✅ | ✅ | - | 🚫 | 🚫 | - |
| Post Comments Form | ✅ | ✅ | ✅ | ⚠ ✅ (Optional) | ✅ (Optional) | - | - |
| Post Comments Link | ❌ | ✅ | - | ✅ | 🚫 | 🚫 | - |
| Post Content | - | - | - | - | ✅ (Optional) | - | - |
| Post Date | ✅ | ✅ | ✅ | ✅ | 🚫 | 🚫 | - |
| Post Excerpt | ✅ | ✅ | ✅ | ✅ | - | - | - |
| Post Featured Image | ❌ | ❌ | - | - | 🚫 | 🚫 | ✅ |
| Post Navigation Link | - | - | - | ⚠ ✅ (Optional) | 🚫 | 🚫 | - |
| Post Template | - | - | - | - | - | - | - |
| Post Terms | ✅ | ✅ | ✅ | ✅ | 🚫 | 🚫 | - |
| Post Title | ✅ | ✅ | ✅ | ✅ | 🚫 | 🚫 | - |
| Preformatted | ✅ | ✅ | ✅ | - | 🚫 | 🚫 | - |
| Pullquote | ✅ | ✅ | ✅ | ⚠ ✅ (Optional) | 🚫 | 🚫 | - |
| Query | 🚫 | 🚫 | 🚫 | 🚫 | 🚫 | 🚫 | 🚫 |
| Query No Results | ⚠ ✅ (Optional) | ⚠ ✅ (Optional) | ✅ | ⚠ ✅ (Optional) | - | - | - |
| Query Pagination | ✅ | ✅ | ✅ | ✅ | 🚫 | 🚫 | - |
| Query Pagination Next | ❌ | ✅ | ✅ | - | 🚫 | 🚫 | - |
| Query Pagination Numbers | ❌ | ✅ | ✅ | - | 🚫 | 🚫 | - |
| Query Pagination Previous | ❌ | ✅ | ✅ | - | 🚫 | 🚫 | - |
| Query Title | ✅ | ✅ | ✅ | - | 🚫 | 🚫 | - |
| Quote | ✅ | ✅ | ✅ | ⚠ ✅ (Optional) | ✅ (Optional) | - | - |
| Read More | ✅ | ✅ | ✅ | - | 🚫 | 🚫 | - |
| RSS | ✅ | ✅ | ✅ | ✅ | 🚫 | 🚫 | - |
| Search | ✅ | ✅ | ✅ | - | - | - | - |
| Separator | ❌ | ✅ | ✅ | - | 🚫 | 🚫 | - |
| Site Logo | ❌ | ❌ | - | - | 🚫 | 🚫 | ✅ |
| Site Tagline | ✅ | ✅ | ✅ | - | 🚫 | 🚫 | - |
| Site Title | ✅ | ✅ | ✅ | ✅ | 🚫 | 🚫 | - |
| Social Link | #63782 | #63782 | #63782 | #63782 | 🚫 | 🚫 | - |
| Social Links | 🛠 | ✅ | ✅ (Optional) | 🛠 | 🚫 | 🚫 | - |
| Spacer | - | #66433 | #66433 | - | 🚫 | 🚫 | - |
| Table | ✅ | ✅ | ✅ | - | 🚫 | 🚫 | - |
| Table of Contents | ✅ | ✅ | ✅ | ✅ | 🚫 | 🚫 | 🚫 |
| Tag Cloud | #63592 | #63592 | #63592 | #63592 | 🚫 | 🚫 | - |
| Time To Read | ✅ | ✅ | ✅ | - | 🚫 | 🚫 | - |
| Term Description | ✅ | ✅ | - | ⚠ ✅ (Optional) | 🚫 | 🚫 | - |
| Verse | ✅ | ✅ | ✅ | ⚠ ✅ (Optional) | 🚫 | 🚫 | - |
| Video | - | - | - | - | 🚫 | 🚫 | - |
Merged PRs
The following list details all the PRs merged as part of this effort to increase color support.
- Gallery: add background color block supports #43294
- Table of contents block: add color block supports #43363
- Comment pagination numbers: add background color #43902
- Add color tools to time to read block #49496
- List Item: Add color support #59892
- Latest comments: Add color block support #63419
- Buttons: Add border, color, and padding block supports #63538
- Loginout : Add border and color block support #63550
- RSS: Added Colour support #66419
- Page List: Added color support #66430
- Post-content block header color support #67783
- Archives: Add Color Support #68685
- Categories: Add Color Support #68686
PRs with pending questions, discussions, or concerns
- Calendar Block: Add color supports and polish styles #42029 (formerly Calendar: add color block supports #43299 )
- Social links: add background color block supports #43293
- Table of contents block: add color block supports #43363 (comment)
Decisions
- Heading and Button element color support shouldn't be adopted for blocks that do not currently render heading or button elements. These have been marked using the 🚫 emoji within their respective columns above. This includes blocks that are actually themselves a heading or a button as the support styles inner elements only.
Possible Follow-Ups
- Specifying a block's color.link color in theme.json doesn't apply on the frontend. See: Table of contents block: add color block supports #43363 (comment)