Get Custom Background Color from gutenberg color editor

• itsmebobby

• February 25, 2021 at 12:28 pm

When I register a new block, I’m able to set up color editor under support:

'supports'  => array(
	'color'	=> [
		'gradients' => false
	]
),

I’m able to retrieve a color palette using:

// returns color name to be used as a class .has-black-background-color
$block[backgroundColor];

How do I return a color value when the color picker is being used to select a color? I’ve tried using:

// Should return a color value like #000000
$block[customBackgroundColor];

• Michelle

• March 4, 2021 at 6:01 am

I think what you’re looking for is $block[textColor]; ?

• itsmebobby

• March 4, 2021 at 6:41 am

No, I’m looking to return a color value when a user uses a custom color (the color picker) and not when the user pick a color from the color palette.

$block[textColor]; // Returns text color from color palette
$block[backgroundColor]; // Returns background color from color palette

I think it’s supposed to be $block[custombackgroundColor]; but this doesn’t seem to work.

• Matthew McVickar

• July 14, 2021 at 9:13 pm

Block color settings are available via the $block array, but it’s trickier than it seems. First of all, if you’re referencing an array value by key name, the key must be in quotes. E.g.:

$block[textColor]; // <-- THIS *WON'T* WORK.
$block['textColor']; // <-- THIS *WILL* WORK.

The next thing to note is that different $block settings will be returned depending on whether a predefined named color was picked from the palette or a custom color was picked.

If you pick one of the default palette colors (or if you have set your own palette colors with the add_theme_support('editor-color-palette', array( ... ));, it will return the slug of the color (e.g., blue) instead of a hex-value, and in two separate array keys.

If you pick custom colors, they will be accessible via $block['style']['color']['background'] and $block['style']['color']['text'].

If you pick two predefined colors:

$block Array => (
    ...
    [backgroundColor] => bright-purple
    [textColor] => white
)

If you pick two custom colors:

$block Array => (
    ...
    [style] => Array (
        [color] => Array (
            [background] => #cccccc
            [text] => #aa0000
        )
    )
)

And if you pick one palette color and one custom color:

$block Array => (
    ...
    [textColor] => black
    [style] => Array
        (
            [color] => Array
                (
                    [background] => #cccccc
                )

        )
)

• Matthew McVickar

• July 14, 2021 at 9:46 pm

Here’s how I’m handling block color settings:

This function parses the $block attributes and settings:

/**
 * Get an ACF block's color settings.
 *
 * @param array $block The block settings and attributes.
 */
function get_block_color_attrs( $block = null ) {
    if ( ! $block ) {
        return;
    }

    $block_class = null;
    $block_style = null;

    if ( $block['backgroundColor'] ) {
        $block_class .= ' has-background has-' . $block['backgroundColor'] . '-background-color ';
    }

    if ( $block['textColor'] ) {
        $block_class .= ' has-text-color has-' . $block['textColor'] . '-color ';
    }

    if ( $block['style']['color']['background'] ) {
        $block_class .= ' has-background ';
        $block_style .= 'background-color: ' . $block['style']['color']['background'] . ';';
    }

    if ( $block['style']['color']['text'] ) {
        $block_class .= ' has-text-color ';
        $block_style .= 'color: ' . $block['style']['color']['text'] . ';';
    }

    return array(
        'class' => $block_class,
        'style' => $block_style,
    );
}

Then I print that information in the block wrapper element:

<div class="<?php echo esc_attr( $block_color_attrs['class'] ); ?>" style="<?php echo esc_attr( $block_color_attrs['style'] ); ?>">
    [...]
</div>

• Matthew McVickar

• July 15, 2021 at 1:34 am

Whoops—I forgot the middle step there. Get the attributes:

$block_color_attrs = get_block_color_attrs( $block );