ACF Field Data in Block (HTML) Template

• chandlerwarren

• May 5, 2022 at 10:33 am

Hello,

I have ACF fields for a post type and I’d like to render that ACF data in a block template for a single post view. As of the current version of WordPress, block templates and template parts are created using HTML files, to which blocks are added via HTML comments, like below:

<!-- wp:post-content {"layout":{"inherit":true}} /-->

I can create a classic PHP page template instead and use get_field(), etc. like normal, but I’m wondering how ACF field data gets queried and displayed in these kinds of block templates (or if that’s even possible). WordPress has built-in dynamic template parts for things like “wp:post-content” or “wp:post-featured-image”, so I was wondering if there is an equivalent for something like “acf:field-name” to display the data of a “field-name” as a block.

Thanks for any help!

• Tony Girling

• May 26, 2022 at 11:48 am

I’m looking for a solution for this too. I’m migrating a large site from a PHP templated based theme to a block theme to leverage all the benefits of FSE as well, but this is a project blocker.

• Tony Girling

• June 9, 2022 at 5:33 am

@chandlerwarren I have a hack that’s working for me in the short term before I delve into looking at the feasibility of creating a native Gutenberg block or an ACF block to get a better solution.

What I have done:

• Created a separate .HTML template in the templates folder of my child theme folder based on single.html. Let’s say single-event.html (based on my Custom Post Type).
• Created an empty template part in parts. Let’s say it’s called event-detail.html.
• Then in my single-event.html template I have
  <!-- wp:template-part {"slug":"event-detail"} /-->
  where I want to render the ACF data.
• Then from the site editor, I edit the new template part and insert a shortcode.
• In my plugin (or in functions.php) it’s easy to add the shortcode code to use the global $post to then fetch the ACF fields and return a nice layout of my ACF fields.

Not elegant, and probably not the preferred method. I’d like to find out how to do this properly.

• Tony Girling

• June 10, 2022 at 5:02 am

OK – simpler to add the shortcode directly into the .html template, just like WooCommerce works.

Woo adds an entry directly into the wp_posts data table for their pages. The post_content field is a shortcode….

<!-- wp:shortcode -->[woocommerce_cart]<!-- /wp:shortcode -->

As I want to surround my block contents with my ACF extracted data I can put this markup directly into my templates.

• chandlerwarren

• June 10, 2022 at 9:55 am

Hi Tony,

Thanks for the responses! The shortcode idea is a good one and works nicely, and I’ll use it in the future when I need to quickly access ACF data from an HTML template.

I ended up just making new ACF blocks for the content that I wanted to display, and then inserting those blocks into the HTML templates. If you or anyone else stumbling on this doesn’t know, ACF has a handy register block function that can be used to quickly register a block without going through the endorsed WordPress route (which uses JSX and has separate Save and Edit functions for rendering).

I registered a person block, for instance, and then could add it to my HTML template with the following code:

<!-- wp:acf/person {"id":"block_627aa5c420a3d","name":"acf/person"} /-->

Then I can supply that block a good old fashioned PHP template during registration, allowing me to fully access the ACF field data from the render template and to further dictate how that block is displayed in the HTML template.

Like you said, this solution doesn’t seem elegant, nor is it efficient if you need to do it for many different types of posts.