Block script error

• andy.hastings

• April 24, 2023 at 11:45 am

Hi,

I’m a creating the block using block.json and everything works as it should except for the JS. I get the following error for the script but not for the style parameter. – “Notice: Function register_block_script_handle was called incorrectly. The asset file (C:/***/wp-content/themes/my-theme/acf-blocks/products/product-grid/product-grid.asset.php) for the “script” defined in “myblocks/product-grid” block definition is missing”

From everything I can find this is how you load in a JS file for a block. I can’t find anything else in the docs so should I be doing something different? Also, any clue why it is looking for the file product-grid.asset.php? Thanks for any advice.

Here is my init.php:
/**
* Add ACF-based blocks
*/

add_action('init', 'register_acf_blocks');
function register_acf_blocks() {
  register_block_type( __DIR__ . '/products/product-grid' );
}

Here is my block.json:

{
  "name": "myblocks/product-grid",
  "title": "Products Grid",
  "description": "Product grid with filtering",
  "script": "file:./product-grid.js",
  "style": ["file:./product-grid.css"],
  "category": "general",
  "icon": "screenoptions",
  "keywords": ["product", "myblocks"],
  "version": "1.0.0",
  "textdomain": "mysite",
  "acf": {
    "mode": "auto",
    "renderTemplate": "content-product-grid.php"
  },
  "supports": {
    "align": false,
    "anchor": true
  }
}  

• mnajlat

• April 28, 2023 at 12:12 pm

You need to create product-grid.asset.php beside product-grid.js that returns an array with the following keys:

• handle (string)
• dependencies (string[])
• version (string|false|null)

Check here: https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#wpdefinedasset

• andy.hastings

• April 28, 2023 at 12:41 pm

Thanks for the reply @mnajlat.
I added product-grid.asset.php to the same directory as the block.json file with the following array:

return array(
  'handle'       => 'product-grid-script',
  'dependencies' => array(''),
  'version'      => '1.0',
);

Then I added the following in the block.json file:
"script": "file:./product-grid.js",

This got rid of the error but product-grid.js doesn’t load. Do you see any issues with what I added?

I did find a work around by registering the script on init using:
wp_register_script( 'product-grid-script', get_template_directory_uri() . '/acf-blocks/products/product-grid/product-grid.js', array(), '1.0.0', true );
Then in block.json I call the script’s handle:
"script": "product-grid-script",

• mnajlat

• April 28, 2023 at 6:21 pm

Sure!

Your solution is another way to load the script, you can keep going with it.

But with the first way, I think the empty single quotes inside the dependencies array are the problem in your code. The empty string is taken as a dependency that will not be found, thus the script won’t be loaded without its dependencies.

I recommend the .asset.php way cause that will always give WP control on when to load the asset and when not to.

• nidzan

• February 28, 2024 at 9:21 am

The '' are making an issue… Just remove them, and set empty array.

return array(
  'handle'       => 'product-grid-script',
  'dependencies' => [],
  'version'      => '1.0',
);