Modifying the ACF InnerBlocks Wrapper Div

If you’re registering ACF blocks with block.json and using InnerBlocks areas, you may have noticed that InnerBlocks markup includes a wrapper div when rendered. The InnerBlocks content is wrapped in a div with a class of acf-inner-blocks-container. But how much control do you have over this? Are you able to remove it entirely or modify its class name? Let’s look at a couple options you have over how this wrapping div appears.

Remove the ACF InnerBlocks Wrapper Div

ACF has had a filter since version 6 that allows you to remove the acf-inner-blocks-container automatically inserted div. However, there is a catch. It only removes it on the front-end rendering of the InnerBlocks area. The wrapper div will still appear within the editor. If you’re wanting to remove it because it’s messing up your grids or similar, you’ll need to take that into account on the backend and make the appropriate editor adjustments.

However, if you’re interested in removing the wrapper on the front end, you can use the following filter pulled from here:

add_filter( 'acf/blocks/wrap_frontend_innerblocks', 'acf_should_wrap_innerblocks', 10, 2 );
function acf_should_wrap_innerblocks( $wrap, $name ) {
    if ( $name == 'acf/test-block' ) {
        return true;
    }
    return false;
}

You’ll see in the above example, it leaves the wrapper for acf/test-block but removes it for others. You can adjust the markup accordingly to conditionally remove the wrapper for your own specific blocks.

Personally, I leave the wrapper more often than I choose to remove it as I tend to prefer the front-end and editor markup to be as similar as possible.

Change Class Name of ACF InnerBlocks Wrapper Div

In addition to controlling whether the wrapper div appears on the front-end, you can also modify the class of this wrapper div. The wrapper div for ACF has the default class of acf-inner-blocks-container but if you want to change this class to something else, simply include it as a class on the InnerBlocks call like:

<InnerBlocks class="custom-wrapper-class" />

That’s all there is to it!