我很难让我的第一个容器/包装块做好行动准备。以下是我在过去几个小时学到的知识：

因为我在导入InnerBlocks 我决定使用create-guten-block 工具包。安装之后，我只需要执行npx create-guten-block. 这为我提供了相关文件的结构。现在我更改了文件src/block/block。js到以下代码：

import { registerBlockType } from \'@wordpress/blocks\';
import { InnerBlocks } from \'@wordpress/editor\';
const { __ } = wp.i18n;
registerBlockType( \'myplugin/container\', {
    title: __( \'My Plugin Container\', \'myplugin\' ),
    icon: \'universal-access-alt\',
    category: \'myplugin\',
    getEditWrapperProps: function () {
        return {
            "data-align": "full"
        };
    },
    edit: function( props ) {
        return (
            <div className={ props.className }>
                <InnerBlocks />
            </div>
        );
    },
    save: function( props ) {
        return (
            <div>
                <InnerBlocks.Content />
            </div>
        );
    },
} );

我在这第一步中使用的简单css用于前端和后端：

.wp-block-myplugin-container{
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: purple;
}

快乐的编码！

这是什么second phase of Gutenberg development 将重点放在。开发人员可以使用预定义的innerblock创建父块，以平滑用户的页面设置过程。

目前，您可以使用InnerBlocks组件。

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

这里有两个“；“容器块”；我用过。第一个是Melonpan block container. 它有很多特点。。。但如果您只需要一个基本的容器块，下面是section block 这工作做得很好。

2020年10月更新-WP 5.5.1装运时带有可用作集装箱的组块。

一些插件向Gutenberg添加了包装器/容器块。Editor Blocks 这只是一个例子。

我创建了一个自定义块，如下所示：

const { registerBlockType } = wp.blocks;
const { InnerBlocks } = wp.blockEditor;
const { Dashicon, TextControl, CheckboxControl } = wp.components;

registerBlockType(\'gutenberg/custom-container\', {
    title: \'Container\',
    description: \'Control the max-width of a content or section\',
    icon: \'slides\',
    category: \'layout\',

    attributes: {
        maxWidth: {
            type: \'number\',
            default: 0
        },
        collapse: {
            type: \'boolean\',
            default: false
        }
    },
    
    edit({attributes, setAttributes}) {
        const { maxWidth, collapse } = attributes;
        
        function setValue(value){ 
             const numberValue = parseInt(value);   
             setAttributes({ maxWidth: numberValue });
        }

        function checkCollapse(){                
            setAttributes({ collapse: !collapse });
        }

        return (
            <div className=\'custom-container\'>
                <div className="components-placeholder__label standard-wrapper">
                    <Dashicon icon="slides" />
                    Container
                </div>
                <div className=\'flex-between align-center\'>
                    <div>
                        <TextControl
                            className="default-label"
                            label="Width(px)" 
                            type="number" 
                            name="max-width"
                            value={maxWidth}
                            onChange={setValue}
                        />
                    </div>
                    <CheckboxControl
                        className="default-label"
                        heading="Collapse Padding"
                        checked={collapse}
                        onChange={checkCollapse}
                    />
                </div>
                <InnerBlocks />
            </div>
        );
    },
    save({attributes}) {
        const { maxWidth, collapse } = attributes;

        return (
            <div 
                className={!collapse ? 
                              \'custom-container\' : 
                              \'custom-container space-none\' 
                          }
                style={{ maxWidth: `${maxWidth}px`}}
            >
                <InnerBlocks.Content />
            </div>
        ); }
});