古登堡多个内部块

时间:2019-02-15 作者:180690

我想创建一个简单的网格。您应该得到两列(稍后更多)来将内容放在其中。但不仅仅是简单的文本。所有内容类型都应可用

我的编辑功能

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"
                        })
                    )
                )
            ];
        },
问题是我在左框中写的内容被克隆到了右框中。如何制作多个内部块。

它可以很好地处理RichText而不是InnerBlocks。

3 个回复
SO网友:HU ist Sebastian

目前,在一个块中不能多次使用InnerBlocks。但是,您可以通过为包含支持InnerBlocks的块的InnerBlocks使用模板来绕过此问题,例如核心/列块。

像这样:

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\']});
不久前,我为内容/侧边栏块编写了一个块,该块具有左/右对齐属性,工作方式与此完全相同。

快乐的编码!

SO网友:Lovor

每个块实例只允许一个Innerblocks,如中所述Gutenberg official Innerblocks source documentation. 还提供了一种用于不同安排的变通方法。

SO网友:Tom J Nowell

您只能有1个innerblocks,单独设置子级是没有意义的。就像一个<div></div> 元素只有一个“;“内部”;。

The official solution is to use composition.

那么做什么core/columns 块,并创建只能放置在内部的新块。

E、 g。core/columns 块只能包含core/column 块。和core/column 块只能放在core/columns

同样,如果需要一个包含行的容器,则需要一个容器块和一个行块。

构建包含块时,传递allowedBlocks 道具至thInnerBlocks 组成部分

注册内部块(列/行/等)时,请指定parent 选项,并说它只能插入到容器块中。

这也意味着子块具有属性,并且可以选择。这意味着您可以添加宽度/高度/样式等选项。

如果需要限制子区域的数量,可以使用模板预填充子块并将其锁定,以便无法添加或删除它们

相关推荐