Skip to main content

June 15th, 2023

Displaying a Parent ACF Block’s Custom Fields in a Child Block

When working with custom ACF blocks, it’s common to use InnerBlocks, where you are nesting other blocks inside of the parent. Well, what if you’ve assigned an ACF field to the parent block and you want to display that data inside of a nested block? Is that possible to do? Yes!

You can access ACF values from a parent block using something called block context. Block context allows parent blocks to share data with their child blocks that can be used inside them. It requires:

  • A “providesContext” key in the parent block’s block.json file
  • A “usesContext” key in the child block’s block.json file
  • A change in how the value is displayed within the child block (it wouldn’t use the_field)

Let’s take a look at each of these pieces.

What does the parent ACF block require?

In the parent ACF block that contains the custom field value(s) that you want to make accessible to its children, you need to access the block.json file registering that parent block. In that file, simply add the line:

"providesContext": {"acf/fields": "data"}

The first part of this, “acf/fields”, is a custom key you’re assigning to the info you’re passing from one block to another. “data” is what information you’re actually sending from the parent block. You’d want to send the ACF data attribute.

What does the child ACF block require?

In the child block where you’re wanting to display the ACF value(s) you’re pulling from a parent block, you need to access the block.json file registering the block and add:

"usesContext": ["acf/fields"]

The same custom key used in the parent block is referenced here. Think of the parent saying, “I’m storing my data in this location” with their block.json adjustment and then the child saying, “I want to have access to that location” with theirs.

Displaying context values in ACF blocks

What the above will do is make the specified data accessible via $context[‘acf/fields’] in our child block. If you’ve created a field called test_field in your parent block, you could then access the field’s value with:

<?php echo $context['acf/fields']['test_field']; ?>

One thing to keep in mind is the ACF data won’t be accessible with this kind of reference until save because the data is only tied to the field key, not the field name until then. So instead of something like $context[‘acf/fields’][‘test_field’], until save, it’s accessible as $context[‘acf/fields’][‘field_648af9065cb86’]. You can always var_dump the $context[‘acf/fields’] variable to see what’s going on there.

With that in mind, it may instead be best to check for both, something like:

<?php echo $context['acf/fields']['field_648af9065cb86'] ?? $context['acf/fields']['test_field']; ?>

This uses a null coalescing operator which checks to see if whatever is before the “??” is not null and echoes it if that’s the case, otherwise uses whatever is after the double question marks. You can do an if statement or some other type of check, as well. Whatever you want to use in that area, go for it, but you’re essentially wanting to first look for the field key then fall back to the field name to make sure it works in the block preview in the block editor, as well as on the front-end.

That’s all there is to it!

Get the latest in your inbox

Keep Reading