Use ACF custom fields in Query Loop block

Working with WordPress daily gives me the opportunity to play around with new feature releases from the WordPress team.

In this instance, I wanted to look at the native Gutenberg Query Loop block.

Whilst this block has the potential to be super useful in the future, in its current state, I found myself disappointed with the existing limitations.

In this article, we look at how we can enhance the core functionality of the native WordPress Query Loop block by using ACF custom fields.

My required use case

I had a Dog Breed Custom Post Type, and I wanted to define specific numeric values per attribute against each breed. I wanted to create a Block Pattern to display the values per post within the Query Loop block.

If you’re in a rush, skip to the TLDR.

ACF custom field values not displaying?

I created some ACF fields to display a rating out of 5 for various subjects, and I wanted to display these numeric values on the front end. This field group was assigned to the Dog Breed Custom Post Type.

Limitations imposed by Gutenberg mean that the only way I can achieve this from a no-code perspective is to make use of the native shortcode block, and the ACF shortcode API found in the documentation.

The problem with using ACF custom fields and the Query Loop block

Unfortunately, the native functionality fails to display the ACF value defined against each list item.

This was confusing to me at first, but after some investigation into the Query Loop block, it soon became clear why.

There are fundamentally two problems with using ACF custom fields within the Query Loop block:

1. The native Gutenberg shortcode block always executes the wpautop function, which isn’t helpful, as we lose the current Query Loop iteration Post ID.
2. The Query Loop block does not broadcast the current loop iteration data, so retrieving an ACF shortcode for that specific post won’t work using additional hooks.

Creating a plugin to enable shortcode use in the Query Loop block

After some playing around, I came up with the following fix.

I realize it’s not perfect, but it suits my immediate requirements.

What I decided to do was hook into the register_block_type_args filter and run it through the do_shortcode function instead of running everything through wpautop (which prevented the ACF shortcode from working).

One thing to be cautious of is what blocks you use the shortcode within. Currently, this particular code snippet will only support paragraph, list, and shortcode blocks, but you can easily amend the list of supported blocks by amending the array of $validBlocks.

View this gist on GitHub

Making ACF shortcodes work in Query Loop block

After implementing the above code, I got ACF shortcodes to work as expected when retrieving simple fields with numbers and text values.

Final Thoughts

The code snippet above helped me in my situation and having spent a fair chunk of time searching online, it became clear that while multiple people were experiencing similar issues, I was unable to find an existing solution.

With this in mind, I hope you stumble across this post before losing too much time on this specific issue. It also makes the Query Loop block much more extendable and useful, especially for a no-code way of achieving partial programmatic content in WordPress.