How to enable Inner Blocks in your Gutenberg Block

Looking for a way to enable inner blocks in your Gutenberg block? Here in this article, we will show you how to enable Inner Blocks in a Gutenberg block.

If you want to add additional blocks into your own block then you should use inner blocks. Inner blocks are Gutenberg block that allows you to add interesting blocks into your blocks. InnerBlocks exports a pair of components that can be used in block implementations to enable nested block content.

Gutenberg Inner Blocks

You will find all the Gutenberg codes on their GitHub page. It puts the other blocks inside just like a wrapper.

How to use Gutenberg Inner Blocks

To implement Gutenberg inner block code in your website initially you need to import them in the file where you want to use it.

import { InnerBlocks } from '@wordpress/editor'; // or wp.editor

The second step is to add this block inside your edit function such as JSX

edit( { className } ) {
 return (
  <div className={ className }>
   <InnerBlocks />
  </div>
  );
},

Now we need to show the other block content inside our inner blocks. So we need to call <InnerBlocks.Content/>function.

save() {
 return (
  <div>
   <InnerBlocks.Content />
  </div>
 );
}

Properties

You can add several properties in your inner block to customize the UX. The property can be an array or a string or any other block. Now I am showing you how you can add image and child blocks into your inner blocks.

<InnerBlocks allowedBlocks={ 'core/image' } />

<InnerBlocks allowedBlocks={ [ 'core/image', 'core/paragraph' ] } />

Child Blocks

Child blocks will always be allowed inside of Inner Blocks. Adding a parent property you can easily register a child block. For example:

registerBlockType( 'ibenic/child-block', {
 title: 'This is a Child Blcok',
 // Only allow in a registered parent-block:
 parent: [ 'ibenic/parent-block' ],
 ...
});

So, if you specifically set a few blocks that are allowed in the Inner Block component, the child blocks will also be available.

Wrapping Up

Following the process, you will be able to enable inner blocks in Gutenberg blocks. You can see our other articles to learn How to allow users to moderate comments in wordPress

How to edit HTML in WordPress code editor.

How to Fix “Sorry, This File Type Is Not Permitted for Security Reasons” error in WordPress.

We hope this article will help you. If you like this article please like our Facebook page.