0

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.

0

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!

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

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.