ACF Blocks, Javascipt API and field values

• nwe

• July 12, 2023 at 11:51 am

I have successfully created some ACF blocks and have them implemented in several WordPress sites. The block components use hard coded parameters within frontend block scripts but I want this configuration data controlled by custom fields to keep a single block reusable and configurable via a GUI.

One important Caveat is I don’t want to use JQuery only Vanilla Javascript.
But I am struggling to access field data using js – I have searched these forums and the web but am still scratching my head. I have migrated a block to block.json and all good using ACF Pro Version 6.0.6

I cannot access field data by acf.get(‘field_name’) or acf.getField(‘field_name’) both return undefined. I understand I have to access the fields by key.

How do I find all fields within a block and access their data using javascript?

How do I access the field data using human readable field names?

I have tried this and field.length is 0 and no fields are returned.

acf.add_action('ready', function() {
	console.log("acf ready");

	 // Get all fields on the page
	var allFields = acf.getFields();
	console.log(allFields.length);
	 // Loop through each field and log the field key
	allFields.forEach(function(field) {
		console.log('Field Key:', field.key, field);
	});
});

Accessing the field data using js should be quote straightforward. Any help on this will be greatly appreciated. Tx for looking.

• John Huebner

• July 12, 2023 at 3:10 pm

The first part of your question makes me think that you are attempting to use the ACF JS API on the front end of the site when displaying content. The ACF API only functions in the admin when editing.

• nwe

• July 12, 2023 at 3:25 pm

Hi John.
Tx for your swift answer, I have always valued the knowledge you share on this forum and have learned a lot from it.

Yes – I am trying to find a way to access field data in front end and back end scripts and use it to configure a third party javascript component without using jQuery.

Do you know any clean way of doing this or a further avenue I could explore.
At the moment I am getting somewhere with writing data-attributes into generated html blocks and then accessing them with javascript but it seems a bit backwards.

It would be great if the fields were available as JSON.

• John Huebner

• July 12, 2023 at 3:55 pm

I don’t use blocks, so this may help you and it may not.

Generally when I need to do this I will code something for the back end that uses the ACF JS API and something different for the front end. In the admin you may as well use jQuery because it is already loaded by ACF.

When I want to make values of fields available to JS on the front end of the site I do one of the following.

The first would be if I was including a separate js file using wp_enqueue_script(). In this case I wp_localize_script().

The second method is when I’m adding incline JS code. In this case I just add what I need to the inline JS

// example
var MyVar = '<?php the_field('some_field_name');';

There have been occasions in the paste where I write the values into incline JS that will later be used by a script loaded into a file.

All of the above methods are used if the values needed will not change from page load to page load so that some type of cache plugin is used.

If the values needed are dynamic and might change for different visitors then I generally use an AJAX request to get the needed values so that caching will not interfere. this usually also means that I’m doing one of the above as well to supply static values needed for making any AJAX requests. It has been a long time since I’ve done AJAX requests without the aide of jQuery.

• nwe

• July 12, 2023 at 4:34 pm

This is all very useful tx, maybe my idea of data attributes for the front end is not so silly after all but the idea of some inline js is also great. I was almost there with two different init scripts for front end [vanilla] and back end [jQuery], I think I now know the best approach to pursue. The approaches you provided make a lot of sense.

wp_localize_script() is very useful too – I didn’t know that function.

Thanks for your help and advice – I missed in the docs the ACF javascript API being back end only.

Thank you for your time spent responding to this.