Wordpress Gutenberg inner blocks

In this article we’ll explore a common approach to adding nested inner blocks in Gutenberg.

Import the inner block props

import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';

Set the variable

const innerBlocksProps = useInnerBlocksProps();

On the view file, just add your markup

<div {...blockProps}>
  <div>
    <div {...innerBlocksProps} />
  </div>
</div>