Uncategorized, WordPress

How to enable Inner Blocks in your Gutenberg Block

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

Gutenberg Inner Blocks

You will find all the Gutenberg code on their Github page. It putting  the others 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 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 registered 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.

You Might Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *