Gutenberg Multiple InnerBlocks

Question

i would like to create a simple grid. You should get two columns (later more) to put content in there. But not only simple text. All content types should be available

My edit function

registerBlockType(
    'grids-2col', {
        title: '2 Spalten',
        icon: icon,
        category: category,
        attributes: {
            paragraphLeft: {
                type: "string",
                selector: "div"
            },
            paragraphRight: {
                type: "string",
                selector: "div"
            },
        },

        edit: function (props) {
            var attributes = props.attributes,
                className = props.className,
                setAttributes = props.setAttributes;
            var paragraphLeft = attributes.paragraphLeft,
                paragraphRight = attributes.paragraphRight;
            return [
                createElement(
                    "div",
                    { className: "main-wrapper-editor row" },
                    createElement(
                        "div",
                        {
                            className: "left col-md-6",
                        },
                        createElement(InnerBlocks, {
                            //tagName: "div",
                            className: className,
                            value: paragraphLeft,
                            onChange: function onChange(
                                newParagraphLeft
                            ) {
                                setAttributes({
                                    paragraphLeft: newParagraphLeft
                                });
                            },
                            placeholder:
                                "Inhalt linke Spalte"
                        })
                    ),
                    createElement(
                        "div",
                        {
                            className: "right col-md-6",
                        },
                        createElement(InnerBlocks, {
                            //tagName: "div",
                            className: className,
                            value: paragraphRight,
                            onChange: function onChange(
                                newParagraphRight
                            ) {
                                setAttributes({
                                    paragraphRight: newParagraphRight
                                });
                            },
                            placeholder:
                                "Inhalt rechte Spalte"
                        })
                    )
                )
            ];
        },

The Problem is that the what i write in the left box ist cloned into the right one. How ist it possible to make more than one InnerBlock.

It works fine with RichText instead of InnerBlocks.

Answer 1

You can (at the moment) not use InnerBlocks more than once within a block. However, you can bypass this by using a template for your InnerBlocks that contain Blocks which support InnerBlocks instead, like the core/column block.

Like this:

wp.element.createElement(InnerBlocks, {
      template: [['core/column',{},[['core/paragraph',{'placeholder':'Inhalt linke Spalte'}]]],['core/column',{},[['core/paragraph',{'placeholder':'Inhalt rechte Spalte'}]]]],
      templateLock: "all",
      allowedBlocks: ['core/column']});

Some time ago, i wrote a Block for a content/sidebar block with align left/right attributes, worked exactly like that.

Happy Coding!

Answer 2

You can only have 1 innerblocks, it doesn't make sense to have separate sets of children. Just like a <div></div> element only has one "inside".

The official solution is to use composition.

So do what the core/columns block does, and create a new block that can only be placed inside.

E.g. core/columns block can only contain core/column blocks. And core/column blocks can only be put inside a core/columns block.

Likewise, if you want a container with rows, you need a container block and a row block.

When building your containing block, pass the allowedBlocks prop to th InnerBlocks component.

When registering your internal block ( column/row/etc ), specify the parent option and say that it can only be inserted inside your container block.

This also means your sub-block has attributes, and can be selected. This means you can add options like width/height/style.

If you need to restrict the number of child areas, you can use a template to pre-fill the sub-blocks and lock it so that they cannot be added or removed

Answer 3

Only one Innerblocks per block instance is allowed, as described in Gutenberg official Innerblocks source documentation. A workaround for distinct arrangement is also provided.