customization - Add a containing DIV to core Gutenberg blocks

The design I am working with calls for each Gutenberg block to have a coloured background (white in this case) with max-width: 1160px and the content within to have max-width: 800px and centered. Similar to the image below:

Which would need a setup like this:

<main class="site-background">
    <div class="width-1160">
        <p class="width-800">Some text content...</p>
    </div>
</main>

At this time we are only using core Gutenberg blocks but the markup it produces is similar to the below, without the containing <div>:

<main class="site-background">
    <p class="width-800">Some text content...</p>
</main>

Is there a way to add a containing <div> to all Gutenberg content blocks that will be safe when core updates?

The design I am working with calls for each Gutenberg block to have a coloured background (white in this case) with max-width: 1160px and the content within to have max-width: 800px and centered. Similar to the image below:

Which would need a setup like this:

<main class="site-background">
    <div class="width-1160">
        <p class="width-800">Some text content...</p>
    </div>
</main>

At this time we are only using core Gutenberg blocks but the markup it produces is similar to the below, without the containing <div>:

<main class="site-background">
    <p class="width-800">Some text content...</p>
</main>

Is there a way to add a containing <div> to all Gutenberg content blocks that will be safe when core updates?

• customization
• block-editor

Share Improve this question asked Feb 22, 2019 at 11:17 BagseyeBagseye 6911 silver badge1212 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

I'm sure there are other ways e.g. with CSS only or Add custom class to core blocks in Gutenberg, but regarding:

Add a containing DIV to core Gutenberg blocks

one way could be with the render_block filter:

add_filter( 'render_block', function( $block_content, $block ) {
    // Target core/* and core-embed/* blocks.
    if ( preg_match( '~^core/|core-embed/~', $block['blockName'] ) ) {
       $block_content = sprintf( '<div class="some__class">%s</div>', $block_content );
    }
    return $block_content;
}, PHP_INT_MAX - 1, 2 );

to div-wrap the core blocks on the frontend.

Changing the HTML layout might affect the current style of the site.