Add Container Div to every Gutenberg-Block in WordPress

Question

I'm using the Gutenberg editor and the Bootstrap CSS framework. Per default, there is no container or something like this around a Gutenberg block.

Some of the blocks have an alignwide and alignfull option to add something like a container around them. These options are good for cover images or paragraphs.

But an headline block has (per default) not such an option.

And I would love to add an extra checkbox to every Gutenberg block to toggle an extra container div around the it. Not just a class.

I found something to add an extra style to every Gutenberg blog: https://www.billerickson.net/block-styles-in-gutenberg/

Here's the code from there:

wp.domReady( () => {

    wp.blocks.registerBlockStyle( 'core/heading', {
        name: 'default',
        label: 'Default',
        isDefault: true,
    } );

    wp.blocks.registerBlockStyle( 'core/heading', {
        name: 'alt',
        label: 'Alternate',
    } );

} );

It works well, to give the block an additional class/style. But it doesn't wrap something around the block.

Is there any option to add something like an container toggle (adds div with .container class) to a block?

Answer 1

If someone also need this (like me) nowadays WordPress already has another filter that is easier to implement called render_block

https://developer.wordpress.org/reference/hooks/render_block/

here is an example

    function wporg_block_wrapper( $block_content, $block ) {
        if ( $block['blockName'] === 'core/paragraph' ) {
            $content = '<div class="wp-block-paragraph">';
            $content .= $block_content;
            $content .= '</div>';
            return $content;
        } elseif ( $block['blockName'] === 'core/heading' ) {
            $content = '<div class="wp-block-heading">';
            $content .= $block_content;
            $content .= '</div>';
            return $content;
        }
        return $block_content;
    }

    add_filter( 'render_block', 'wporg_block_wrapper', 10, 2 );