Support

Account

Home Forums Gutenberg Get Custom Background Color from gutenberg color editor Reply To: Get Custom Background Color from gutenberg color editor

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