我使用自定义块生成快照代码，然后呈现HTML。
当我添加块并保存帖子时，一切都正常，块用其默认值呈现短代码。
当我更改一些值时，post会无误保存并在前端工作。
但是，当我重新加载帖子编辑页面时，会出现以下错误：
Block validation: Block validation failed for `fare/list-posts` (
Object { name: "fare/list-posts", icon: {…}, attributes: {…}, keywords: [], save: save(t), title: "List Posts", category: "common", edit: edit(e)
}
).
Content generated by `save` function:
[list-posts type="post" category="" count="6"][/list-posts]
Content retrieved from post body:
[list-posts type="post" category="" count="12"][/list-posts]
验证需要默认值，但会使用新值获取新编辑的短代码。
以下是我的JavaScript代码：
/* This section of the code registers a new block, sets an icon and a category, and indicates what type of fields it\'ll include. */
wp.blocks.registerBlockType(\'fare/list-posts\', {
title: \'List Posts\',
icon: \'tickets\',
category: \'common\',
attributes: {
posttype: {
type: \'string\',
default: \'post\'
},
postcategory: {
type: \'string\',
default: \'\'
},
postcount: {
type: \'number\',
default: 6
},
},
/* This configures how the content and color fields will work, and sets up the necessary elements */
edit: function(props) {
function updatePostType(event) {
props.setAttributes({posttype: event.target.value})
}
function updateCategory(event) {
props.setAttributes({postcategory: event.target.value})
}
function updatePostCount(event) {
props.setAttributes({postcount: event.target.value})
}
return React.createElement("div",{ style: { border: \'2px solid #aaaaaa\', \'border-radius\': \'3px\', padding: \'12px\'}},
React.createElement( "h3", null, "List Posts" ),
React.createElement( "span", { style: { margin: \'0\' }}, "Post Type" ),
React.createElement( "input", { type: "text", value: props.attributes.posttype, onChange: updatePostType, style: {} }),
React.createElement( "hr" ),
React.createElement( "span", { style: { margin: \'0\' }}, "Post Category" ),
React.createElement( "input", { type: "text", value: props.attributes.postcategory, onChange: updateCategory, style: {} }),
React.createElement( "hr" ),
React.createElement( "span", { style: { margin: \'0\' }}, "Post Count" ),
React.createElement( "input", { type: "number", value: props.attributes.postcount, onChange: updatePostCount, style: {} })
)
},
save: function(props) {
//
return \'[list-posts type="\'+props.attributes.posttype+\'" category="\'+props.attributes.postcategory+\'" count="\'+props.attributes.postcount+\'"][/list-posts]\';
}
})
有人能告诉我我做错了什么吗？
非常感谢。
最合适的回答,由SO网友:Sally CJ 整理而成
简而言之，保存属性时，请确保其类型与在块的attributes 选项
The
docs 表示：
最后，确保在设置属性时尊重数据的类型，因为框架不会自动执行meta的类型转换。在块属性中键入错误将导致post即使在保存后仍保持脏状态（cf.isEditedPostDirty, hasEditedAttributes). 例如，如果authorCount 是整数，请记住，事件处理程序可能传递不同类型的数据，因此应显式转换该值：
function onChange( event ) {
props.setAttributes( { authorCount: Number( event.target.value ) } );
}
所以问题在于
postcount 属性，该属性定义为数字，但另存为字符串(
event.target.value, 在您的情况下，是一个字符串）。
现在使用您的代码，如果您设置postcategory 到foo 以及postcount 除了6, e、 g。3, 块HTML输出为：
<!-- wp:fare/list-posts {"postcategory":"foo"} -->
[list-posts type="post" category="foo" count="3"][/list-posts]
<!-- /wp:fare/list-posts -->
但事实上应该是这样的；请注意
"postcount":3:
<!-- wp:fare/list-posts {"postcategory":"foo","postcount":3} -->
[list-posts type="post" category="foo" count="3"][/list-posts]
<!-- /wp:fare/list-posts -->
下面是有问题的代码：
// In updatePostCount()
props.setAttributes({postcount: event.target.value})
应写为：
props.setAttributes({postcount: Number( event.target.value )})
也就是说，您需要显式地将值转换为一个数字，而不是按原样传递值（字符串）。
