Syncing your custom Block Editor Colour Palette with Advanced Custom Fields

Since the Block Editor was introduced it’s enabled you to create a custom Theme Colour Palette which can be utilised within your Theme across any of your WordPress Blocks, within the websites I tend to build there’s a mix of “native” WordPress Blocks and ACF built “custom” Blocks, as these types of content are fairly different in their functionality and in turn overall markup within the editor it’s not always that straight forward to utilise everything available to you within the Block editor, one of these issues for me has been based upon the Themes Colour Palette, setting up the Themes Colour Palette itself is really straight forward, differing slightly depending on whether you are using the “legacy” method or within the relatively new theme.json, each have their own way to register a custom Colour Palette.

Registering a custom Colour Palette within your Theme

// "Legacy" Colour Palette Registration
add_theme_support( 'editor-color-palette', array(
	array(
		'name' => __('White', 'textdomain'),
		'slug' => 'white',
		'color' => '#FFFFFF'
	),
);

// Theme.json example with Colour Palette Registration
{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 1,
	"settings": {
		"color": {
			"palette": [
				{
					"slug": "white",
					"color": "#FFFFFF",
					"name": "White"
				}
			]
		},
	},
	"styles": {},
	"customTemplates": {},
	"templateParts": {}
}

Syncing your Themes Colour Palette within ACF Fields (Javascript)

This first approach to sync colours across your “native” content and ACF built content is to focus on custom fields within Blocks or within the Block Editor area alongside any Page options you may have, this can be done by adding the script below to some javascript loaded on the Editor side, make sure you enqueue this via “enqueue_block_editor_assets” method, this will ensure the script is only loaded in the admin area and not the frontend. Once this script is implemented you’ll be able to see your Colour Palette within any ACF Colour Picker field you create within your Blocks or Editor, unfortunately this doesn’t carry over to the traditional ACF Wysiwyg Editor that is also available to use within ACF, in order to do that carry on below.

// Sync ACF Colour Picker colour options with Themes registered Colour Palette
acf.addFilter('color_picker_args', function (args) {

	// Get Block Editor Settings
	const settings = wp.data.select("core/editor").getEditorSettings();

	// Get Theme Colour Palette
	let colors = settings.colors.map(x => x.color);

	// Get Individual Colours
	args.palettes = colors;

	// Add Colours to the ACF Colour Picker field
	return args;
});

Syncing your Themes Colour Palette within ACF Wysiwyg Editor Fields (PHP Function)

This final PHP snippet will focus on any ACF Wysiwyg Editor fields you may be using within any area of WordPress, this includes Blocks or any Option pages you may have setup, you’ll access this Colour Palette via the Text Colour dropdown within the secondary Toolbar of any ACF Wysiwyg Editor, this function needs to be added to your themes functions.php file.

// Sync ACF Wysiwyg Editor font colour options with Themes registered Colour Palette
function wp_override_tinymce_color_options($init){

	// Get Block Editor Theme colours
	$color_palette = current( (array) get_theme_support( 'editor-color-palette' ) );
	
	// Create empty Array for Colour Values
	$color_values = array();

	// Loop through each Colour and grab the Colours Hex Value
	foreach ( $color_palette as $color_value ) {

		// Get Colour value, remove '#' & add it to the Array
		$color_values[] = str_replace( '#', '', $color_value['color'] );

		// Get Colour name & add it to the Array
		$color_values[] = $color_value['name'];
	}

	// Add Array to Editor font colour options
	$init['textcolor_map'] = json_encode( $color_values );

	// Create enough 'Rows' to show all your Theme colours within the Colour Grid
	$init['textcolor_rows'] = 2;

	// Return Colour Values & Names within the Colour Grid
	return $init;
}
add_filter('tiny_mce_before_init', 'wp_override_tinymce_color_options');

With these two approaches you should be able to keep your Themes colour palette in sync regardless how that content is created whether its “native” WordPress Blocks or ACF built Blocks.

Prev Next