I am trying to make a simple Gutenberg block which implements <InspectorControls>, but I'm getting a React error no matter which I component I use.

const { __ } = wp.i18n;
const {
    registerBlockType,
    RichText,
    AlignmentToolbar,
    BlockControls,
    InspectorControls,
    TextControl
} = wp.blocks;

registerBlockType( 'gutenberg-examples/example-04-controls-esnext', {
    title: __( 'Example: Controls (esnext)' ),
    icon: 'universal-access-alt',
    category: 'layout',
    attributes: {
        content: {
            type: 'array',
            selector: 'p',
        },
    },
    edit: props => {
        const {
            attributes: {
                content,
                alignment,
                text
            },
            focus,
            className,
            setFocus
        } = props;

        const onChangeContent = newContent => {
            props.setAttributes( { content: newContent } );
        };

        const onChangeAlignment = newAlignment => {
            props.setAttributes( { alignment: newAlignment } );
        };

        const onChangeText = newText => {
            props.setAttributes( { text: newText } );
        };

        return (
            <div>
                {
                    !! focus && (
                        <InspectorControls>
                            <AlignmentToolbar
                                value={ alignment }
                                onChange={ onChangeAlignment }
                            />
                            <TextControl
                                label='Additional CSS Class'
                                value={ text }
                                onChange={ onChangeText }
                            />
                        </InspectorControls>
                    )
                }
                <RichText
                    className={ className }
                    style={ { textAlign: alignment } }
                    onChange={ onChangeContent }
                    value={ content }
                    focus={ focus }
                    onFocus={ setFocus }
                    />
            </div>
        );
    },
    save: props => {
        // ignore for now
    }
} );

I'm using the 'create-guten-block' development kit.

Error:

react-dom.min.3583f8be.js:162 Error: Minified React error #130; visit .html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at l (react-dom.min.3583f8be.js:12)
    at qc (react-dom.min.3583f8be.js:43)
    at K (react-dom.min.3583f8be.js:53)
    at n (react-dom.min.3583f8be.js:57)
    at react-dom.min.3583f8be.js:62
    at f (react-dom.min.3583f8be.js:130)
    at beginWork (react-dom.min.3583f8be.js:136)
    at d (react-dom.min.3583f8be.js:158)
    at f (react-dom.min.3583f8be.js:159)
    at g (react-dom.min.3583f8be.js:159)

I am trying to make a simple Gutenberg block which implements <InspectorControls>, but I'm getting a React error no matter which I component I use.

const { __ } = wp.i18n;
const {
    registerBlockType,
    RichText,
    AlignmentToolbar,
    BlockControls,
    InspectorControls,
    TextControl
} = wp.blocks;

registerBlockType( 'gutenberg-examples/example-04-controls-esnext', {
    title: __( 'Example: Controls (esnext)' ),
    icon: 'universal-access-alt',
    category: 'layout',
    attributes: {
        content: {
            type: 'array',
            selector: 'p',
        },
    },
    edit: props => {
        const {
            attributes: {
                content,
                alignment,
                text
            },
            focus,
            className,
            setFocus
        } = props;

        const onChangeContent = newContent => {
            props.setAttributes( { content: newContent } );
        };

        const onChangeAlignment = newAlignment => {
            props.setAttributes( { alignment: newAlignment } );
        };

        const onChangeText = newText => {
            props.setAttributes( { text: newText } );
        };

        return (
            <div>
                {
                    !! focus && (
                        <InspectorControls>
                            <AlignmentToolbar
                                value={ alignment }
                                onChange={ onChangeAlignment }
                            />
                            <TextControl
                                label='Additional CSS Class'
                                value={ text }
                                onChange={ onChangeText }
                            />
                        </InspectorControls>
                    )
                }
                <RichText
                    className={ className }
                    style={ { textAlign: alignment } }
                    onChange={ onChangeContent }
                    value={ content }
                    focus={ focus }
                    onFocus={ setFocus }
                    />
            </div>
        );
    },
    save: props => {
        // ignore for now
    }
} );

I'm using the 'create-guten-block' development kit.

Error:

react-dom.min.3583f8be.js:162 Error: Minified React error #130; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at l (react-dom.min.3583f8be.js:12)
    at qc (react-dom.min.3583f8be.js:43)
    at K (react-dom.min.3583f8be.js:53)
    at n (react-dom.min.3583f8be.js:57)
    at react-dom.min.3583f8be.js:62
    at f (react-dom.min.3583f8be.js:130)
    at beginWork (react-dom.min.3583f8be.js:136)
    at d (react-dom.min.3583f8be.js:158)
    at f (react-dom.min.3583f8be.js:159)
    at g (react-dom.min.3583f8be.js:159)

• block-editor

• How do you know it's the InspectorControls component? have you tried not minifying your build? have you considered asking on the gutenberg GH? Or the create-guten-block project? It's hard to tell if this is a general React usage issue or a GB usage issue, or something specific to create-guten-block – Tom J Nowell ♦ Commented Mar 20, 2018 at 14:24
• When I remove only the <InspectorControls> code the script does work fine. – Danny Cooper Commented Mar 20, 2018 at 15:14
• here you can find your answer – Muhammad Omran Commented Dec 28, 2018 at 22:57

3 Answers 3

TextControl is from wpponents not wp.blocks.

const {
    registerBlockType,
    RichText,
    AlignmentToolbar,
    BlockControls,
    InspectorControls,
} = wp.blocks;
const {
    TextControl
} = wpponents;

Changing that I was able to get your block to work fine instead of error in Gutenberg 2.2.0.

InspectorControls is deprecated as of v2.4

https://github/WordPress/gutenberg/blob/9ebb918176c1efd0c41561d67ea3273bae5d3d6a/docs/deprecated.md#L15

wp.blocks.InspectorControls.* components removed. Please use wpponents.* components instead.

This is right at the top of your code:

const {
    registerBlockType,
    RichText,
    AlignmentToolbar,
    BlockControls,
    InspectorControls,
    TextControl
} = wp.blocks;

Specifically:

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

This is deprecated and won't work, as the deprecated doc on the Gutenberg repo says so:

wp.blocks.InspectorControls.* components removed. Please use wpponents.* components instead.

Not sure how many people also got stuck here. There are 2 files you need to edit, if your folder structure for the plugin is as follows

my-guten-block
|-> /src
||-> block.js
|-> plugin.php

The plugin.php file you will need to add the dependency of wp-editor when enqueuing the script

const dependencies = array('wp-editor');

wp_enqueue_script( handle: 'my-guten-block',
                   src: plugin_dir_url(__FILE__) . 'src/block.js',
                   dependencies)

Then you can add to the block.js file

const { InspectorControls } = wp.editor

And use as needed.