在Gutenberg editor中注册新块后,它工作正常,直到保存/发布帖子,前端的输出也正常,但刷新编辑屏幕后,block显示块验证错误:
Content generated by `save` function:
Content retrieved from post body:
<div class="wp-block-gutenberg-examples-post-block3 slider-item"><img src="http://127.0.0.1/wordpress_test/wp-content/uploads/2021/11/41QuqNH75-L.SY344_BO1204203200.jpg" dataid="146"/><img src="http://127.0.0.1/wordpress_test/wp-content/uploads/2021/11/41CoI-EUQML.SX258_BO1204203200.jpg" dataid="149"/></div>
Block validation: Block validation failed for `gutenberg-examples/post-block3`
以下是注册新块的方式:
blocks.registerBlockType( \'gutenberg-examples/post-block3\', {
title: \'post: Controls\',
icon: \'universal-access-alt\',
category: \'common\',
attributes: {
imgUrl: {
type: \'array\',
source: \'query\',
selector: \'.slider-item\',
default: [],
query:{
mediaID: {
type: \'number\',
source: \'attribute\',
attribute: \'data-id\',
selector: \'img\',
},
mediaURL: {
type: \'string\',
source: \'attribute\',
attribute: \'src\',
selector: \'img\',
},
}
},
},
edit: function( props ) {
function selectImage(value) {
props.setAttributes({
imgUrl: value.map(function(val){return{mediaURL:val.url,mediaID:parseInt( val.id, 10 )}}),
});
}
return el( Fragment, {className: props.className},
el( InspectorControls, {},
el( PanelBody, { title: \'Form Settings\', initialOpen: true },
el(MediaUpload,
{//onSelectImages
onSelect: selectImage,
multiple: true,
allowedTypes: \'image\',
gallery:true,
value:props.attributes.imgUrl.map(function(val){
return val.mediaID;
}),
render(renderProps) {
return el(\'button\',
{
onClick: renderProps.open,
},
\'upload image\',
)
}
},
null
),
),),
);
},
save: function( props ) {
return el(\'div\',{className: \'slider-item\'},props.attributes.imgUrl.map(function(data){
return el(\'img\',
{
src: data.mediaURL,
\'data-id\':data.mediaID,
},
null
);
}),
);
},
} );