Passing the name of selected color from the custom component to `render_callback`

Question

If you just want to get the selected color name, then you can use the getColorObjectByColorValue() function in the @wordpress/block-editor package, which is wp.blockEditor.getColorObjectByColorValue in the browser. The function accepts two parameters: a color list (each is an object with color and name as the properties), and the color (a HEX code, e.g. #17a2b8) that you’d like to find in that color list. So for example:

Import or load the function:

//import { InspectorControls, getColorObjectByColorValue } from '@wordpress/block-editor';
const { InspectorControls, getColorObjectByColorValue } = wp.blockEditor;

Define the color object list:

const colorList = [
    { name: 'bg-danger', color: '#dc3545' },
    { name: 'bg-dark', color: '#343a40' },
    { name: 'bg-info', color: '#17a2b8' },
    { name: 'bg-light', color: '#f8f9fa' },
    { name: 'bg-secondary', color: '#6c757d' },
    { name: 'bg-warning', color: '#ffc107' },
];

// ...

registerBlockType( 'my/block', ... );

Then in the block edit() function, you can use getColorObjectByColorValue( colorList, backgroundColor ) to get the color data/object which contains the selected color.

But actually, you don’t necessarily need to use the getColorObjectByColorValue() function; you could instead just use the find() prototype/function in JavaScript Array… Example:

const color = colorList.find( ( obj ) => ( backgroundColor === obj.color ) );

So what I’m saying is, define the color list and use it when retrieving the selected color.

Bonus: Converting the `backgroundColor` to an object attribute with `color` and `name` as the properties

You don’t have to convert it to an object — and you could just add another attribute like backgrounColorName, but I thought this would be useful to you as well as myself. 🙂 And I also included a sample render_callback function which simply displays the color code and name.

Define the block attributes:

attributes: {
    backgroundColor: {
        type: 'object',
        properties: {
            color: {
                type: 'string',
                default: '#ffffff',
                format: 'hex-color',
            },
            name: {
                type: 'string',
                default: '',
            },
        },
        default: {
            color: '#ffffff',
            name: '',
        },
    },
},

Display the color palette with the selected color code (backgroundColor.color):

<ColorPalette
    colors={ colorList }
    value={ backgroundColor.color }
    onChange={ ( value ) => setAttributes({ backgroundColor: {
        color: value,
        name: getColorObjectByColorValue( colorList, value ).name,
    } })}
/>

Register the block type in PHP:

register_block_type( 'my/block', [
    // The schema should match the one used in your JavaScript.
    'attributes'      => [
        'backgroundColor' => [
            'type'       => 'object',
            'properties' => [
                'color' => [
                    'type'    => 'string',
                    'default' => '#ffffff',
                    'format'  => 'hex-color',
                ],
                'name'  => [
                    'type'    => 'string',
                    'default' => '',
                ],
            ],
            'default'    => [
                'color' => '#ffffff',
                'name'  => '',
            ],
        ],
    ],
    'render_callback' => 'my_block_render_callback',
] );

Finally, the render_callback:

function my_block_render_callback( $attrs, $content ) {
    $background = $attrs['backgroundColor'];
    echo 'color: ' . $background['color'];
    echo '; name: ' . $background['name'];
}

I hope that helps, and for further details about the attributes, please check:

Bonus: Converting the backgroundColor to an object attribute with color and name as the properties

Related Posts:

Bonus: Converting the `backgroundColor` to an object attribute with `color` and `name` as the properties