Wordpress-gutenberg -块验证:预期文本
我正在建设一个古腾堡块插件，我被困在简单的两场结构。问题是保存函数工作正常，但是编辑函数有问题。当我重新加载页面时，我会得到以下错误：“此块包含意外或无效的内容。”
在浏览器控制台中，我得到以下错误：
块验证:预期文本lkjhlkjhlkjh，saw poiupoiupoiu。块验证：protex-contact/g-block块验证失败(对象{名称："Protex -联系人/g-块“，标题：”Protex konakt"，图标：{…)}，类别：“公共”，属性：{…}，编辑:编辑( )，保存: 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,
} ),
);
},
} );回答 1
WordPress Development用户
发布于 2019-03-02 16:46:59
问题在于你的选择器：
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中找到正确的值。您可以通过使用已经在这些段落上使用的类来做到这一点：
attributes: {
content: {
type: 'string',
source: 'html',
selector: 'p.prtx_contact_name',
},
content2:{
type: 'string',
source: 'html',
selector: 'p.prtx_contact_address',
},
},https://wordpress.stackexchange.com/questions/330461
复制相似问题
腾讯云开发者
