我想创建一个简单的网格。您应该得到两列(稍后更多)来将内容放在其中。但不仅仅是简单的文本。所有内容类型都应可用
我的编辑功能
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。
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网友: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
选项,并说它只能插入到容器块中。
这也意味着子块具有属性,并且可以选择。这意味着您可以添加宽度/高度/样式等选项。
如果需要限制子区域的数量,可以使用模板预填充子块并将其锁定,以便无法添加或删除它们