Color Palette Customization

Color Palette Customization

The block editor provides a default palette, but there ways to overwrite it entirely or on an individual block basis.

Theme Overwrites

The add_theme_support function can be used to provide a custom palette across your whole site.

For example:

add_theme_support( 'editor-color-palette', array(
	array(
		'name'  => __( 'Light', 'text-domain' ),
		'slug'  => 'light',
		'color' => '#ffffff',
	),
	array(
		'name'  => __( 'Dark', 'text-domain' ),
		'slug'  => 'dark',
		'color' => '#313537',
	),
	array(
		'name'  => __( 'Primary', 'text-domain' ),
		'slug'  => 'primary',
		'color' => '#20d1a1',
	),
	array(
		'name'  => __( 'Secondary', 'text-domain' ),
		'slug'  => 'secondary',
		'color' => '#fd0458',
	),
	array(
		'name'  => __( 'Tertiary', 'text-domain' ),
		'slug'  => 'tertiary',
		'color' => '#4ba5d6',
	),
) );

The custom color picker can be be disabled by adding add_theme_support( 'disable-custom-colors' ); to your theme.

More information on overriding color options via theme can be found at https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-color-palettes.

Individual Block/Control Overwrites

Custom palettes can be provided when defining individual color controls within the PanelColorSettings component, too.

For example:

<PanelColorSettings
	title={ __( 'Color Settings' ) }
	colorSettings={ [
		{
			value: backgroundColor.color,
			onChange: setBackgroundColor,
			label: __( 'Background Color' ),
		},
		{
			value: textColor.color,
			onChange: setTextColor,
			label: __( 'Text Color' ),
			disableCustomColors: true, // Disables the custom Color picker.
			colors: [
				{
					name: __( 'Light' ),
					slug: 'light',
					color: '#fff',
				},
				{
					name: __( 'Dark' ),
					slug: 'dark',
					color: '#313537',
				},
			],
		},
	] }
/>

An important thing to note about the example above is that the colors need to also be added via the add_theme_support( 'editor-color-palette' ) function - or by other means which we'll touch on next - in order for the setting to be properly saved when the post is published or updated.

Publication Palettes

BU-Blocks hooks into the block editor settings to add additional colors to the palette instead of overwriting them, setting up a foundation for allowing different subsets of colors per control, or publication-specific palettes if BU-Prepress is also in use.

The colors are defined in PHP using the block_editor_settings filter and made available to blocks as a component. Extending with Publication-specific palettes can be done through a child theme, as exemplified in https://github.com/bu-ist/r-editorial/blob/develop/includes/publication-theme-colors.php.

The example below illustrates how to implement these palettes in a block, either entirely or with just a few select colors:

import themeOptions from '../../global/theme-options';

// Get just the light and dark colors.
const lightAndDark = themeOptions().filter( color => ( color.slug === 'light' || color.slug === 'dark' ) );

<PanelColorSettings
	title={ __( 'Color Settings' ) }
	colorSettings={ [
		{
			value: backgroundColor.color,
			onChange: setBackgroundColor,
			label: __( 'Background Color' ),
			disableCustomColors: true, // Disables the custom Color picker.
			colors: themeOptions(),
		},
		{
			value: textColor.color,
			onChange: setTextColor,
			label: __( 'Text Color' ),
			disableCustomColors: true, // Disables the custom Color picker.
			colors: lightAndDark,
		},
	] }
/>