Wordpress - Implement Panel Color Inspector Control in Gutenberg

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.

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