Color Archives

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).

Documentation

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:

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:

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:

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:

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:

Block Attributes