Repository navigation
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 closed) | 🚫 (#66433 closed) | - | 🚫 | 🚫 | - |
| 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)
Activity
aaronrobertshaw commentedon Sep 5, 2022
An overall update on progress towards design tools consistency has been added to the primary tracking issue, including our goals for WordPress 6.1.
t-hamano commentedon Aug 13, 2023
Update: I have added the Footnotes and Details blocks to the list.
aaronrobertshaw commentedon Jul 4, 2024
List item blocks have had color added via #59892
t-hamano commentedon Jul 28, 2024
Update: I have updated the table with the latest specs.
At the same time, I also added
headingandbuttoncolumns. I marked blocks that do not have those elements or blocks as children as ❌. Also, some blocks only supportheading, so it would be good to addbuttonsupport to them too.aaronrobertshaw commentedon Jul 29, 2024
Thanks for updating the issue @t-hamano 👍
I've added links for PRs that merged adding block supports over on the border tracking issue. Given there are so many revisions on this issue description it might help if you could add links to the merged PRs given your knowledge of what needing updating.
Also, the heading and button columns aren't using the right emoji. That one states the block has explicitly opts out of the support. Not that the block is ineligible. The typography tracking issue uses 🚫 to denote when a block won't be given a particular support. It also includes a section to explain those decisions.
I didn't spot any explicit opt-outs of those element colors, given they are opt-in by default, so I've switched the ❌ to 🚫 for the heading and button support columns and added a quick explanatory note.
Let me know if I've missed something.
t-hamano commentedon Dec 26, 2024
Update: Added the Query Total block to the list.
aaronrobertshaw commentedon Sep 8, 2026
Closing this out in favour of the parent issue, #43241.
These tables have not kept pace with the block library. 26 of the current 116 blocks have no row for them, including the Accordion, Tabs, Playlist and Terms Query blocks. Individual entries are out of date too, and keeping four hand maintained tables in sync has not worked.
I have audited all current 116 blocks (120 if you count the form block that just got removed) against every design tool, including the block supports these issues never covered: background, width/height/min-width, shadow, block gap, sticky position and duotone. Everything still outstanding is carried forward in #43241, along with the reason for each support that is deliberately not adopted.
The decisions recorded here were read into that audit and still stand unless it says otherwise, so nothing is lost by closing this.