Getting ACF block-level data to localize script via controller

sage
1

Hey all,

There seems to be a lot of discussion about getting ACF block-level-data to a block template.

However, is it possible to get block-level ACF data to a local_script function via a controller?

Right now I am not having any success with it. In my controller, when I try to do something like:

namespace App\Controllers;

use Sober\Controller\Controller;

class ChartConfig extends Controller
{

    public static function getData()
    {

        $data = get_field('data_table')

        return $data;
    }

}

Then in setup.php, I am sending this to JS like so:

        wp_localize_script('make-a-chart', 'chartConfiguration', \App\Controllers\ChartConfig::getData());

However, whenever I console chartConfiguration, it returns null. Context is not the issue. I’ve passed the post id of the page where I am currently testing this as a second argument in get_field().

I’ve successfully passed ACF Data to JS from a page template before but I cannot figure out how to do so with a block template.

Any tips on how to get around this that doesn’t include using ACF API? I’ve had no success getting it to work.

2

This is not the intent of a Controller. A Controller is for shaping/getting data before passing it to a Blade, not as a namespaced repository for related logic.

  1. Have you already enqueued the make-a-chart script before localize_script() runs?
  2. Have you passed the direct output of get_field() to localize_script() instead of wrapping it in a static method?
  3. What action are you wrapping this call to localize_script() in? Some actions run before ACF has been fully initialized, and so ACF fields will return strange values.
3

Great questions.

It’s wrapped in ‘wp-enqueue-scripts’ action with a priority of 100. So it’s loading pretty late in the game.

I also have WP check to make sure the block actually exists before loading the JS only because Plotly is a pretty hefty library.

See a stripped down version of it below with passing field data directly to the localize_script function:

add_action('wp_enqueue_scripts', function () {
   
    if(has_block('acf/make-a-chart')){
           wp_register_script('plotly', "https://cdn.plot.ly/plotly-2.4.2.min.js", [], null, true);
            wp_enqueue_script('make-a-chart', asset_path('scripts/make-a-chart.js'), ['plotly'], null, true);
            wp_localize_script('make-a-chart', 'chartConfiguration', get_field('data_table'));
        }    
   
   
}, 100);

I am guessing it’s somehow loading before ACF if I am still getting null here. I know there’s the ‘acf/init’ action but doesn’t all JS need to be enqueued in this action?

4

JS only needs to be enqueued before it’s printed out. wp-enqueue-scripts is just a useful place to do it. Have you looked at what’s being printed out on the page?

5

As far as ACF data? Yes. When I vardump, it prints out the data. But the JS object is null.

6

I think the issue is that the data is being held within the block and not the posts overall meta data. I ran parse_blocks($post->post_content) in my localize function and was able to find the data I need in the console.

I am guessing based on my research that there is no built-in method that easily extracts the block-level data eh?

7

I haven’t used the ACF block stuff very much. If the data is being stored in block attributes and not post meta then yeah, I’d guess that you need parse_blocks() to get at it (or something similar–I’m not familiar w/ the core block functions). If you were registering your own dynamic blocks, you could specify a PHP render callback that would have access to the block attributes, and could do what you want, but I’m not sure if you can do that w/ ACF’s blocks.

8

This topic was automatically closed after 42 days. New replies are no longer allowed.