Group block without inner wrapper

When I use a “group” block it automatically adds an inner wrapper:

<div class="wp-block-group">
  <div class="wp-block-group__inner-container">
    ...
  </div>
</div>

I don’t want the inner wrapper as it interferes with bootstrap-related css. I just want a div.

Is there a way to prevent its addition? I can obviously remove it in a script, but is there a way to modify the core to stop this behavior?

1 Answer
1

I did this in the function.php of my theme and it worked like a charm.

Note: I am only missing the id, maybe someone can share a solution for that too.

function custom_render_block_core_group (
    string $block_content, 
    array $block
): string 
{
    if (
        $block['blockName'] === 'core/group' && 
        !is_admin() &&
        !wp_is_json_request()
    ) {
        $html="";
        $tag = $block['attrs']['tagName'] ?? 'div';

        $html .= '<' . $tag . ' class="' . $block['attrs']['className'] . '">' . "\n";

        if (isset($block['innerBlocks'])) {
            foreach ($block['innerBlocks'] as $inner_block) {
                $html .= render_block($inner_block);
            }
        }

        $html .= '</' . $tag . '>' . "\n";

        return $html;
    }

    return $block_content;
}

add_filter('render_block', 'custom_render_block_core_group', null, 2);

Credits and original solution here

Leave a Comment