Allow defining a tagName for InnerBlocks

[CreativeDive]

hey @lgladdy,

Using the ACF <InnerBlocks> tag allow us to set a class name and in combination with add_filter( 'acf/blocks/wrap_frontend_innerblocks', ... ) filter we can output the wrapper div for back end and front end.

But in some cases this leads to wrong semantics.

If my block wrapper tag is a <ul> list, the <InnerBlocks> output wrapper tag is always a <div>. The result is:

<ul class="acf-block-wrapper">
    <div class="acf-inner-blocks-container">block content</div>
    <div class="acf-inner-blocks-container">block content</div>
</ul>

But it should be:

<ul class="acf-block-wrapper">
    <li class="acf-inner-blocks-container">block content</li>
    <li class="acf-inner-blocks-container">block content</li>
</ul>

Is there a way to define a tagName for the <InnerBlocks> tag? Like:

<InnerBlocks tagName="li" class="list-item" />

[CreativeDive]

@polevaultweb I was wondering if this has already been added to the list? Personally, I think it's better to ask for something like this here, because other users can see it publicly and join the discussion if necessary.

[polevaultweb]

Thanks @CreativeDive - yep, it's on our list. I'll keep this issue open for folks to add their vote to it too, so we can prioritise it with our other tasks

[CreativeDive]

@polevaultweb thank you for response. For now the only way to get the correct syntax without HTML validation errors, is to use a very complex PHP regex pattern function, to get the correct HTML tags outputted in the front end. It's not a pretty solution and I'd like to remove it.

The suggestion I mentioned would be a very good solution here. Look at the core/group block. A solution is also used there to change the tagName, depending on the context in which the block is located.

[davidallenlewis]

Sorry how do I "vote" for this?

[polevaultweb]

@davidallenlewis you just have 😄

[mdmoreau]

@polevaultweb just took a crack at this locally, and it doesn't take much at all to implement something like:

<InnerBlocks tag="section" />

Is that something you'd want a PR for, or do you already have work underway?

[lgladdy]

We're currently working on a significant refactor of ACF Blocks so a PR won't be too helpful here.

For now, you can use the acf/blocks/wrap_frontend_innerblocks filter to disable the wrapper on the frontend, then use your own in your template. You would still be double-wrapped in the block editor for now though.