Full Site Editing

Block support: Color

Last updated September 17, 2023.

Background

Background color is supported by all WordPress blocks by default, but there are a few WordPress blocks that disable it, for example the avatar block.

To disable background color, set the value of supports > color > background to false:

"supports": {
    "color": {
       "background": false
    }
}

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 link and comment reply link.

To disable it, set the value of supports > color > text to false:

"supports": {
    "color": {
       "text": false
    }
}

Link

The link color block support is opt-in. 35 core blocks supports link colors.
For the link color settings to be available to users, you also need to enable link colors in the theme, using theme.json or add_theme_support( 'link-color' ).

To enable the link color block setting, set the value of supports > color > link to true:

"supports": {
    "color": {
       "link": true
    }
}

Gradients

Gradients are opt-in. To enable the gradients, set the value of supports > color > gradients to true:

"supports": {
    "color": {
       "gradients": true
    }
}

Duotone

There are two types of duotone block supports in WordPress and Gutenberg:

• Filter, which is used by the image block
• __experimentalDuotone, which is also combined with a CSS selector.

Example from the cover block:

"supports": {
	"color": {
		"__experimentalDuotone": "> .wp-block-cover__image-background, > .wp-block-cover__video-background",
	}
}

Example from the image block:

"supports": {
	"filter": {
		"duotone": true
	}
}

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: