Color options in WordPress block

In WordPress, blocks may include Color Settings interface allowing users to customize colors:

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

WordPress API provides a way to integrate color options into custom blocks.

Color support

Use block.json file (block metadata) to add color support for a WordPress block. The key to adding color support is the supports property:

"supports": {
    "color": {
        "text": true,
        "background": true,
        "link": true
    }
}

Once supports key is added to block.json file, several automated changes happen:

• A style attribute is added to the block, storing link, text, and background colors.
• A “Colors” panel emerges in the block editor's sidebar, letting users adjust text, link, and background colors.
• The block will consider the theme.json configuration, allowing color disabling, palette inheritance, and more.
• Appropriate styles are auto-injected and applied to the block wrapper when users modify the colors.

Benefits of color support

1. Consistency with Core Blocks: Adding color support to custom blocks aligns them with core WordPress blocks, offering users a consistent interface.
2. Reduced Redundancy: Instead of duplicating logic across different blocks, using the "supports" property ensures a DRY (Don't Repeat Yourself) approach.
3. User Customization: Users can easily tweak the appearance of blocks, enhancing the flexibility and adaptability of a website.
4. Automated Styling: Once the "supports" key is set, WordPress automatically manages styles and configurations for the colors chosen by the user.

Editor color palette

The editor color palette in WordPress is a predefined set of colors that users can utilize while creating or editing content. Typically, this palette is defined and set by the WordPress block theme, via the theme.json configuration, in use.

The palette ensures that users keep visual consistency across their website, ignoring the need for manual color selection every time.

However, while the color support offers this predefined palette for selection, there are use cases where one might need the actual list of the colors from the default editor color palette for use in different components.

Use case example

When working on new update for Sortable block, I used BorderControl component from a WordPress core. This component provides options for setting both border color and style.

Also, the component includes a colors prop, allowing to define an array of default colors. But, if this prop is skipped, users are only presented with the option to select a custom color, bypassing any predefined palettes.

This means that, by default, the BorderControl component doesn't display the editor color palette.

While it works without the default colors, the editor color palette can enhance user experience. It allows users in choosing a color from a known, pre-defined set, making editing more intuitive and efficient.

Editor default colors

To access default color settings of the WordPress editor, use WordPress Data API. This API provides functions to manage application data, offering access to editor settings.

Here's how to fetch the editor's default colors:

/**
 * Importing necessary dependencies.
 * The WordPress Data API provides functions for managing application data.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/
 */
import { useSelect } from "@wordpress/data";

The useSelect function from the @wordpress/data package allows components to get values from the WordPress data store. This function runs a given selector function against the state and reruns it if the state changes.

/**
 * Using the useSelect hook to get editor default settings.
 */
const editorSettings = useSelect((select) => {
    // The 'select' function is used to select data from a registered store.
    // Here, it fetches settings from the 'core/editor' store.
    return select("core/editor").getEditorSettigns();
});

/**
 * If editorSettings has been set and contains a 'colors' property,
 * it logs the editor's default colors to the console.
 */
console.log(editorSettings?.colors);

To clarify:

• First, the useSelect hook is invoked, providing access to the select function.
• Inside useSelect, the select function targets the core/editor store, which manages the state of the WordPress block editor settings.
• The getEditorSettings function is called to retrieve the editor settings. The resulting settings are stored in the editorSettings constant.
• Using optional chaining (?.), the code attempts to log the colors property of editorSettings to the console. If editorSettings is undefined or doesn't contain a colors property, no error is thrown, and nothing is logged.

This approach allows to fetch the default colors set in the WordPress editor, providing a base palette for custom blocks.