TypeError: невозможно прочитать свойство innerBlocks со значением null для InnerBlocks в Гутенберге

Недавно я задал вопрос по той же теме . Там я сам нашел проблему. Но, к сожалению, у меня появилась новая ошибка:

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)

Итак, я пробовал это с тем же кодом, но у меня не получается:

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

Затем я проверил встроенный файл script.js, который встроен как плагин. Здесь мы имеем следующую ситуацию, когда this.props.block равно 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
    });
  }
}

ОБНОВЛЕНИЕ

Переменная this.props имеет следующие переменные:

Переменные this.props

Кто-нибудь сталкивается с такой же проблемой или есть обходной путь?


reactjs javascript wordpress wordpress-gutenberg
person Julian Schmuckli    schedule 16.05.2019    source источник
comment
Я не понимаю, где вы проезжаете «блокирующую» опору.   -  person rrd    schedule 16.05.2019
comment
@rrd Я попытался установить атрибут для компонента InnerBlocks, но это не сработало. Похоже на внутренний prop после процесса сборки. Я обновил свой вопрос скриншотом, на котором показан объект this.props.   -  person Julian Schmuckli    schedule 16.05.2019
comment
Кажется, this.props.block имеет значение null, поэтому innerBlocks там никогда не будет. Вот почему вы получаете ошибку - на самом деле сама ошибка говорит вам то же самое.   -  person rrd    schedule 16.05.2019
comment
@rrd, это правильно, я это тоже уже заметил. Но почему это block null. У меня нет возможности определить этот объект, кроме этих атрибутов, как описано на этом сайте: ibenic.com/enable-inner-blocks-gutenberg/#gist91608525   -  person Julian Schmuckli    schedule 16.05.2019

Ответы (1)


arrow_upward
1
arrow_downward

Опять же, я решил свой вопрос. Проблема, в конце концов, для меня непонятна, но это сработало.

Что я сделал сейчас, так это просто использовал wp.editor в качестве экземпляра импорта для компонента InnerBlocks. Теперь он загружает полный редактор InnerBlocks Editor, и теперь я могу добавлять в него пользовательские блоки.

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";
person Julian Schmuckli    schedule 17.05.2019