While I did write up Spoiler Blocks for Gutenberg one way, I also sat down recently and rewrote it a little cleaner. The primary difference here is how I’m properly using defaults:
The Code
( function( blocks, element, editor, components ) {
const { registerBlockType } = blocks;
const { RichText } = editor;
const { createElement } = element;
const { InspectorControls } = editor;
const { SelectControl, ToggleControl } = components;
registerBlockType( 'library/spoilers', {
title: __( 'Spoiler Warning' ),
icon: 'vault',
category: 'halfelf',
customClassName: false,
className: false,
attributes: {
content: {
source: 'children',
selector: 'div',
default: 'Warning: This post contains spoilers!'
}
},
save: function( props ) {
const content = props.attributes.content;
const container = createElement(
'div', { className: 'alert alert-danger' },
React.createElement( RichText.Content, { value: content })
);
return container;
},
edit: function( props ) {
const content = props.attributes.content;
const focus = props.focus;
function onChangeSpoiler( newContent ) {
props.setAttributes( { content: newContent } );
}
const editSpoiler = createElement(
RichText,
{
tagName: 'div',
className: props.className,
onChange: onChangeSpoiler,
value: content,
focus: focus,
onFocus: props.setFocus,
}
);
return createElement(
'div', { className: 'alert alert-danger' },
editSpoiler
);
},
});
})(
window.wp.blocks,
window.wp.element,
window.wp.editor,
window.wp.components,
window.wp.i18n
);
Learning more and more about Gutenberg, and javascript, I’ve been able to iterate on the existing code and keep improving.
