3

Using add_theme_support( 'editor-color-palette' ) one can replace the color palette in the Gutenberg editor by a custom one:

add_theme_support( 'editor-color-palette', array(
    array(
        'name' => __( 'Strong magenta', 'themeLangDomain' ),
        'slug' => 'strong-magenta',
        'color' => '#a156b4',
    ),
    array(
        'name' => __( 'Light grayish magenta', 'themeLangDomain' ),
        'slug' => 'light-grayish-magenta',
        'color' => '#d0a5db',
    ),
) );

My question is, is there a way to ADD colors to an existing palette (via a child theme, for example) without completely replacing it?

Thanks in advance

3 Answers 3

5

You can merge palettes

$existing = get_theme_support( 'editor-color-palette' );

$new = array_merge( $existing[0], array(
    array(
        'name' => __( 'Strong magenta', 'themeLangDomain' ),
        'slug' => 'strong-magenta',
        'color' => '#a156b4',
    ),
    array(
        'name' => __( 'Light grayish magenta', 'themeLangDomain' ),
        'slug' => 'light-grayish-magenta',
        'color' => '#d0a5db',
    ),
));

add_theme_support( 'editor-color-palette',  $new);
4
  • 1
    This solution isn't working for me - instead it's showing no default colours at all after implementing this. Not sure at what point it's failing. -- Note that I was trying to add to the default colors from Gutenberg itself, so maybe add_theme_support hadn't been called anywhere else at all yet, so maybe get_theme_support isn't returning anything. -- still I'd at least expect to get the new ones then when I array_merge. hm.
    – Julix
    Feb 5, 2020 at 20:11
  • 1
    @Julix Yes, by default, Gutenberg doesn't call add_theme_support for its default color palette. This only works in child themes with parents that explicitly call add_theme_support.
    – leemon
    Feb 9, 2020 at 7:43
  • just tried, but doesn't work on my child theme. get_theme_support( 'editor-color-palette' ) return false and not an array. Tried also to enable first the theme support, obviously it returns true, but no array.
    – sb0k
    Oct 8, 2021 at 8:52
  • You cannot just paste it in functions.php but have to wrap it in a function called by add_action() as in @Rhys's answer
    – Fanky
    Apr 7 at 13:19
3

To expand on Vitatus' answer, it works best if you're using a child theme, or a plugin, that edits the above.

Assuming that the editor-colour-palette is called within a action with a default priority, you can call it after (usually calling after_setup_theme with a priority greater than 10)

e.g.

/**
 * Add the pink colour to the site
 *
 * @return void
 */
function wpquestion357851_add_colours()
{

    $existing = get_theme_support('editor-color-palette');

    $new = array_merge($existing[0], array(
        array(
            'name'  => __('Pink', 'twentytwenty'),
            'slug'  => 'pink',
            'color' => '#ff14a7',
        ),
    ));

    add_theme_support('editor-color-palette',  $new);
}
add_action('after_setup_theme', 'wpquestion357851_add_colours', 20);

You may need to see where the add_theme_support('editor-color-palette' is called within your theme, and make sure it is called after.

2

The best way would be to expose the data, so it can be modified. You can do this by adding a filter:

add_theme_support( 'editor-color-palette', apply_filters( 'themeLangDomain_editor_color_palette_args', array(
    array(
        'name' => __( 'Strong magenta', 'themeLangDomain' ),
        'slug' => 'strong-magenta',
        'color' => '#a156b4',
    ),
    array(
        'name' => __( 'Light grayish magenta', 'themeLangDomain' ),
        'slug' => 'light-grayish-magenta',
        'color' => '#d0a5db',
    ),
) ) );

Then child themes or plugins can modify the array using add_filter to modify the data in themeLangDomain_editor_color_palette_arg:

add_filter( 'themeLangDomain_editor_color_palette_args', function( $palette ) {
    $palette[] = array(
        'name' => __( 'Black', 'themeLangDomain' ),
        'slug' => 'black',
        'color' => '#000000',
    );
    return $palette;
} );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.