Implement Panel Color Inspector Control in Gutenberg

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>
        );
    },
} );

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.