时间戳

首页 > 解决方案 > Gutenberg - 一种块类型中的多个 InnerBlocks

wordpress - Gutenberg - 一种块类型中的多个 InnerBlocks

问题描述

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

所以我查看了它是如何工作的，它使用带有布局定义的 InnerBlocks 块，但是没有办法指定 html 标记和列的类，所以它对我来说没用。

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

看起来古腾堡在每一列中都使用了相同的 InnerBlocks 实例。

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

为了说明我在做什么，这里是编辑功能的返回：

<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>

谢谢

标签： wordpresswordpress-gutenberggutenberg-blocks

解决方案

似乎gutenberg Innerblocks只能在一个块中使用一次

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

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

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

推荐阅读