Enqueueing using the from @wordpress/scripts generated .deps.json dependencies [UPDATED for .asset.php]
September 12, 2019
When using the
@wordpress/scripts package, it will automatically create a
But the question that quickly came to mind is how to actually properly use it as the script dependencies. And how to add your own dependencies to it, if you are relying on your own ones as well.
The way I found easiest, is by using a ternary statement. First I check wether the file exists. If so I
json_decode the file contents. If the file does not exist I just return an empty array.
In my register or enqueue script function I then use
array_merge to merge the script dependencies from the
.deps.json file and my own custom scripts that I need to depend on.
$block_path = 'build/index.js'; $script_deps_path = plugins_url('build/index.deps.json', __FILE__); $script_dependencies = file_exists($script_deps_path) ? json_decode(file_get_contents($script_deps_path)) : ; wp_register_script( 'example-block', plugins_url($block_path, __FILE__ ), array_merge($script_dependencies, ), PLUGIN_VERSION );
UDATPE @wordpress/scripts ^5.0.0
With the new Version 5.0.0 of the @wordpress/script package they switched from having generated JSON files for storing the dependencies to having a .asset.php file for each of the js entry points. These files return an array containing another array of dependencies and a string for the version of that file. To access them you can easily use a php include statement and store it in a variable. From there you can access the named elements in the array. Like I mentioned, at the moment there are only the dependencies and the version. But the plan seems to be expanding that in the future to make enqueueing easier and easier.
$block_path = 'build/index.js'; $script_dependencies = ( include plugins_url( '/build/index.asset.php' , __FILE__ ); wp_register_script( 'example-block', plugins_url($block_path, __FILE__ ), array_merge( $script_dependencies['dependencies'], [), $script_dependencies['version'] );