Add colors to existing color palette without replacing it

Question

Add colors to existing color palette without replacing it

leemon

2021年11月2日 15:17

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

Topic block-editor add-theme-support child-theme theme-development themes Wordpress

Category Web

Rhys Wynne · Accepted Answer · 2021年11月2日 15:17

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.

Tim Elsass · Accepted Answer · 2020年2月4日 15:53

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

Vitauts Stočka · Accepted Answer · 2020年2月4日 15:53

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

Add colors to existing color palette without replacing it

About