Implement Panel Color Inspector Control in Gutenberg

Question

I am trying to implement Panel Color in the Inspector Control for a custom block but can't seem to figure it out. Below is the JSX code that attempts it. It renders the block, but when it's in focus, it encounters a Minified React error #130.

const { registerBlockType, InspectorControls, PanelColor } = wp.blocks;

registerBlockType( 'test/test', {
    title: 'Test',
    icon: 'universal-access-alt',
    category: 'layout',

    edit( { attributes, className, setAttributes } ) {
        const { backgroundColor } = attributes;
        const onChangeBackgroundColor = newBackgroundColor => {
            setAttributes( { backgroundColor: newBackgroundColor } );
        };

        return (
            <div className={ className }>
            { !! focus && (
              <InspectorControls>
                <PanelColor
                  title={ 'Background Color' }
                  value={ backgroundColor }
                  onChange={ onChangeBackgroundColor }
                />
              </InspectorControls>
            ) }
          </div>
        );
    },
    save( { attributes, className } ) {
        const { backgroundColor } = attributes;
        return (
            <div className={ className }>
            </div>
        );
    },
} );

Answer 1

Many wp.blocks.* controls have been moved to wp.editor.* (see release notes).

Specifically wp.blocks.InspectorControls is now wp.editor.InspectorControls - you'll need to change the first line of your code.

Note: registerBlockType is still imported from wp.blocks.* iirc.

As a side note, I've also found that the focus && trick no longer required as GB automatically displays the InspectorControls when the block is focused.

Answer 2

I'm going to give you a walk through to the point, because I struggled too :)

First import the InspectorControls

const { InspectorControls } = wp.editor;

then import components such as ColorPalette

const { ColorPalette } = wp.components;

In order to save the state you have to define an attribute:

attributes: {
    // To storage background colour of the div
    background_color: { 
        type: 'string', 
        default: 'red', // Default value for newly added block
    },           
    // To storage the complete style of the div that will be 'merged' with the selected colors
    block_style: { 
        selector: 'div', // From tag a
        source: 'attribute', // binds an attribute of the tag
        attribute: 'style', // binds style of a: the dynamic colors
    }
},

Then at the edit function... Define the onChangeColorHandler and a variable to hold the changed value in the JSX, because of course you can't from the css.

In the return part return an array of two elements [] the Inspector and the rendered div in the editor

edit: function( props ) {

    var background_color = props.attributes.background_color // To bind button background color

    // Style object for the button
    // I created a style in JSX syntax to keep it here for
    // the dynamic changes
    var block_style = props.attributes.block_style // To bind the style of the button
    block_style = {
        backgroundColor: background_color,
        color: '#000',
        padding: '14px 25px',
        fontSize: '16px', 
    }

    //
    // onChange event functions
    //
    function onChangeBgColor ( content ) {
        props.setAttributes({background_color: content})
    }

    // Creates a <p class='wp-block-cgb-block-gtm-audio-block'></p>.
    return [
        <InspectorControls>
            <label class="blocks-base-control__label">background color</label>
            <ColorPalette // Element Tag for Gutenberg standard colour selector
                onChange={onChangeBgColor} // onChange event callback
            />
        </InspectorControls>
        ,
        <div className={ props.className } style={block_style}>
            <p>— Hello from the backend.</p>
        </div>
    ];
},

** FINALLY: ** the save method, just create variable for the style and give the rendered div the JSX style of that value.

save: function( props ) {

    var block_style = {
        backgroundColor: props.attributes.background_color
    }
    return (
        <div style={block_style}>
            <p>— Hello from the frontend.</p>
        </div>
    );
},

here is a complete gist of the file

Answer 3

PanelColor has been deprecated, use PanelColorSettings instead:

const {
    PanelColorSettings,
    …
} = wp.editor;

…

edit: (props) => {
    …
    return (
        …
        <InspectorControls>
            <PanelColorSettings
            title={ 'Background Color' }
            colorSettings={[{
              value: backgroundColor,
              onChange: onChangeBackgroundColor,
              label: __('Background Color')
            }]}
          />
      </InspectorControls>
      …