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

像gutenberg内部块这样的块只能在一个块中使用一次

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

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

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

Answer 2

首先，您在问题中写的不是gutenberg块。您提供给registerBlockType函数的不是块。古腾堡（Gutenberg）阻止了优美的短代码，如下所示：

<!-- wp:image -->
<figure class="wp-block-image"><img src="source.jpg" alt="" /></figure>
<!-- /wp:image -->

或者这个：

<!-- wp:latest-posts {"postsToShow":4,"displayPostDate":true} /-->

第一个称为静态块，因为它包含其内容。第二个称为动态块，因为它是自闭块，没有内容。注册块时，将从提供的php回调中检索内容。

Gutenberg使用React将块的视觉表示打印到编辑器屏幕上。设置对象上的edit方法应返回一个react元素，该元素将用于在编辑器中为块生成视觉表示。 save方法还应该返回react元素，但是该元素将呈现为静态html并保存到数据库<figure class="wp-block-image"><img src="source.jpg" alt="" /></figure>中。现在，动态块没有返回元素，因为它们返回null，因此它们中没有内容，这就是为什么它们是自封闭的。当服务器响应请求时，它将获取存储在数据库中的块，并检查它是静态还是动态块。如果它是静态的，则它本身具有内容，因此将返回内容。如果它是动态的，则将调用注册的回调函数并返回其返回值。

现在，要回答您的问题，保存和编辑功能应返回react元素。 react元素必须具有单个root元素，但是inner元素可以是任何像这样的常规html：

<div>
  <h1>Hello world</h1>
  <p>This is a sentence</p>
</div>

这是出于性能原因。 DOM操作非常昂贵，这就是为什么它只有一个进入DOM的入口点的原因。这就是为什么它非常快的原因。然后，它具有自己的DOM，整个树驻留在内存中。当发生更改时，React将遍历其DOM树并仅呈现更改的分支，而不会对每一个小的更改都绘制整个树。

重要的细节是上面的代码，看起来像html，但不是，它是jsx。 React无法直接呈现html。像babel这样的编译器会将Jsx编译为react元素。

React上还有createElement方法，可用于创建react元素。 wp重新导出此方法。

您可以在另一个元素中渲染一个react元素。没有学习的反应，您将无法完全掌握障碍物的力量或潜力。 React库不是那么大。一旦掌握了其背后的想法，您就可以学到足够的知识，在一两个星期内就可以提高工作效率。

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

2 个答案: