I am working on a plugin for a client and am coming across an interesting issue after saving and reloading the page. Since I have had a hard time finding any actual documentation, I have been modifying examples from: /. As a result, I get this error:
blocks.min.js?ver=6.0.4:2 Block validation: Block validation failed for
library-plugin/feature-snapshot({name: "library-plugin/feature-snapshot", title: "Feature Snapshot", icon: {…}, category: "layout", attributes: {…}, …}).Expected:
<div class="wp-block-library-plugin-feature-snapshot undefined file-wrapper"><a class="icon-snapshot-btn large" href="/wp-content/plugins/library-plugin/assets/images/snapshot-100x100.jpg" target="_blank"><img src="/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>Actual:
<div class="wp-block-library-plugin-feature-snapshot undefined file-wrapper"><a class="icon-snapshot-btn large" href="/wp-content/uploads/Plugin-Indirect-18.3-Release-Preview.pdf" target="_blank"><img src="/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>
The code is as following:
(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.wpponents,
window._,
);
I am working on a plugin for a client and am coming across an interesting issue after saving and reloading the page. Since I have had a hard time finding any actual documentation, I have been modifying examples from: https://github/WordPress/gutenberg-examples/. As a result, I get this error:
blocks.min.js?ver=6.0.4:2 Block validation: Block validation failed for
library-plugin/feature-snapshot({name: "library-plugin/feature-snapshot", title: "Feature Snapshot", icon: {…}, category: "layout", attributes: {…}, …}).Expected:
<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>Actual:
<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>
The code is as following:
(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.wpponents,
window._,
);
I figured out that I was passing the wrong information to the attributes. I changed it to this and it started working:
attributes: {
mediaID: {
type: 'number',
},
mediaURL: {
type: 'string',
source: 'attribute',
selector: 'a',
attribute: 'href',
},
},