Skip to content

Instantly share code, notes, and snippets.

@nico-martin
Last active February 21, 2021 22:39
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nico-martin/2592eba57775264f848a1876d82a74f2 to your computer and use it in GitHub Desktop.
Save nico-martin/2592eba57775264f848a1876d82a74f2 to your computer and use it in GitHub Desktop.
Gutenberg InnerBlock with renderAppender
const {TextControl, IconButton} = wp.components;
const {InnerBlocks} = wp.editor;
const {__} = wp.i18n;
const {dispatch} = wp.data;
const {createBlock, registerBlockType} = wp.blocks;
registerBlockType('prefix/container', {
title: 'Container',
icon: 'category',
category: 'category',
edit(props): {
return (
<div className="b-container">
<InnerBlocks
allowedBlocks={['prefix/myblock']}
template={[['prefix/myblock']]}
renderAppender={() => (
<IconButton icon="plus" className="button b-hellotab__append-tab" onClick={() => {
dispatch('core/block-editor').insertBlocks(createBlock('prefix/myblock'), 9999, this.props.clientId);
}}>
{__('Add Block')}
</IconButton>
)}
/>
</div>
);
},
save(props) {
return (
<div className="b-container">
<InnerBlocks.Content/>
</div>
);
},
});
@nico-martin
Copy link
Author

At the moment you have to use the Gutenberg Plugin instead of the Core Implementation because custom renderAppender is not yet in core.

@amir2mi
Copy link

amir2mi commented Feb 21, 2021

Thanks🙏️, man you are such a lifesaver!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment