In this post I will demonstrating how to import multiple Javascript files into your WordPress block plugins.

I have been going through and creatively tinkering with WordPress block plugins to create a more custom design on pages. Working with block plugins is fairly easy once you get used to the configuration files needed to edit.

I have explored adding in external Javascript libraries to block plugins.

There are a few files that are needed to edit to get the Javascript libraries to work with your design / layout.

Import Javascript Files To Block Plugin

Configuration

FrontEnd

In order to use the Javascript files or libraries on the frontend, you will need to edit just one file. This file is located at the root of your plugin folder. It will have the name of what your plugin name is with an extension of php.

In my example, the plugin name is My Custom Blocks.

my-custom-block.php

At the bottom of the file, we will introduce the necessary script files using a WordPress hook.

In this example, I am adding two different Javascript files. One is a library named CanvasJS. The other is a custom class I created to build a pie chart in Javascript.

function r2creations24_my_custom_blocks_enqueue_script()
{   
    wp_enqueue_script( 'r2creations24_my_custom_blocks_script_canvasjs', plugin_dir_url( __FILE__ ) . 'assets/scripts/canvasjs.min.js');
	wp_enqueue_script( 'r2creations24_my_custom_blocks_script_mypiechart', plugin_dir_url( __FILE__ ) . 'assets/scripts/piechart.js' );
}

add_action('wp_enqueue_scripts', 'r2creations24_my_custom_blocks_enqueue_script');

The add_action() is the WordPress function to run the appropriate hook specified in the first parameter. The second parameter is the name of the function the hook will run.

In the example above, we are using the wp_enqueue_scripts Wordpress hook to add the two specified scripts located in this plugin directory under the assets -> scripts folder.

This is all that is necessary to import multiple Javascript files in WordPress to use on the frontend.

Backend

edit.js

The link below is a previous post about how to let Javascript libraries access DOM elements in WordPress block plugin development.

WordPress Add External JS Libraries

The backend is just as simple. You will need to edit your edit.js file and add an import to that file. WordPress will not add this automatically for the editor.

import CanvasJS from '../../assets/scripts/canvasjs.min.js'

import { MyPieChart } from '../../assets/scripts/piechart.js';

Curly Brackets Or No Curly Brackets

Something you may have noticed from the above two imports. One has curly brackets around the import name and the other doesn't.

Curly Brackets

This means the Javascript library has a default exported class defined.

Without Curly Brackets

This means the Javascript library has no default exported class defined.

Add Custom JS Classes To Block Plugin

When you create a custom Javascript class, you would need to add a module reference for it so the editor can access it.

Simple example below showing creating a class named Test. When the init() function is called, the string set when instantiating the class will print to the console.

The bottom section will allow you to use the script in the frontend and the backend in WordPress.

class Test{
	constructor(str){
		this.str = str;
	}

	init(){
		console.log(this.str);
	}
}

if (typeof module !== 'undefined' && module.exports) {
	module.exports = {
		Test
	};
}

Note

I have attempted working with classes labeled as:

export default class Test { ... }

with no luck on getting it to work for both the frontend and the backend. The approach above is the only way I have found to make it work so far. From the information I gather, its due to support for ES modules.

Update

Below is a link to a post where I demonstrate the fix for this. You would need to create a Javascript module with Webpack.

Use Webpack To Create Javascript Modules For WordPress