我正在构建一个gutenberg block插件，我被困在了简单的双字段结构上。问题是save函数工作正常，但edit函数有问题。重新加载页面时，出现以下错误：“此块包含意外或无效的内容。”
在浏览器控制台中，我发现以下错误：
块验证：预期文本lkjhlkjhlkjh, 锯poiupoiupoiu. 块验证：的块验证失败protex-contact/g-block （对象{名称：“protex contact/g-block”，标题：“protex konakt”，图标：{…}，类别：“common”，属性：{…}，编辑：edit（），保存：save（）}）。
预期：
<div class="wp-block-protex-contact-g-block"><p class="prtx_contact_name">lkjhlkjhlkjh</p><p class="prtx_contact_address">lkjhlkjhlkjh</p></div>
实际值：
<div class="wp-block-protex-contact-g-block"><p class="prtx_contact_name">lkjhlkjhlkjh</p><p class="prtx_contact_address">poiupoiupoiu</p></div>
这是我的JS：
const { __ } = wp.i18n;
var el = wp.element.createElement,
registerBlockType = wp.blocks.registerBlockType,
RichText = wp.editor.RichText;
registerBlockType( \'protex-contact/g-block\', {
title: __( \'Protex konakt\', \'protex-contact-domain\' ),
icon: \'id\',
category: \'common\',
attributes: {
content: {
type: \'string\',
source: \'html\',
selector: \'p\',
},
content2:{
type: \'string\',
source: \'html\',
selector: \'p\',
},
},
edit: function( props ) {
var content = props.attributes.content,
content2 = props.attributes.content2;
function onChangeContent( newContent ) {
props.setAttributes( { content: newContent } );
}
function onChangeContent2 ( newContent2 ){
props.setAttributes( { content2: newContent2 } );
}
return el ( \'div\', { className: props.className },
el(
RichText,
{
tagName: \'p\',
className: \'prtx_contact_name\',
onChange: onChangeContent,
value: content,
}
),
el(
RichText,
{
tagName: \'p\',
className: \'prtx_contact_address\',
onChange: onChangeContent2,
value: content2,
}
),
);
},
save: function( props ) {
var content = props.attributes.content;
var content2 = props.attributes.content2;
return el ( \'div\', { className: props.className },
el( RichText.Content, {
tagName: \'p\',
className: \'prtx_contact_name\',
value: content,
} ),
el( RichText.Content, {
tagName: \'p\',
className: \'prtx_contact_address\',
value: content2,
} ),
);
},
} );
最合适的回答,由SO网友:Jacob Peattie 整理而成
问题在于选择器：
attributes: {
content: {
type: \'string\',
source: \'html\',
selector: \'p\',
},
content2:{
type: \'string\',
source: \'html\',
selector: \'p\',
},
},
您仅使用
p 对于这两个属性。
当块查看保存的HTML以验证它时，它会检查选择器的值是否与属性的值匹配。如果没有，则验证失败。
鉴于此HTML：
<div class="wp-block-protex-contact-g-block">
<p class="prtx_contact_name">lkjhlkjhlkjh</p>
<p class="prtx_contact_address">poiupoiupoiu</p>
</div>
它检查的值
content 通过查找
p, 它发现
lkjhlkjhlkjh, 这是第一个
p 标签这也是的保存值
content, 所以到目前为止情况看起来不错。
然后它查找content2 通过查看第一个p 标记，因为这是选择器lkjhlkjhlkjh. 但是，块认为content2 应该是poiupoiupoiu, 因此，它认为HTML保存不正确。
因此，您需要确保可以使用选择器在HTML中找到正确的值。您可以使用已经在这些段落中使用的类来实现这一点：
attributes: {
content: {
type: \'string\',
source: \'html\',
selector: \'p.prtx_contact_name\',
},
content2:{
type: \'string\',
source: \'html\',
selector: \'p.prtx_contact_address\',
},
},
