Filtering theme, default, and custom colors (add_theme_support('editor_color_palette') not working)

[briangrider]

Hi all,

I've been coming up against this issue for a while... hoping for some input. As far as I can tell, there is no way to filter, replace, or change colors programmatically in Gutenberg when using block themes (specifically 2022, 2023, and 2024) outside of the theme itself. updateSettings and updateEditorSettings don't seem to work (and would be limited to just theme colors even if they did). This seems like a basic necessity in a platform that prides itself on customizability. I feel like there should be a hook similar to useSettings (called "useUpdateSettings" or something like that), that operates the same as useSettings but gives you a setter instead of a value. For example, you pass in "color.palette.theme" and something similar to setThemeColors((prevThemeColors)=>{}) is returned that allows you to filter/update/change that data. Is there a reason this doesn't exist? I assume it's to make people stay within the limitations of the style panel but as a plugin developer, it's very limiting.

Additionally, it seems add_theme_support('editor_color_palette') is not working with the 2024, 2023, and 2022 theme. Is there a trick I'm missing here? With a custom barebones theme that doesn't have default theme colors, it seems to still work.

Thanks in advance!

[cbirdsong]

It's add_theme_support('editor-color-palette') (dashes, not underscores), but if the theme has theme.json then that is totally ignored. It should really show a warning somewhere if a theme has both.

If you are using theme.json, there are a few filters you can adjust like so:

add_filter("wp_theme_json_data_default", function ($theme_json) {
	$data = $theme_json->get_data();

	// Remove default color palette.
	$data["settings"]["color"]["palette"]["default"] = [];

	// Remove default duotone.
	$data["settings"]["color"]["duotone"]["default"] = [];

	// Remove default gradients.
	$data["settings"]["color"]["gradients"]["default"] = [];

	// Update the theme data.
	$theme_json->update_with($data);

	return $theme_json;
});

I imagine there's also a way to do that in Javascript so you can make adjustments based on the editor context?

[briangrider]

Thanks for your response @cbirdsong. That was a typo on my end and my code was correct, my bad! So yeah, it doesn't work in the 2024, 2023 theme, etc. probably for the reason you mentioned, but for some reason, add_theme_support does work with a theme.json as long as there isn't a color palette declared in it. The inconsistency is definitely weird. I appreciate you sharing that other solution! I'll mess with that a bit later but that could work for my purposes.

I've done a fair bit of research and I couldnt find a way to filter/update colors in JS without unlocking private-apis (I did put together a solution that allowed changing colors and saving those changes but it was super hacky and I'd like to avoid it) but there really should be a way - hoping someone out there has some insight

[t-hamano]

Is the blockEditor.useSetting.before hook useful? You can filter block settings according to various contexts.

The following example adds a new color palette only to the Heading block in the Media and Text block. This code does not need to be built, so you can try it out by running it from the browser console.

I'm sure there are many other ways to use it.

wp.hooks.addFilter(
	'blockEditor.useSetting.before',
	'example/useSetting.before',
	( settingValue, settingName, clientId, blockName ) => {
		// Returns the default value if it is not the Heading block or not a theme color palette
		if ( 'core/heading' !== blockName || 'color.palette.theme' !== settingName ) {
			return settingValue;
		}
		// Get the parent block of this block
		const { getBlockParents, getBlockName } = wp.data.select( 'core/block-editor' );
		const blockParents = getBlockParents( clientId, true );
		// Returns the default value if not in the Media & Text block
		const inMediaText = blockParents.some( ( ancestorId ) => getBlockName( ancestorId ) === 'core/media-text' );
		if ( ! inMediaText ) {
			return settingValue;
		}
		// Add new palette
		const colors = wp.data.select( 'core/block-editor' ).getSettings()?.colors;
		return [
			...colors,
			{
				color: '#ff0000',
				name: 'Red',
				slug: 'red',
			},
		];
	}
);