Have Multiple Blocks In WP Plugin

Welcome

You have a great idea for a plugin, and you have some coding experience your self. You decide to check out the WordPress documentation and get started. Things are going well until you realize that what you have done so far is only good for one block. You don't want to have to make a new plugin for each block. What do you do?

Well here we will solve that problem, and walk through how to set up your plugin for as many blocks as you would like.

Directory Structure

After following the WordPress documentation for getting started with a new block plugin you should have a directory structure that looks like this.

We are going to need to rearrange it just a bit. Let's start with making a place for all of our blocks. I like to start by adding an includes directory that then has all my blocks in there, like so.

Then we need to move all the related files for the individual block to its own block folder, excluding the contents of the build directory. Which in this case should just be the src directory and its contents.

Updating The Plugin Files

Now that we have a place to put all the individual blocks we need to let WordPress know. In the root of your plugin directory you should see a file with the name of your plugin .php. In my case it is wp-multi-block.php. Inside that file you should see a function that registers the block with WordPress.

function create_block_wp_multi_block_block_init() {
	register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'create_block_wp_multi_block_block_init' );

Let's change it so that it will register a new block type for each potential block we might have. First create an array that holds the string value of each of our block directories. Then we'll parse through each one's src folder to register the block.

function create_block_wp_multi_block_init() {
    $blocks = array(
        'block-one',
    );

    foreach( $blocks as $block ) {
        register_block_type( block_type: WP_MULTI_BLOCK_PLUGIN_DIR . 'includes/blocks/' . $block . '/src/');
    }
}
add_action( 'init', 'create_block_wp_multi_block_init' );

Now let's update the block.json files in the block directories. At the bottom of the file you should see "editorScript", "editorStyle", and "style". We need to point them to the proper directory where the compiled code will be in relation to the file we are in.

    {
  "editorScript": "file:../../../../build/block-one.js",
  "editorStyle": "file:../../../../build/block-one.css",
  "style": "file:../../../../build/style-block-one.css"
}

Webpack Config

Now that we have told wordpress where all of our block files are, we need to let webpack know as well. Start by creating a webpack.config.js in your root plugin directory. Inside we will first get the default configs then add our own custom entry points like so.

const defaultConfig = require('@wordpress/scripts/config/webpack.config');

module.exports = {
    ...defaultConfig,
    entry: {
        'block-one': './includes/blocks/block-one/src',
    },
};

When you run npm start or npm run build it will now go through each of the blocks you have and place the proper files in the build folder.