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

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);
  • 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 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 at 7:43
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.