I have a custom block with the ColorPalette component. In this component, I have an array with several colors to choose from.

The ColorPalette component only passes a color value. I would like to pass the name as well

This is what my block looks like:

registerBlockType('my/block', {
    attributes: {
        backgroundColor: {
            type: 'string',
            default: '#ffffff'
        },
    },

    edit({ attributes, setAttributes, className }) {
        const { backgroundColor } = attributes;
        return (
            <Fragment>
                <InspectorControls>
                    <PanelBody title="Container Settings">

                        <ColorPalette
                            colors={[
                                { 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' },
                            ]}
                            value={backgroundColor}
                            onChange={(value) => setAttributes({ backgroundColor: value })}
                        />
                    </PanelBody>
                </InspectorControls>
            </Fragment>
        );
    },

    save() {
        // I use `render_callback` where I manage the data ​​returned by the block
        return (null);
    },
});

I have a custom block with the ColorPalette component. In this component, I have an array with several colors to choose from.

The ColorPalette component only passes a color value. I would like to pass the name as well

This is what my block looks like:

registerBlockType('my/block', {
    attributes: {
        backgroundColor: {
            type: 'string',
            default: '#ffffff'
        },
    },

    edit({ attributes, setAttributes, className }) {
        const { backgroundColor } = attributes;
        return (
            <Fragment>
                <InspectorControls>
                    <PanelBody title="Container Settings">

                        <ColorPalette
                            colors={[
                                { 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' },
                            ]}
                            value={backgroundColor}
                            onChange={(value) => setAttributes({ backgroundColor: value })}
                        />
                    </PanelBody>
                </InspectorControls>
            </Fragment>
        );
    },

    save() {
        // I use `render_callback` where I manage the data ​​returned by the block
        return (null);
    },
});

• php
• plugin-development
• javascript
• block-editor

1 Answer 1

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:

1. Import or load the function:

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

2. 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', ... );
   

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

1. 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: '',
           },
       },
   },
   

2. 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,
       } })}
   />
   

3. 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',
   ] );
   

4. 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:

• https://developer.wordpress/rest-api/extending-the-rest-api/schema/#objects

• https://developer.wordpress/rest-api/extending-the-rest-api/schema/#format