Support

Account

Home Forums Gutenberg Get Custom Background Color from gutenberg color editor

Solving

Get Custom Background Color from gutenberg color editor

  • 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];
  • I think what you’re looking for is $block[textColor]; ?

  • 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.

  • 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
                    )
    
            )
    )
    
  • 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>
    
  • Whoops—I forgot the middle step there. Get the attributes:

    
    $block_color_attrs = get_block_color_attrs( $block );
    
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.