时间戳

首页 > 解决方案 > 如何在 WordPress Gutenberg 插件的 div 中包装块元素

wordpress-gutenberg - 如何在 WordPress Gutenberg 插件的 div 中包装块元素

问题描述

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

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

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

标签： wordpress-gutenbergwordpress-4.9

解决方案

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

这是古腾堡第二阶段开发的重点。开发人员可以使用预定义的内部块创建父块，以平滑用户的页面设置过程。

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>
        );
    }
} );

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

推荐阅读