如何在 WordPress Gutenberg 插件的 div 中包装块元素答案

【问题标题】：How to wrap block elements in divs in WordPress Gutenberg plugin如何在 WordPress Gutenberg 插件的 div 中包装块元素
【发布时间】：2019-03-01 15:13:59
【问题描述】：

我写信是想看看是否有更“WordPress”的方式来包装在 WordPress 中使用 Gutenberg 创建的块。

到目前为止，我的方法是使用“HTML 块”添加一个打开的 div，然后创建该块，最后用另一个 HTML 块关闭该 div。

这是在 div 中包装块元素的可接受方式吗？我的方法可以按我的意愿工作，但我想知道是否有我没见过的推荐替代方法？

【问题讨论】：

标签： wordpress-gutenberg wordpress-4.9

【解决方案1】：

您正在寻找的是内部块。它是一种将块组合在一起的包装器。

这就是 Gutenberg 第二阶段开发的重点。开发人员可以使用预定义的内部块创建父块，以使用户的页面设置过程更加顺畅。

import { registerBlockType } from '@wordpress/blocks';
import { InnerBlocks } from '@wordpress/editor';

const ALLOWED_BLOCKS = [ 'core/image', 'core/paragraph' ];
<InnerBlocks
    allowedBlocks={ ALLOWED_BLOCKS }
/>

registerBlockType( 'my-plugin/my-block', {
    // ...

    edit( { className } ) {
        return (
            <div className={ className }>
                <InnerBlocks />
            </div>
        );
    },

    save() {
        return (
            <div>
                <InnerBlocks.Content />
            </div>
        );
    }
} );

您可以创建阻止并将它们添加到此允许的阻止列表中，并且以这种方式。您将在几个块周围有一个父包装器。

【讨论】：