Tracking: Color Design Tools Consistency

[aaronrobertshaw]

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	#63398	#63398	#63398	#63398	🚫	🚫	-
Audio	-	-	-	-	🚫	🚫	-
Avatar	❌	❌	-	-	🚫	🚫	✅
Button	✅	✅	✅	-	🚫	🚫	-
Buttons	❌	✅	✅	❌	🚫	🚫	❌
Calendar	✅	[✅	✅ (Optional)	✅ (Optional)	🚫	🚫	-
Categories	#63407	#63407	#63407	#63407	🚫	🚫	-
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	-	-	-	-	-	-	-
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	-	-	-	-	🚫	🚫	-
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

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)

[aaronrobertshaw]

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]

Update: I have added the Footnotes and Details blocks to the list.

[aaronrobertshaw]

List item blocks have had color added via #59892

[t-hamano]

Update: I have updated the table with the latest specs.

At the same time, I also added heading and button columns. I marked blocks that do not have those elements or blocks as children as ❌. Also, some blocks only support heading, so it would be good to add button support to them too.

[aaronrobertshaw]

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.

❌ | Feature has been explicitly opted out of

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.