CODEWITHSUNDEEP
wordpressreactjswordpress-gutenberggutenberg-blocks
Cray
Cray

Reputation: 5483

Add Container Div to every Gutenberg-Block in WordPress

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?

Upvotes: 2

Views: 5332

Answers (3)

Rodolfo Estima Rodrigues
Rodolfo Estima Rodrigues

Reputation: 106

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 );

Upvotes: 8

BonisTech
BonisTech

Reputation: 431

You are probably gonna have to use the blocks.getSaveElement to wrap the element

https://developer.wordpress.org/block-editor/developers/filters/block-filters/#blocks-getsaveelement

function modifyGetSaveContentExtraProps( element, blockType, attributes ) {
    return (
        <div className = 'heading-wrapper' >
            { element }
        </div>
    );
}


wp.hooks.addFilter(
    'blocks.getSaveElement',
    'slug/modify-get-save-content-extra-props',
    modifyGetSaveContentExtraProps
);

Upvotes: 1

Vortac
Vortac

Reputation: 568

It is possible to add a wrapper to a core block by using a block filter but it isn’t that simple and I would not recommend to add a modification to all core blocks. A much simpler and more flexible solution would be to add a custom wrapper block that accepts InnerBlocks (from wp.editor) as childs (you can even define which blocks to accept) and set support for align options (in the toolbar) and an anchor/id in the block settings sidebar. The class for the wrapper will be automatically created from your block name. You can then use your custom wrapper block only if you need it and put every other block inside of it (a headline block for example).

Upvotes: 2

Related Questions