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

时间:2018-09-25 22:48:00

标签: wordpress-gutenberg wordpress-4.9

我正在写信,看是否还有一种“ WordPress”方式可以将用Gutenberg创建的块包装在WordPress中。

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

这是在div中包装块元素的可接受方法吗?我的方法可以按我的意愿工作,但我想知道是否有我没有看到的推荐替代方法?

1 个答案:

答案 0 :(得分:0)

您正在寻找的是innerblock。有点像是将块组合在一起的包装器。

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

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

您可以创建阻止并将其添加到此允许的阻止列表中。您将在几个块周围有一个父包装。