古腾堡 InnerBlocks 的“无法读取未定义的属性 'getEditedPostAttribute'”答案

【问题标题】："Cannot read property 'getEditedPostAttribute' of undefined" for InnerBlocks in Gutenberg古腾堡 InnerBlocks 的“无法读取未定义的属性 'getEditedPostAttribute'”
【发布时间】：2019-10-01 14:32:47
【问题描述】：

我正在尝试在 WordPress 中为 Gutenberg 编辑器实现一个块组件。在那里，我想使用 InnerBlocks component，例如 Wordpress 本身提供的列组件。

当我尝试开始使用该组件时，我总是在前端得到同样的错误：

在控制台中我收到消息：

TypeError: Cannot read property 'getEditedPostAttribute' of undefined
    at script.build.js?ver=1:27811
    at getNextMergeProps (script.build.js?ver=1:103469)
    at new ComponentWithSelect (script.build.js?ver=1:103487)
    at zf (react-dom.min.js?ver=16.6.3:69)
    at Mf (react-dom.min.js?ver=16.6.3:87)
    at ph (react-dom.min.js?ver=16.6.3:98)
    at eg (react-dom.min.js?ver=16.6.3:125)
    at fg (react-dom.min.js?ver=16.6.3:126)
    at wc (react-dom.min.js?ver=16.6.3:138)
    at fa (react-dom.min.js?ver=16.6.3:137)

我已经根据这个文档here实现了类似的：

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

import {TextControl} from '@wordpress/components';
import {InnerBlocks} from '@wordpress/block-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>
        );
    }
});

我现在的问题是，还有其他人有这个问题吗？或者我怎样才能使这个组件工作？

【问题讨论】：

如果你没有在代码中显示函数 getEditedPostAttribute 所在的部分，那么很难猜出它做错了什么
嗨@josemartindev，react-dom.min.js 中抛出了错误。但我想它必须在 @wordpress/block-editor 包中。

标签： javascript wordpress reactjs wordpress-gutenberg

【解决方案1】：

所以我自己发现了错误。我再次检查了来源script.build.js，发现以下几行

var _select2 = select('core/editor'),
      getEditedPostAttribute = _select2.getEditedPostAttribute;

我只使用了@wordpress/block-editor 包。所以我现在将以下包添加到 script.js 文件中并再次运行它。

npm install @wordpress/editor

在 script.js 中

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

错误现在消失了，但不幸的是我得到了一个新的。

【讨论】：

【解决方案2】：

我刚刚遇到这个错误，我不确定我正在使用的 WordPress 实例是否使用 Gutenberg，但我可以通过禁用 Yoast SEO 插件来消除错误，正如建议的 here。

【讨论】：