Color Palette with ACF custom blocks

The core WordPress blocks like button and group all share a global color palette. This saves a lot of time because you don’t have to style many variations of each block – every block with a class of .has-secondary-background-color will have the same background color.

If you’re using theme.json, this becomes even more powerful because you can customize the color palette on a per-block-type level.

At CultivateWP we build a lot of custom blocks with ACF. In the past, when we needed the global color palette we would either wrap our custom block in a group block that had the color styling, or use Matt Whiteley’s guide on syncing ACF colors with the Gutenberg palette. But Matt’s approach doesn’t work with theme.json.

A developer on our team (Chris Brailsford) just found a better way.

Add ‘color’ support

When registering a new block with acf_register_block_type(), you can use the ‘supports’ array to specify which block editor features this block supports. The documentation lists a few examples, but the important part is All properties from the JavaScript block supports documentation may be used. 

To add support for the color feature, add 'color' => true to the supports array.

acf_register_block_type(
	[
		'title'           => __( 'Hero', 'cwp2021' ),
		'name'            => 'hero',
		'render_template' => 'partials/blocks/hero.php',
		'category'        => 'cultivatewp',
		'mode'            => 'preview',
		'align'           => 'full',
		'supports'        => [
			'align'           => [ 'full' ],
			'jsx'             => true,
			'color'           => true,
		],
	]
);

This adds support for both the Background Color and Text Color fields.

For more control, you can pass an array to specify which of those two fields should be displayed.

acf_register_block_type(
	[
		'title'           => __( 'Hero', 'cwp2021' ),
		'name'            => 'hero',
		'render_template' => 'partials/blocks/hero.php',
		'category'        => 'cultivatewp',
		'mode'            => 'preview',
		'align'           => 'full',
		'supports'        => [
			'align'           => [ 'full' ],
			'jsx'             => true,
			'color'           => [
				'background' => true,
				'gradients'  => true,
				'text'       => false,
			],
		],
	]
);

Add the classes to your block

Selecting a color from the palette adds a class to your block for styling. This automatically works in the backend because the block editor adds the class for you, but you’ll also need to update your block markup to add the class on the frontend.

Inside your block template file, check for $block['backgroundColor'] and $block['textColor'].

$classes = [ 'block-hero' ];
if ( ! empty( $block['className'] ) ) {
	$classes = array_merge( $classes, explode( ' ', $block['className'] ) );
}
if ( ! empty( $block['align'] ) ) {
	$classes[] = 'align' . $block['align'];
}
if ( ! empty( $block['backgroundColor'] ) ) {
	$classes[] = 'has-background';
	$classes[] = 'has-' . $block['backgroundColor'] . '-background-color';
}
if ( ! empty( $block['textColor'] ) ) {
	$classes[] = 'has-text-color';
	$classes[] = 'has-' . $block['textColor'] . '-color';
}
printf(
	'<div class="%s"%s>',
	esc_attr( join( ' ', $classes ) ),
	! empty( $block['anchor'] ) ? ' id="' . esc_attr( sanitize_title( $block['anchor'] ) ) . '"' : '',
);
echo '<div class="block-hero__image">' . wp_get_attachment_image( get_field( 'image' ), 'full' ) . '</div>';

echo '<div class="block-hero__content"><InnerBlocks /></div>';

echo '</div>';