古腾堡-一种块状类型的多个内部块

Question

我正在尝试使自定义列阻止，因为gutenberg使用的wordpress默认不是我所需要的。

因此，我查看了它的工作方式，它使用带有布局定义的InnerBlocks块，但是无法为列指定html标签和类，因此对我来说毫无用处。

然后，我决定使用map循环出列，效果很好，然后我在每列内部添加了InnerBlocks组件，以允许向该列插入其他块，但是问题是在每列中InnerBlocks的内容是共享的，所以我试图将每个InnerBlock和column的键属性设置为唯一，并且它们的内容仍然共享（不，我不使用共享块）。

好像gutenberg在每一列中都使用了相同的InnerBlocks实例。

我正在尝试构建一个块类型，您可以在其中动态添加列，并在每列中添加带有一些信息的“卡片”。

为了让我知道我在做什么，这是edit函数的返回：

<section className="infonav">
            <div className="infonav__container">
                <div>
                    <button onClick={onAddBox}>{__('Add column', 'zmg-blocks')}</button>
                </div>
                <div className="infonav__row">
                    {[...new Array(columns).keys()].map((item, index) => {
                        return (
                                <div className="infonav__row__col" key={"info_cols"+index}>
                                    <div>
                                        <button onClick={onRemoveBox.bind(index)}>
                                            {__('Remove', 'zmg-blocks')}
                                        </button>
                                    </div>
                                    <InnerBlocks key={"info_boxes"+index}/>
                                </div>
                        );
                    })}
                </div>
            </div>
        </section>

谢谢

Answer 1

好像古腾堡内部块只能在一个块中使用一次

注意：一个块最多可以分别在编辑和保存时呈现单个 InnerBlocks 和 InnerBlocks.Content 元素。要创建嵌套块的不同排列，请创建一个单独的块类型，该类型呈现其自己的 InnerBlocks 并指定为唯一的 allowedBlocks 类型。

来源：https ://github.com/WordPress/gutenberg/tree/master/packages/block-editor/src/components/inner-blocks

您需要创建另一个自定义块（仅适用于列）以及此块，该块也在其中使用 Innerblock，以便其他块可以嵌套在其中。您可以使用 allowedBlocks 只允许您的自定义列在此块中