CODEWITHSUNDEEP
javascriptwordpressreactjswordpress-gutenberg
Julian
Julian

Reputation: 3869

"TypeError: Cannot read property 'innerBlocks' of null" for InnerBlocks in Gutenberg

I have recently asked a question about the same topic. There I have found the issue myself. But unfortunately, I got a new error:

TypeError: Cannot read property 'innerBlocks' of null
    at InnerBlocks.synchronizeBlocksWithTemplate (script.build.js?ver=1:149405)
    at InnerBlocks.componentDidMount (script.build.js?ver=1:149366)
    at zc (react-dom.min.js?ver=16.6.3:146)
    at wc (react-dom.min.js?ver=16.6.3:138)
    at fa (react-dom.min.js?ver=16.6.3:137)
    at ng (react-dom.min.js?ver=16.6.3:149)
    at Se (react-dom.min.js?ver=16.6.3:40)

So I have tried it with the same code but I don't get it to work:

const {registerBlockType} = wp.blocks;
const {InspectorControls, RichText, MediaUpload} = wp.editor;

import {TextControl} from '@wordpress/components';

import {InnerBlocks} from '@wordpress/editor';

let blockStyle = {
    marginTop: "25px",
    marginBottom: "25px;"
};

registerBlockType('myself/test-component', {
    title: 'Test component',
    icon: 'editor-insertmore',
    category: 'common',
    attributes: {
        title: {
            type: 'string'
        }
    },

    edit(props) {
        const {setAttributes, attributes} = props;

        function setTitle(changes) {
            setAttributes({
                title: changes
            })
        }

        return (
            <div style={blockStyle}>
                <TextControl
                    placeholder="Titel"
                    value={attributes.title}
                    onChange={setTitle}
                />
                <InnerBlocks
                    templateLock={false}
                    renderAppender={(
                        () => <InnerBlocks.ButtonBlockAppender/>
                    )}
                />
            </div>
        )
    },

    save(props) {
        const {attributes, className} = props;

        return (
            <div style={blockStyle}>
                <InnerBlocks.Content/>
            </div>
        );
    }
});

Then I have checked the built script.js file which is embedded as a plugin. There we have the following situation that the this.props.block is null. 

key: "componentDidMount",
value: function componentDidMount() {
  var innerBlocks = this.props.block.innerBlocks; // only synchronize innerBlocks with template if innerBlocks are empty or a locking all exists

  if (innerBlocks.length === 0 || this.getTemplateLock() === 'all') {
    this.synchronizeBlocksWithTemplate();
  }

  if (this.state.templateInProcess) {
    this.setState({
      templateInProcess: false
    });
  }
}

UPDATE

The variable this.props has the following variables:

Variables of this.props

Does anyone facing the same problem or have a workaround for that?

Upvotes: 1

Views: 2693

Answers (1)

Julian
Julian

Reputation: 3869

Again, I solved my own question. The problem, in the end, is for me not clear, but it worked.

What I've done now is to simply use the wp.editor as the import instance for the InnerBlocks component. With that, it loads now the complete InnerBlocks Editor and I am now able to add custom blocks in that.

const {registerBlockType} = wp.blocks;
const {InspectorControls, RichText, InnerBlocks} = wp.editor; //Imported the InnerBlocks from this source.

import {CheckboxControl, TextControl} from '@wordpress/components';

// Removed this line
// import {InnerBlocks} from "@wordpress/editor";

Upvotes: 1

Related Questions