CODEWITHSUNDEEP
wordpress-gutenbergwordpress-4.9
martinpsz
martinpsz

Reputation: 117

How to wrap block elements in divs in WordPress Gutenberg plugin

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?

Upvotes: 1

Views: 3044

Answers (1)

Ashiquzzaman Kiron
Ashiquzzaman Kiron

Reputation: 525

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.

Upvotes: 1

Related Questions