1

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.

1
  • If your block is just a set of columns with predefined inner blocks, would this not be better as a block pattern? It seems a waste to create an entire block that's the same as existing blocks. Just pre-assemble the pattern and register it
    – Tom J Nowell
    Jan 16, 2021 at 23:08

3 Answers 3

3

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!

2
  • I changed my code. now it works
    – 180690
    Feb 25, 2019 at 14:29
  • 2
    If my answer helped you solving the problem, please accept it as answer by clicking the checkmark ;) Feb 25, 2019 at 16:18
0

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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.