我创建了一个古腾堡块，但在保存并返回帖子后，我收到以下错误：
此块包含意外或无效的内容
我没有发现任何不一致之处，我让一位朋友也检查了一下，看看有没有什么不对劲。我做错了什么？
registerBlockType(\'myblog/check-list\', {
//Built-in Attributes
title: \'Check List\',
description: \'Generate a bulleted list with green checkmarks\',
icon: \'list-view\',
category: \'design\',
//Custom Attributes
attributes: {
title: {
type: \'string\',
source: \'html\',
selector: \'h2\'
},
text: {
type: \'string\',
source: \'html\',
selector: \'p\'
},
titleColor: {
type: \'string\',
default: \'#383838\'
},
checkListItemOne: {
type: \'string\',
source: \'html\',
selector: \'span\'
},
checkListItemTwo: {
type: \'string\',
source: \'html\',
selector: \'span\'
}
},
//Built-in Functions
edit({attributes, setAttributes}) {
const{
title,
text,
titleColor,
checkListItemOne,
checkListItemTwo,
} = attributes;
//Custom Functions
function onChangeTitle(newTitle) {
setAttributes( { title: newTitle } );
}
function onChangeText(newText) {
setAttributes( { text: newText } );
}
function onTitleColorChange(newColor){
setAttributes( { titleColor: newColor } );
}
function onChangeCheckListItemOne(newListItemOne) {
setAttributes( { checkListItemOne: newListItemOne})
}
function onChangeCheckListItemTwo(newListItemTwo) {
setAttributes( { checkListItemTwo: newListItemTwo})
}
return ([
<InspectorControls style={ { marginBottom: \'40px\' } }>
<PanelBody title={ \'Headline Color\' }>
<p><strong>Choose Title Color</strong></p>
<ColorPalette
value={titleColor}
onChange={onTitleColorChange}
/>
</PanelBody>
</InspectorControls>,
<div class="col-md-5 offset-md-1">
<div class="green-check-list-container">
<RichText
key="editable"
tagName="h2"
placeholder="Headline for check list"
value= { title }
onChange= { onChangeTitle }
style= { { color: titleColor } }
/>
<RichText
key="editable"
tagName="p"
placeholder="Additional context for the list"
value= { text }
onChange= { onChangeText }
/>
<ul class="green-check-list-items">
<li>
<RichText
key="editable"
tagName="span"
placeholder="List Item"
value= { checkListItemOne }
onChange= { onChangeCheckListItemOne }
/>
</li>
<li>
<RichText
key="editable"
tagName="span"
placeholder="List Item"
value= { checkListItemTwo }
onChange= { onChangeCheckListItemTwo }
/>
</li>
</ul>
</div>
</div>
]);
},
save({ attributes }) {
const {
title,
text,
titleColor,
checkListItemOne,
checkListItemTwo,
} = attributes;
return (
<div class="col-md-5 offset-md-1">
<div class="green-check-list-container">
<h2 style={ { color: titleColor } }>{title}</h2>
<p>{ text }</p>
<ul class="green-check-list-items">
<li>
<span>{ checkListItemOne }</span>
</li>
<li>
<span>{ checkListItemTwo }</span>
</li>
</ul>
</div>
</div>
);
}
});
最合适的回答,由SO网友:Sally CJ 整理而成
代码中的主要问题是这两个属性使用完全相同的选择器（第一个span 块内容中的元素）：
checkListItemOne: {
type: \'string\',
source: \'html\',
selector: \'span\' // same as below
},
checkListItemTwo: {
type: \'string\',
source: \'html\',
selector: \'span\' // same as above
}
这意味着块编辑器将始终使用第一个的内容
span 元素，然后生成一个；块验证失败“；类似这样的错误：
因此，请确保设置了正确的
selector 块属性的值。下面是一个使用CSS选择器的示例
element > element 和
:nth-child(n):
checkListItemOne: {
type: \'string\',
source: \'html\',
selector: \'li:nth-child(1) > span\'
},
checkListItemTwo: {
type: \'string\',
source: \'html\',
selector: \'li:nth-child(2) > span\'
}
附加问题/注释
- 块编辑器手册says:
如果HTML标记来自文本格式，如<strong> 或<em> 正在转义并显示在站点前端，这很可能是由于保存功能中存在问题。确保您的代码看起来像<RichText.Content tagName="h2" value={ heading } /> （ESNext）在save函数中，而不是简单地用<h2>{ heading }</h2>.
例如，在你的例子中，你会用这个代替<span>{ checkListItemOne }</span>:
<RichText.Content tagName="span" value={ checkListItemOne } />
class 属性，其结果为；预期属性class 值为“”"E；注意事项：<div class="col-md-5 offset-md-1" class="wp-block-myblog-check-list">
要解决此问题，请使用className 属性而非class 在您的<div>:尽管如此class 确实有效（尽管是reserved keyword in JavaScript), （当前）React文档实际says, "E要指定CSS类，请使用className 属性“；，因此，您应该在所有<div> 以及其他具有CSS类的元素。
return (
<div className="col-md-5 offset-md-1">
<div className="green-check-list-container">
... your code.
</div>
</div>
);
block editor API version 2 引入了一个名为useBlockProps, 所以我建议你在你的街区edit and save 回调。：）您的save 回调：
const blockProps = useBlockProps.save( { className: \'col-md-5 offset-md-1\' } );
return (
<div { ...blockProps }>
<div className="green-check-list-container">
... your code.
</div>
</div>
);
