Setting Up ACF Blocks for Accordions or Tabs

When building something like an accordion or tabbed area in the old way of WordPress theming, you may have done that with a flexible content set up or a repeater using ACF. When doing the same thing as an ACF block, it can be tempting to recreate the old approach, such as adding a repeater to a singular ACF block’s fields or comparable.

However, there’s a much better way to achieve this kind of set up inside the block editor by mimicking the way other blocks, such as columns, work, and leaning more into nested blocks.

Breaking a Block Into Pieces

Instead of thinking of the entire accordion or the entire tabbed area as a block, you need to drill down further and think in terms of parent/child blocks.

You can see this done in core blocks such as the columns block. This block displays as a single option to the user in the block inserter, but it’s a piece that is made up of multiple individual column blocks inside of it. You can’t see a column block type in the inserter, as it’s only available within the parent columns block.

This method translates to using ACF blocks for content such as accordions or tabs, where instead of seeing the block as only one block, you need to see it instead as two: the individual accordion item and the parent accordion block (for accordions) or the individual tab and the parent tabbed content area (for tabs).

You’d want to register those blocks like you otherwise would.

Limiting an ACF Block to a Specific Parent

You don’t want to confuse users by having blocks like an individual accordion item and individual tab available in the block inserter all the time. They should only be available within their designated parent block.

You can limit their availability via the block.json file. You’d just want to edit the block.json for the nested individual item (the individual tab or individual accordion item) and, inside that, add a “parent” attribute that references the parent block its availability should be limited to.

{
  "$schema": "https://advancedcustomfields.com/schemas/json/main/block.json",
  "apiVersion": 3,
  "name": "acf/accordionItem",
  "title": "Accordion Item",
  "parent": [ "acf/accordion" ],
  "acf": {
    "mode": "preview",
    "renderTemplate": "blocks/accordionItem/accordionItem.php"
  }
}

Note that understandably, your block.json could include much more than this or your naming structure or render location could vary but the line to pay attention to is the “parent” line. This should reference the parent block you want this block’s use restricted to. It will only show up as an option in the inserter when inside this specified block.

Limiting the Child ACF Blocks

At the same time that you’re wanting to restrict the child individual item in this set up to a specified parent, you’d want to restrict the parent to only show this block type in its inserter. You can do this with the allowedBlocks attribute in the block.json file.

{
  "$schema": "https://advancedcustomfields.com/schemas/json/main/block.json",
  "apiVersion": 3,
  "name": "acf/accordion",
  "title": "Accordion",
  "allowedBlocks": ["acf/accordionItem"],
  "acf": {
    "mode": "preview",
    "renderTemplate": "blocks/accordion/accordion.php"
  }
}

Again, your actual block.json for your parent block could be different in naming or render location but the line to pay attention to is the allowedBlocks line.

Wrapping Up

Then you have a structure to run with to finish an accordion or tab set up that leans more on blocks than anything like a repeater inside of a singular block.

This also gives you a lot of flexibility within any individual item to continue using blocks there. I’d probably take this further and do things like limit the blocks available within the child item, as well, to things like headings, paragraphs, buttons, lists, and similar, heavily reducing the block types shown in the inserter at that level, as well.

I used to catch myself in these kind of situations where I was trying to solve it within a singular block unsuccessfully. Once I started changing my approach and getting better at breaking the block down further, it opened up a lot more possibilities.

Additional Insight

• The block editor handbook has a great guide about using Nested Blocks that dives deeper on these concepts.
• ACF has a guide on parent/child relationships in blocks that explores different use cases for drilling down a bit further than you may first think to do to in order to use this kind of approach.
• Gutenberg has an experimental tabs block that may be worth keeping an eye on!