Add Innerblock Programatically.

[abhi3315]

I developed two custom Gutenberg blocks - custom/tabs as the parent block, and custom/tab (which uses InnerBlock to add tab content) as the child block. I need to insert the child block using code, and I want to create a button in the Inspector control of custom/tabs that allows me to add the child block without affecting the content of any already-added custom/tab blocks.

[stokesman]

I need to insert the child block using code

I wonder about this. It’s not clear to me why custom/tab can’t have a template defined so the child block is automatically inserted along with the custom/tab.

If you actually do need to insert it imperatively, start with createBlock and pass its result to insertBlock. Something like:

// …admist your custom/tabs edit function…
const { insertBlock } = useDispatch(blockEditorStore);
const insertTabContent = () => {
	const newBlock = createBlock( 'core/paragraph' , { placeholder: 'this is your tab content…' } );
	insertBlock( newBlock, 0, clientIdOfTabBlock )
}
return (
	// …amidst the inspector controls…
	<Button onClick={ insertTabContent }>Content me</Button>
);