我正在为一个客户端开发插件,在保存和重新加载页面后遇到了一个有趣的问题。由于我很难找到任何实际的文档,我一直在修改以下示例:https://github.com/WordPress/gutenberg-examples/. 因此,我得到以下错误:
块。min.js?版本=6.0.4:2块验证:的块验证失败library-plugin/feature-snapshot
({名称:“库插件/功能快照”,标题:“功能快照”,图标:{…},类别:“布局”,属性:{…},…})。
预期:
<div class="wp-block-library-plugin-feature-snapshot undefined file-wrapper"><a class="icon-snapshot-btn large" href="https://library.plugin.testing/wp-content/plugins/library-plugin/assets/images/snapshot-100x100.jpg" target="_blank"><img src="https://library.plugin.testing/wp-content/plugins/library-plugin/assets/images/snapshot-100x100.jpg"/><h2>Feature Snapshot</h2><p>A summary listing of new features and functionality. This is a great toolto determine what changes apply to your organization</p></a></div>
实际值:
<div class="wp-block-library-plugin-feature-snapshot undefined file-wrapper"><a class="icon-snapshot-btn large" href="https://library.plugin.testing/wp-content/uploads/Plugin-Indirect-18.3-Release-Preview.pdf" target="_blank"><img src="https://library.plugin.testing/wp-content/plugins/library-plugin/assets/images/snapshot-100x100.jpg"/><h2>Feature Snapshot</h2><p>A summary listing of new features and functionality. This is a great toolto determine what changes apply to your organization</p></a></div>
代码如下:
(function (blocks, editor, i18n, element, components, _) {
let el = element.createElement;
let RichText = editor.RichText;
let MediaUpload = editor.MediaUpload;
blocks.registerBlockType(\'library-plugin/feature-snapshot\', {
title: i18n.__(\'Feature Snapshot\', \'library-plugin\'),
icon: \'index-card\',
category: \'layout\',
attributes: {
mediaID: {
type: \'number\',
},
mediaURL: {
type: \'string\',
source: \'attribute\',
selector: \'img\',
attribute: \'src\',
},
},
edit: function (props) {
let attributes = props.attributes;
let onSelectFile = function (media) {
return props.setAttributes({
mediaURL: media.url,
mediaID: media.id,
});
};
return (
el(\'div\', {className: props.className + \' file-wrapper\'},
el(\'a\', {
className: \'icon-snapshot-btn large\',
href: attributes.mediaURL,
target: \'_blank\'
},
el(\'img\', {
src: window.featureSnapshotBlocks.pluginUrl
+ \'/assets/images/snapshot-100x100.jpg\'
}),
el(\'h2\', {}, i18n.__(\'Feature Snapshot\', \'library-plugin\')),
el(\'p\', {}, i18n.__(\'A summary listing of new features and functionality. This is a great tool\'
+ \'to determine what changes apply to your organization\')),
el(MediaUpload, {
onSelect: onSelectFile,
value: attributes.mediaURL,
render: function (obj) {
return el(
components.Button,
{
className: \'button button-large\',
onClick: obj.open
},
!attributes.mediaURL
? i18n.__(\'Upload/Select File\', \'library-plugin\')
: i18n.__(\'Change File\', \'library-plugin\')
);
}
}),
)
)
);
},
save: function (props) {
let attributes = props.attributes;
return (
el(\'div\', {className: props.className + \' file-wrapper\'},
el(\'a\', {
className: \'icon-snapshot-btn large\',
href: attributes.mediaURL,
target: \'_blank\'
},
el(\'img\', {
src: window.featureSnapshotBlocks.pluginUrl
+ \'/assets/images/snapshot-100x100.jpg\'
}),
el(\'h2\', {}, i18n.__(\'Feature Snapshot\', \'library-plugin\')),
el(\'p\', {}, i18n.__(\'A summary listing of new features and functionality. This is a great tool\'
+ \'to determine what changes apply to your organization\')),
)
)
);
},
});
})(
window.wp.blocks,
window.wp.editor,
window.wp.i18n,
window.wp.element,
window.wp.components,
window._,
);