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.
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:
- The native Gutenberg shortcode block always executes the
wpautopfunction, which isn’t helpful, as we lose the current Query Loop iteration Post ID.
- 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.
TLDR – Plugin to the rescue
For those of you that need a quick fix, I wrote a quick plugin to provide a no-code way of displaying simple numeric or text-based ACF field values within the Query Loop block using one of the following native Gutenberg blocks:
Read on to the next section to view the GitHub gist, or download a zip file of the plugin here.
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
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.
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.