Block Editor Color Settings: The Ultimate Guide

The block editor color settings interface allows users to customize the colors of a block. This includes the:

Text color
Background-color: either a solid color or a gradient
Link color (if enabled by the theme).

In this article, we’ll first look at what these color settings are, and how they work. We’ll then see how to disable the custom color picker and the default color palette. Finally we’ll learn how to add our own custom color palettes.

The code snippets in this article use the theme.json file. If you’re not familiar with how to use theme.json to configure a theme, you can take the free Theme.json Explained course.

What are the block color settings?

The color settings panel of the Post Title block.

When you select a block that supports color settings, the panel will display in the settings sidebar. The panel is divided into three sections:

Text
Background
Link

When you select a section, a menu opens that shows the different available color options.

The color selection options.

There are three options to choose from. The first is the color picker, that allows you to select a color of your choice.

An example of a custom text color.

The second option is the theme color palette.

The theme color palette in the Twenty Twenty Two default theme.

This palette depends on the active theme and is defined in its theme.json file. Every color has a name, hex code, and unique identifier (or slug).

The third option is the default color palette defined by WordPress Core.

The default Vivid Purple color from the default palette.

These colors are available on all WordPress installs.

How to define a custom color palette?

To define a custom color palette in your theme, add the following JSON snippet under the settings key of your theme.json file.

If there’s already a color entry, just copy paste the palette definition.

"color": {
    "palette": [
        {
            "name": "Brown",
            "slug": "brown",
            "color": "#3a3335"
        },
        {
            "name": "Orange",
            "slug": "orange",
            "color": "#f0544f"
        },
        {
            "name": "Light Green",
            "slug": "light-green",
            "color": "#c6d8d3"
        }
    ]
}Code language: JavaScript (javascript)

As we can see the palette is an array, with objects representing each color. Each color has the following properties:

The name value displays as a tool tip when the user hovers over the color.
The Block Editor uses the hex value in color to style the block preview.
The slug is part of the CSS classes added to the block on the frontend.

Our custom palette as defined in the theme.json file.

How to disable the default color palette?

To remove the default color palette provided by WordPress Coreadd the following JSON snippet under the settings key of your theme.json file:

"color": {
    "defaultPalette": false
}Code language: JavaScript (javascript)

This will remove the predefined colors, while allowing users to select a custom color or use the theme palette.

Before

Screenshot of the color settings with the default color palette enabled.

After

Screenshot of the color settings with the default color palette disabled.

How to disable the custom color picker?

To disable the custom color picker, add the following JSON snippet under the settings key of your theme.json file.

"color": {
    "custom": false
}Code language: JavaScript (javascript)

This will remove the ability to select a custom color, while keeping the color palette accessible.

Before

Screenshot of the color settings with the custom color picker enabled.

After

Screenshot of the color settings with the custom color picker disabled.

How to disable all color settings?

In the previous sections, we disabled specific color features. To remove the entire color settings panel, we combine these code snippets into one:

"color": {
    "custom": false,
    "defaultPalette": false,
    "customGradient": false,
    "gradients": [],
    "defaultGradients": false
}

By adding this code to your theme’s theme.json file, you’ll remove the entire color settings panel in the editor:

Closing

There you have it! All you need to know about custom colors in the block editor.

The ability to manage colors is just one of the many features that you can configure with theme.json. If you aren’t yet confident in working with theme.json, my free Theme.json Explained course is the way to go.

Table of contents