How to wrap block elements in divs in WordPress Gutenberg plugin

Question

I am writing to see if there is a more 'WordPress' way to wrap blocks created with Gutenberg in WordPress.

My approach, thus far, has been to use the 'HTML block' to add an opening div, then I create the block and finally, I close the div with another HTML block.

Is this an acceptable way to wrap block elements in divs? My method works as I'd like but I'm wondering if there is a recommended alternative I have not seen?

Answer 1

What you are looking for is innerblock. It's sort of a wrapper for blocks to group them together.

This what the second phase of Gutenberg development will focus on. Devs can create a parent block with predefined innerblock to smooth the page setup process for users.

import { registerBlockType } from '@wordpress/blocks';
import { InnerBlocks } from '@wordpress/editor';

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

registerBlockType( 'my-plugin/my-block', {
    // ...

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

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

You can create block and add them to this allowed block list and that way. You will have a parent wrapper around couple of blocks.