Block support: Color
This document is part of the WordPress block reference and is intended for developers.
Block supports are a set of options that enables or disables block controls in the editor. Block supports are added to the block’s block.json file during block development (Not to be confused with theme.json which is used in theme development).
Last updated January 27, 2023.
Background
Background color is supported by all WordPress blocks by default, but there are a few blocks that disable it, for example the avatar block.
To disable it, set the value of supports > color > background to false:
"supports": {
"color": {
"background": false
}
}
List all WordPress core blocks with background color support:
-
Audio
-
Button
-
Buttons
-
Classic
-
Code
-
Column
-
Columns
-
Comment Author Name
-
Comment Content
-
Comment Date
-
Comment Edit Link
-
Comment Reply Link
-
Comment Template
-
Comments
-
Comments Next Page
-
Comments Page Numbers
-
Comments Pagination
-
Comments Previous Page
-
Comments Title
-
Custom Link
-
Gallery
-
Group
-
Heading
-
Home Link
-
List
-
List item
-
Login/out
-
Media & Text
-
Next Page
-
No results
-
Page Numbers
-
Pagination
-
Paragraph
-
Post Author Biography
-
Post Author Name
-
Post Comments Count
-
Post Comments Form
-
Post Comments Link
-
Post Content
-
Post Date
-
Post Excerpt
-
Post Navigation Link
-
Post Template
-
Post Terms
-
Post Title
-
Preformatted
-
Previous Page
-
Pullquote
-
Query Loop
-
Query Title
-
Quote
-
Read More
-
Separator
-
Site Tagline
-
Site Title
-
Spacer
-
Submenu
-
Table
-
Template Part
-
Term Description
-
Verse
-
Video
Text
Just like the background color, text color is supported by all WordPress blocks by default.
But there are a few blocks that disable it; blocks that have no text or only have linked text strings. For example the comment edit and comment reply links.
To disable it, set the value of supports > color > text to false:
"supports": {
"color": {
"text": false
}
}
List all WordPress core blocks with text color support:
-
Audio
-
Button
-
Buttons
-
Classic
-
Code
-
Column
-
Columns
-
Comment Author Name
-
Comment Content
-
Comment Date
-
Comment Template
-
Comments
-
Comments Pagination
-
Comments Title
-
Custom Link
-
Group
-
Heading
-
Home Link
-
List
-
List item
-
Login/out
-
Media & Text
-
No results
-
Pagination
-
Paragraph
-
Post Author Biography
-
Post Author Name
-
Post Comments Count
-
Post Comments Form
-
Post Content
-
Post Date
-
Post Excerpt
-
Post Navigation Link
-
Post Template
-
Post Terms
-
Post Title
-
Preformatted
-
Pullquote
-
Query Loop
-
Query Title
-
Quote
-
Read More
-
Site Tagline
-
Site Title
-
Spacer
-
Submenu
-
Table
-
Template Part
-
Term Description
-
Verse
-
Video
Link
The link color is opt-in. 35 core blocks supports link colors.
For the link color to be available to users, you also need to enable link colors in theme.json.
At the time of writing this, link colors are not supported in classic themes without theme.json.
To enable the link color block setting, set the value of supports > color > link to true:
"supports": {
"color": {
"link": true
}
}
List all WordPress core blocks with link color support:
-
Column
-
Columns
-
Comment Author Name
-
Comment Content
-
Comment Date
-
Comment Edit Link
-
Comment Reply Link
-
Comments
-
Comments Pagination
-
Group
-
Heading
-
List
-
Media & Text
-
No results
-
Pagination
-
Paragraph
-
Post Author Biography
-
Post Author Name
-
Post Comments Form
-
Post Comments Link
-
Post Date
-
Post Excerpt
-
Post Navigation Link
-
Post Template
-
Post Terms
-
Post Title
-
Pullquote
-
Quote
-
Site Title
-
Term Description
-
Verse
Gradients
Gradients are opt-in. To enable the gradients, set the value of supports > color > gradients to true:
"supports": {
"color": {
"gradients": true
}
}
List all WordPress core blocks with gradient color support:
-
Button
-
Code
-
Column
-
Columns
-
Comment Author Name
-
Comment Content
-
Comment Date
-
Comment Edit Link
-
Comment Reply Link
-
Comments
-
Comments Next Page
-
Comments Page Numbers
-
Comments Pagination
-
Comments Previous Page
-
Comments Title
-
Gallery
-
Group
-
Heading
-
List
-
Media & Text
-
Next Page
-
No results
-
Page Numbers
-
Pagination
-
Paragraph
-
Post Author Biography
-
Post Author Name
-
Post Comments Count
-
Post Comments Form
-
Post Date
-
Post Excerpt
-
Post Template
-
Post Terms
-
Post Title
-
Preformatted
-
Previous Page
-
Pullquote
-
Query Title
-
Quote
-
Read More
-
Separator
-
Site Tagline
-
Site Title
-
Table
-
Verse
Default controls
In the same supports
section you can use __experimentalDefaultControls
to choose if a control should show by default inside the color panel:
"supports": {
"color": {
"__experimentalDefaultControls": {
"background": true,
"text": true,
"link": true
}
}
}

View blocks per attribute or block support: