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
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.
"description": "A custom testimonial block.",
"style": [ "file:./style.css" ],
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
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.
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.
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!