Gutenberg: Color Palettes theme support with a single array of colors argument

[webmandesign]

Issue Overview

_Gutenberg version: 2.6.0_

In my theme I am grabbing all theme mods colors into an array. I would like to use this array (only the unique values/colors from it) to set up color palettes for Gutenberg. But currently the color palettes theme support is declared by passing each color value as a separate argument, not a single array of colors.

Could you please consider setting up color palettes with a single array argument instead of multiple ones?

_(Example code below was taken from Gutenberg theme.)_

Current Behavior

add_theme_support( 'editor-color-palette',
    '#0073aa',
    '#229fd8',
    '#eee',
    '#444',
);

Expected Behavior

This is just a rough, quick example to prove the point:

$colors = array_unique( array(
    get_theme_mod( 'color_accent', '#0073aa' ),
    get_theme_mod( 'color_accent_hover', '#229fd8' ),
    get_theme_mod( 'color_text', '#eee' ),
    get_theme_mod( 'color_headings', '#444' ),
) );
add_theme_support( 'editor-color-palette', $colors );

As you might imagine, theme user can simply decide to use the same color for color_accent and color_accent_hover and/or for color_text and color_headings. That's why I use array_unique() to get rid of duplicates. This wouldn't be possible if I just listed every color as a separate argument. Also, it seems to be simpler to work with array than with separate arguments when I want to automate things.

(Actually, currently I'm trying to figure out how to split my colors array into individual arguments and pass them to add_theme_support with no success... - forgive my ignorance if that's doable.)

Thank you for consideration on this!

Regards,

Oliver

[samikeijonen]

Note that this has changed in 0489c56c04b0c35d4cf4e1670b37f802583107c1.

Updated theme support info can be found in here.

[paulwilde]

It’s kinda weird how the current implementation doesn’t support passing in a single array. When I originally tried to implement custom colours that is what I tried and it didn’t work.

Passing in seperate arguments for each colours is some 2005-era type voodoo.

The “html” theme support arg uses an array. So “editor-color-palette” should too.

[webmandesign]

@samikeijonen Thanks Sami, I've actually seen this before I opened the issue. But the new approach you've linked to still does not resolve my original problem. It just creates multiple array arguments, while each array is for a single color. So, again, multiple arguments passed.

@paulwilde That's exactly my point here → I'd like to treat all colors in a single array argument.

[samikeijonen]

Sure, I was just pointing out if you missed that. I don't have an answer to your original question though. In other words I don't know the reason for it.

[chrisvanpatten]

Untested, but I think this would work:

$colors = [
    [
        'name'  => 'name_here',
        'color' => '#HEXVAL',
    ],
    [
        'name'  => 'name_here',
        'color' => '#HEXVAL',
    ],
];

// Add 'editor-color-palette' as the first argument
// (You could also just add it in your array above manually, but I
// am assuming you might want to build it programatically)
array_unshift($colors, 'editor-color-palette');

// Calls `add_theme_support` with arguments from the $args array
// (each array element is treated as an arg)
call_user_func_array('add_theme_support', $colors);

I agree though, being able to pass in a single array would be nice!

EDIT: array_unshift doesn't return an array, fixed thanks to @webmandesign

[chrisvanpatten]

Here's a nicer version wrapped up in a function that also checks for duplicates:

/**
 * Registers an editor-color-palette for Gutenberg, skipping
 * duplicate color values along the way
 *
 * @param $color_map array
 * @return void
 */
function g7g_register_editor_color_palette( $color_map = array() ) {
    // Define the main array of args
    $args = array(
        'editor-color-palette',
    );

    // Used to look for duplicate colors
    $colors = array();

    // Loop through the color map array
    foreach ( $color_map as $color_name => $color_default ) {
        // Pull in the value
        $color = get_theme_mod( $color_name, $color_default );

        // Only add color values we haven't already added
        if ( ! in_array( $colors, $color ) ) {
            // Add to $colors so it's skipped next time
            $colors[] = $color;

            // Each new color is a new argument to pass to
            // add_theme_support
            $args[] = array(
                'name'  => $color_name,
                'color' => $color,
            );
        }
    }

    // Make sure we pass enough args to add_theme_support
    // (needs at least 2 arguments)
    if ( count( $args ) > 1 ) {
        call_user_func_array( 'add_theme_support', $args );
    }
}

add_action( 'after_setup_theme', function () {
    // Array of color names and default values
    $colors = array(
        'color_accent'       => '#HEXVAL',
        'color_accent_hover' => '#HEXVAL',
        'color_text'         => '#HEXVAL',
        'color_headings'     => '#HEXVAL',
    );

    g7g_register_editor_color_palette($colors);
} );

(I'm not sure removing duplicate values is actually a good idea, but this would do the trick!)

[webmandesign]

@chrisvanpatten

Thanks for the code. Indeed this would work with a minor fix - you shouldn't use array_unshift to return value:

array_unshift( $colors, 'editor-color-palette' );
call_user_func_array( 'add_theme_support', $colors );

However, as you can see, this is not very pretty... ;-) In a theme setup function full of pretty add_theme_support code this one looks very weird, hacky. For example:

add_theme_support( 'title-tag' );
add_theme_support( 'custom-logo' );
add_theme_support( 'align-wide' );

array_unshift( get_theme_colors_array(), 'editor-color-palette' );
call_user_func_array( 'add_theme_support', $colors );

But surely, this seems to be the only way for me to go right now… Thanks again!

As for your other code, thanks for that too! I wasn't particularly trying to resolve the colors duplication issue with my original question, it was just a rough example of usage ;-) But your code does prove to be very useful, thanks! +1

[webmandesign]

Hey guys, I've created a pull request #6437 fixing this issue. Works perfectly fine for me. Please test if you are interested.

[webmandesign]

Hi everyone,

After reading https://make.wordpress.org/core/2018/05/04/whats-new-in-gutenberg-may-the-4th/ I'm getting slightly worried about this issue ticket and proposed solution.

Can anyone from Gutenberg devs provide feedback for whether this is considered to be merged or abandoned?

Thanks for the info!

Regards,

Oliver

[justintadlock]

Just ran into this issue trying to help out someone. The second parameter should definitely accept an array of colors rather than adding each color as an additional parameter. I was starting to think I was going to need to perform some black magic to get things working.

[webmandesign]

Please disregard the PR #6437 due to messy rebase. I've just created a new PR #7025 implementing the single array setup functionality.

[webmandesign]

New, updated fix (matching current master commits): #7619