In this post I will go through applying conditional script enqueue for WordPress block plugins.
I have recently been working on various types of custom block plugins for WordPress. They involved creating or importing external JS scripts to be used.
Check out the posts linked below to view these projects.
Loading Unneeded Scripts Decreases Performance
While I was learning how to add these external scripts to the frontend of the WordPress posts, I have noticed a slightly longer load time on pages that the block plugins aren't being used on. After viewing Chrome DevTools, I noticed the various scripts have been getting loaded on all pages including the ones not using the block plugin.
Some of the assets that were being loaded were quite large. In turn, this gave the site a lower PageSpeed Insights score.
Conditional Script Enqueue For WordPress Block Plugins
Only Add The Script Where the Block Plugin Is Used
First we will use the WordPress wp_dequeue_script() function to unload the script. This function takes the parameter of the block plugin handle.
Then we will need to use a conditional statement to only load the plugin if the current page is using the block plugin.
To do this, we will need to use the has_block() WordPress function in the conditional if statement. The parameter used in this function will also be the block plugin script handle.
Finally to load the script, we will use the WordPress wp_enqueue_script() function. This function needs the block plugin script handle as well as the path to the script or asset requesting to load.
Example Custom Block Plugin Conditionally Loading Script
In the example below is my custom block plugin that only loads the asset scripts when the current page uses the appropriate block plugin. This code is added to the bottom of the PHP file at the root of the block plugin directory. In my case, my_custom_blocks.php .
function r2creations24_my_custom_blocks_enqueue_script()
{
wp_dequeue_script( 'r2creations24_my_custom_blocks_script_canvasjs');
wp_dequeue_script( 'r2creations24_my_custom_blocks_script_mypiechart');
wp_dequeue_script( 'r2creations24_my_custom_blocks_script_custom_threejs');
if(has_block('r2creations24/my-custom-blocks-canvasjs')){
wp_enqueue_style( 'r2creations24_my_custom_blocks_style_canvasjs');
wp_enqueue_script( 'r2creations24_my_custom_blocks_script_canvasjs', plugin_dir_url( __FILE__ ) . 'assets/scripts/canvasjs.min.js');
}
if(has_block('r2creations24/my-custom-blocks-mypiechart')){
wp_enqueue_style( 'r2creations24_my_custom_blocks_style_canvasjs');
wp_enqueue_script( 'r2creations24_my_custom_blocks_script_mypiechart', plugin_dir_url( __FILE__ ) . 'assets/scripts/custom_piechart.js' );
}
if(has_block('r2creations24/my-custom-blocks-threejs') || has_block('r2creations24/my-custom-blocks-threejs-char')){
wp_enqueue_style( 'r2creations24_my_custom_blocks_style_canvasjs');
wp_enqueue_script( 'r2creations24_my_custom_blocks_script_custom_threejs', plugin_dir_url( __FILE__ ) . 'assets/scripts/custom_threejs.js' );
}
}
add_action('wp_enqueue_scripts', 'r2creations24_my_custom_blocks_enqueue_script');
Properly utilizing WordPress script enqueue and dequeue will ensure your pages will load only the necessary files improving performance. Therefore you will have a better user experience with faster load times.