I’m using block.json to define my ACF block. However, it’s either not pulling in the JS file which is basically just a console.log('Hello'). The editorStyle is working, so I know it’s recognizing my block.json config. What’s the best way to get the JS to load in the editor? BTW, Even the JS file defined as "script": "file:./custom.js" isn’t loading on the front end either.
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"name": "acf/testimonial",
"title": "Testimonial",
"description": "A custom testimonial block.",
"script": "file:./custom.js",
"style": [ "file:./style.css" ],
"editorStyle": "file:./style.css",
"editorScript": "file:./editor.js",
"category": "common",
"icon": "admin-comments",
"acf": {
"mode": "preview",
"renderTemplate": "testimonial.php"
}
}
I found a way that works, but I don’t know if it’s the best practice today. This uses Bill Erickson’s tutorial. https://www.billerickson.net/building-acf-blocks-with-block-json/#script
So, script in block.json should point to a function rather than file.
Although, now my function is in the functions.php file instead of with my block. I’m not a PHP expert so maybe there’s a way to keep this more tidy.
Experiencing the same issue. Has anyone found a better fix?
I had the same problem of my block JS file not loading when adding it this way. If you have wp_debug enabled you’ll probably see this notice which will show the name of the .asset.php file it’s expecting:
“Function register_block_script_handle was called incorrectly…”.
However, using this ACF forum post to start, I found how to load scripts via file name in blocks.json. I understand this is the better way to do it (now that it’s possible) instead of what Bill Erickson’s tutorial shows (enqueing the script manually via PHP).
So since you are loading a JS file named custom.js you’d need to add in the same folder a file named custom.asset.php. In this file you can include the handle name, dependencies, and version number. Or you can leave them to be default generated. My js-file-name.asset.php looks like this:
<?php
return array(
'dependencies' => array(
'wp-blocks',
'wp-element',
'wp-i18n',
),
'version' => '1.0',
);
To read more about this, check out the WPDefinedAsset section in the WP Block Editor Handbook.
