theme development - Add colors to existing color palette without replacing it

admin管理员组

文章数量:1287201

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

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

• theme-development
• themes
• child-theme
• block-editor
• add-theme-support

Share Improve this question asked Feb 4, 2020 at 15:13 leemonleemon 2,02244 gold badges2323 silver badges5151 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 6

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);

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.

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;
} );

本文标签： theme developmentAdd colors to existing color palette without replacing it