4

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)
  • 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 Mar 20 '18 at 14:24
  • When I remove only the <InspectorControls> code the script does work fine. – Danny Cooper Mar 20 '18 at 15:14
  • here you can find your answer – Biskrem Muhammad Dec 28 '18 at 22:57
6

TextControl is from wp.components not wp.blocks.

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

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

enter image description here

5

InspectorControls is deprecated as of v2.4

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

wp.blocks.InspectorControls.* components removed. Please use wp.components.* 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 wp.components.* components instead.

  • I've changed it to this which I believe is correct (with reference to Gutenberg GH structure: const { registerBlockType, RichText, InspectorControls } = wp.blocks; const { AlignmentToolbar, BlockControls, TextControl, } = wp.components; However, this section still seems to cause the script to break: { !! focus && ( <InspectorControls> ... </InspectorControls> ) }, – Danny Cooper Mar 20 '18 at 17:14
  • Notice the first thing your script does, it imports InspectorControls from wp.blocks, GB deprecated that, it won't work, read the doc it says exactly what to use instead – Tom J Nowell Mar 20 '18 at 17:47
  • Tom, apologies if if I’m completely misunderstanding. But doesn’t the documentation state that the controls have been moved to /components but InspectorControls itself is still /block ? – Danny Cooper Mar 20 '18 at 18:18
  • 1
    You still have InspectorControls in blocks, that's deprecated. For what to replace it with and be sure it's working, i would ask on github, that's the place for GB questions. It's not out of scope here, but the expertise isn't quite here yet as GB is new and in flux – Tom J Nowell Mar 20 '18 at 18:21
  • in here you gonna find What's changed, and in here you can find a walk though – Biskrem Muhammad Dec 28 '18 at 22:55
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.