Title: How to build a multi-block plugin Author: Troy Chaplin Published: September 17, 2024 Last modified: December 12, 2024 --- * [Showcase](https://wordpress.org/showcase/) * [Plugins](https://wordpress.org/plugins/) * [Themes](https://wordpress.org/themes/) * [Hosting](https://wordpress.org/hosting/) * [News](https://wordpress.org/news/) - [Learn WordPress](https://learn.wordpress.org/) - [Documentation](https://wordpress.org/documentation/) - [Education](https://wordpress.org/education/) - [Forums](https://wordpress.org/support/forums/) - [Developers](https://developer.wordpress.org/) - [Blocks](https://wordpress.org/blocks/) - [Patterns](https://wordpress.org/patterns/) - [Photos](https://wordpress.org/photos/) - [Openverse ︎](https://openverse.org/) - [WordPress.tv ︎](https://wordpress.tv/) * - [About WordPress](https://wordpress.org/about/) - [Make WordPress](https://make.wordpress.org/) - [Events](https://events.wordpress.org/) - [Five for the Future](https://wordpress.org/five-for-the-future/) - [Enterprise](https://wordpress.org/enterprise/) - [Gutenberg ︎](https://wordpress.org/gutenberg/) - [Job Board ︎](https://jobs.wordpress.net/) * [Swag ︎](https://mercantile.wordpress.org/) * [Get WordPress](https://wordpress.org/download/) Search in WordPress.org [ Get WordPress ](https://wordpress.org/download/) [WordPress Developer Blog](https://developer.wordpress.org/news) How to build a multi-block plugin * [Snippets](https://developer.wordpress.org/news/snippets/) - [Blocks](https://developer.wordpress.org/news/category/blocks/) - [Concepts](https://developer.wordpress.org/news/category/concepts/) - [Common APIs](https://developer.wordpress.org/news/category/common-apis/) - [Design](https://developer.wordpress.org/news/category/design/) - [Playground](https://developer.wordpress.org/news/category/playground/) - [Plugins](https://developer.wordpress.org/news/category/plugins/) - [Themes](https://developer.wordpress.org/news/category/themes/) * - [About this site](https://developer.wordpress.org/news/about/) - [Updates](https://developer.wordpress.org/news/category/updates/) - [How to contribute](https://developer.wordpress.org/news/how-to-contribute/) - [Tips and guidelines](https://developer.wordpress.org/news/tips-and-guidelines-for-writers/) * [Subscribe](https://developer.wordpress.org/news/subscribe/) * [Developer Resources](https://developer.wordpress.org/) * [Snippets](https://developer.wordpress.org/news/snippets/) - [Blocks](https://developer.wordpress.org/news/category/blocks/) - [Concepts](https://developer.wordpress.org/news/category/concepts/) - [Common APIs](https://developer.wordpress.org/news/category/common-apis/) - [Design](https://developer.wordpress.org/news/category/design/) - [Playground](https://developer.wordpress.org/news/category/playground/) - [Plugins](https://developer.wordpress.org/news/category/plugins/) - [Themes](https://developer.wordpress.org/news/category/themes/) * - [About this site](https://developer.wordpress.org/news/about/) - [Updates](https://developer.wordpress.org/news/category/updates/) - [How to contribute](https://developer.wordpress.org/news/how-to-contribute/) - [Tips and guidelines](https://developer.wordpress.org/news/tips-and-guidelines-for-writers/) * [Subscribe](https://developer.wordpress.org/news/subscribe/) * [Developer Resources](https://developer.wordpress.org/) # How to build a multi-block plugin By [Troy Chaplin](https://profiles.wordpress.org/areziaal/) September 17, 2024 [Advanced](https://developer.wordpress.org/news/category/advanced/), [Blocks](https://developer.wordpress.org/news/category/blocks/), [Concepts](https://developer.wordpress.org/news/category/concepts/), [Plugins](https://developer.wordpress.org/news/category/plugins/) As a WordPress developer who has mainly focused on enterprise level solutions, the concept of a multi-block made far more sense than having several individual block plugins. Thinking long term, a well-designed enterprise system could easily have dozens of custom blocks and other functionality related to modifying blocks or improving the editor experience. The concept of a multi-block plugin is something I’ve seen mentioned online a couple of times, but I don’t recall seeing an in-depth tutorial. In this article, I will create a basic multi-block plugin then add advanced functionality to turn it into a robust block plugin that can be extended beyond registering blocks. By the end of this article you will have gone through the steps to set yourself up with your own multi-block plugin and will be ready to build out and manage any number of blocks in one centralized plugin, along with other block editor related functionality such as variations, registering block styles, adding slot fills, and anything else you may need. Table of Contents 1. [Benefits to a Multi-Block Plugin](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#benefits-to-a-multi-block-plugin) 2. [Basic Setup](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#basic-setup) 3. a. [Creating a Block Plugin](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#creating-a-block-plugin) 4. [Refactor the Plugin Structure](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#refactor-the-plugin-structure) 5. a. [Create a Master Blocks Directory](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#create-a-master-blocks-directory) b. [Create a Single Block](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#create-a-single-block) c. [Update the Register Block Type Action](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#update-the-register-block-type-action) d. [Update the Build Files](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#update-the-build-files) 6. [Adding additional blocks](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#adding-additional-blocks) 7. [Adding a Dynamic Block](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#adding-a-dynamic-block) 8. [Recap of Basic Setup](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#recap-of-basic-setup) 9. [Advanced Configuration](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#advanced-configuration) 10. a. [Create an Array and Add foreach Loop](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#create-an-array-and-add-foreach-loop) b. [Combine Block Assets](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#combine-block-assets) c. [Create a webpack Config File](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#create-a-webpack-config-file) d. [Add Editor and Frontend Entry Points](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#add-editor-and-frontend-entry-points) e. [Enqueue the editor and frontend assets](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#enqueue-the-editor-and-frontend-assets) f. [Updating Block Styles](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#updating-block-styles) g. [Removing Unused Files and Clean Up block.json](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#removing-unused-files-and-clean-up-block-json) h. [Additional Scripts](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#additional-scripts) 11. [Wrapping Up](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#wrapping-up) 12. [Resources](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#resources) ## Benefits to a Multi-Block Plugin * Less maintenance, easier dependency management * Increase shared code, reduce duplication across plugins * Potential improvements to security response time (I’m no expert, but a hole in a key dependency is easier to address and contain in 1 plugin than 10) If you are unfamiliar with creating custom blocks and the system setup, requirements to do so, please read up on creating a [Block Development Environment in WordPress](https://developer.wordpress.org/block-editor/getting-started/devenv). If you are building along with this tutorial there is an example of the plugin for reference that can be see in this [public repo](https://github.com/wptrainingteam/building-multi-block-plugin). ## Basic Setup By the end of this section of the tutorial you will have built a single plugin called** WP Multi Block** that will register two static blocks and a dynamic one. Let’s get started by creating your block plugin. ### Creating a Block Plugin The first step is to get a base plugin setup for blocks. For this, you will use the officially supported `create-block` tool. This tool will take care of scaffolding this plugin, all by running one simple command inside your `/plugins` folder: ```bash npx @wordpress/create-block@latest wp-multi-block ``` By default, the `@wordpress/create-block` generates a static block, but there’s an argument `--variant dynamic` that can be used if you wish to start with only a dynamic block. If you’re following along you’ll use this argument later in this tutorial. What’s the difference between a static block and a dynamic block? At a very high level, static blocks use a `save()` function to store HTML markup for the block into the `post_content` table in our database. Dynamic blocks use a PHP render callback to render content on the server side when the page or post is viewed, only storing the block’s attributes in the database. For more details you can read here on the Developer Blog [Static vs. dynamic blocks: What’s the difference?](https://developer.wordpress.org/news/2023/02/27/static-vs-dynamic-blocks-whats-the-difference/) For the purposes of this tutorial you will be using the basic command and starting with a static block. ## Refactor the Plugin Structure To better organize multiple blocks in the plugin there are some changes you  can make to the plugin structure. ### Create a Master Blocks Directory Inside the `src` directory do the following: * Delete all existing files * Create a folder called `blocks` Why add a `blocks` directory, it seems unnecessary? We’ll want to be able to add a `src/scripts` and maybe a `src/styles` later, so grouping blocks will improve long-term organization and maintenance. ### Create a Single Block There’s a way we can use `@wordpress/create-block` to set up only what is required for a block by using the `--no-plugin` option. Inside of the `src/blocks` directory and run the following: ```bash npx @wordpress/create-block@latest block-one --no-plugin ``` Here’s what my updated directory structure looks like in VS Code: ![A view of the file and folder structure for block one from VS Code.](https://developer. wordpress.org/news/files/2024/09/block-one-tree-236x300.png) ### Update the Register Block Type Action With the block moved to a new directory you now need to update the reference to its location in the `register_block_type` action: * Edit the `wp-multi-block.php` file * Let’s give the existing function a better name and use `multiblock_register_static_blocks` * In the `register_block_type` function you need to include the new path to our block so that it looks like `/build/blocks/block-one` Our final code looks like this: ```bash function multiblock_register_blocks() { register_block_type( __DIR__ . '/build/blocks/block-one' ); } add_action( 'init', 'multiblock_register_blocks' ); ``` ### Update the Build Files * It’s time to regenerate the build files by running `npm run build` Let’s confirm that these changes work, activate the plugin and refresh the editor, and add our first block. We should end up with something that looks like this: ![An editor view of the first static block.](https://developer.wordpress.org/news/ files/2024/09/block-one-1024x406.png) ## Adding additional blocks Adding more blocks is as easy as running the same command as you did when creating the first block, but with a different name. Go ahead and create **Block Two**. **Create a new block** You can  repeat what you did to create the  first block by running the following inside the `src/blocks` directory: ```wp-block-code npx @wordpress/create-block@latest block-two --no-plugin ``` Here’s what my updated directory structure looks like in VS Code: ![A view of the file and folder structure for the first two blocks from VS Code.]( https://developer.wordpress.org/news/files/2024/09/block-two-tree.png) **Update Register Block Type Action** * Edit the `wp-multi-block.php` file and duplicate the `register_block_type` function and change the reference to `/build/blocks/block-two`. The final code looks like this: ```php function multiblock_register_blocks() { register_block_type( __DIR__ . '/build/blocks/block-one' ); register_block_type( __DIR__ . '/build/blocks/block-two' ); } add_action( 'init', 'multiblock_register_blocks' ); ``` **Update the Build Files** * It’s time to regenerate our build files by running `npm run build` Let’s confirm that these changes work and refresh the editor and add both of our blocks. We should end up with something that looks like this: ![An editor view of the first two static blocks.](https://developer.wordpress.org/ news/files/2024/09/block-two-1024x481.png) ## Adding a Dynamic Block So far, you only worked with static blocks, but how does this apply to a dynamic block? With a few updates, you  can also include dynamic blocks along with our static blocks. If you aren’t familiar with both block types you can read here on the Developer Blog [Static vs. dynamic blocks: What’s the difference?](https://developer.wordpress.org/news/2023/02/27/static-vs-dynamic-blocks-whats-the-difference/) You’ll start by creating a new block just like we did before, but this time we’ll add an option to specific that we are creating a dynamic block. Go ahead and create** Block Three**. **Create a Dynamic Block** You can once again reach for `@wordpress/create-block` to create our dynamic block. Inside the `src/blocks` directory and run the following: ```bash npx @wordpress/create-block@latest block-three --no-plugin --variant dynamic ``` **Update Register Block Type Action** * Edit the `wp-multi-block.php` file and duplicate the `register_block_type` function and change the reference to `/build/blocks/block-three`. The final code looks like this: ```php function multiblock_register_blocks() { register_block_type( __DIR__ . '/build/blocks/block-one' ); register_block_type( __DIR__ . '/build/blocks/block-two' ); register_block_type( __DIR__ . '/build/blocks/block-three' ); } add_action( 'init', 'multiblock_register_blocks' ); ``` **Update Build and Start Commands** Before you can update your build you need to add an argument into the build commands. By adding `--webpack-copy-php` you are  telling the build process to include any PHP file into the final build directory. * Edit `package.json` * Update the `build` and `start` commands to tell webpack to copy the PHP files. The final commands should look like the following: ```language-json "build": "wp-scripts build --webpack-copy-php" "start": "wp-scripts start --webpack-copy-php" ``` **Update the Build Files** It’s time to regenerate our build files by running `npm run build` Let’s confirm that these changes work and refresh the editor and add all three of our blocks. We should end up with something that looks like this: ![An editor view of the three blocks that have been built so far.](https://developer. wordpress.org/news/files/2024/09/block-three-1024x595.png) **Note about text domain** When using `@wordpress/create-block` the `text-domain` in the `block.json` matches the block name. In your plugin, each block will have a unique `text-domain`. This would be a great time to edit each `block.json` file and change the `text-domain` to `wp-multi-block`. ## Recap of Basic Setup Congratulations! If you’ve followed along, you’ve just created a multi-block plugin that loads three blocks and is maintained with a single set of dependencies. And you can repeat the steps to add new blocks as many times as you wish. The key points to remember are: * Individual block names must be unique so don’t forget to update references to` names` and `titles` throughout the block files * Each block must be registered with a `register_block_type` function Each dynamic block must have a reference to a PHP file as part of its `register_block_type` function  which is defined in the `block.json` file ## Advanced Configuration While each section from this point forward is completely optional as you already have a fully functional multi block, I would recommend going through these additional steps to improve the overall configuration of the plugin to better streamline development, simplify maintenance and improve the overall readability of the code. By the end of this section of the tutorial you’ll have: * Added another dynamic block * Created an array of blocks * Updated functions to use a `foreach` * Added webpack to compile our assets into a single resource * Added a script to modify a core block style. Adding a new `register_block_type` function is pretty easy, but what does that code look like repeated 20 times or more? Instead of that you can add an **array of blocks**, then use a `foreach` to register each block in the array. **Adding Another Dynamic Block** Before we dive in it will be helpful to have a second dynamic block for testing purposes, so create one inside the `src/blocks` directory: ```bash npx @wordpress/create-block@latest block-four --no-plugin --variant dynamic ``` When done creating **block-four** you’ll need to build again by running `npm run build`. This new block won’t be available in the editor just yet, we have to update a few functions first. ### **Create an Array and Add `foreach` Loop** Start by creating an array that allows you to quickly and easily add new blocks to our plugin as needed without having to ever add another `register_block_type` function. Then use a `foreach` to loop through the array and register each block in the `register_block_type` function. Edit the `wp-multi-block.php` file and update the `multiblock_register_blocks` function to look like this: ```php function multiblock_register_blocks() { $custom_blocks = array ( 'block-one', 'block-two', 'block-three', 'block-four', ); foreach ( $custom_blocks as $block ) { register_block_type( __DIR__ . '/build/blocks/' . $block ); } } add_action( 'init', 'multiblock_register_blocks' ); ``` Confirm that these changes work by refreshing the editor or the frontend and adding all four of the blocks. We should end up with something that looks like this: ![An editor view of the four blocks that have been built so far.](https://developer. wordpress.org/news/files/2024/09/block-four-1024x657.png) Now when you add new blocks all that is needed is a quick addition to the array of blocks, which keeps the rest of our code slim and much easier to maintain. ### Combine Block Assets By default, the loading of script files is handled in the `block.json` file. That works well for single block plugins, in a multi-block plugin you might consider streamline loading script files. Now, there are some pros and cons to this approach, it might not make sense for everyone. On one hand, you reduce  the number of loaded items and you have more control over the output. You  also lose a nice feature like loading a `view.js` file only when the block is present on the page. For the purpose of this tutorial, the preferred approach is to combine and compile our JavaScript and CSS files with the idea that you will gZip and host them on a content delivery network (CDN) in the future. To set this up you will add webpack, leverage the core WordPress default webpack config and package this all up into a single script and stylesheet. ### Create a webpack Config File First create a webpack config file. Here you will spread in the webpack config from the `@wordpress/scripts` package as you want to maintain that functionality while adding your own. Start by creating a `webpack.config.js` file in the root folder  of your plugin and paste in the following: ```javascript const defaultConfig = require( '@wordpress/scripts/config/webpack.config' ); const path = require( 'path' ); module.exports = { ...defaultConfig, entry: { 'multi-block-editor': [ path.resolve( __dirname, 'src/multi-block-editor.js' ) ], 'multi-block-frontend': [ path.resolve( __dirname, 'src/multi-block-frontend.js' ) ], }, output: { path: path.resolve( __dirname, 'build' ), filename: '[name].js', }, }; ``` In the webpack file you’re spreading in the config file available as part of the`@ wordpress/scripts` package and then add your own entries that are used to compile and load into the editor and the other to compile assets that will load on the frontend. We’ll give these entry points the names **multi-block-editor** and **multi-block- frontend**. ### Add Editor and Frontend Entry Points Now you need to create our entry point files that you specified in the `webpack. config.js` file. First add the script for the block editor. In the `src` directory create a file called `multi-block-editor.js`, and paste in the following: ```javascript import './blocks/block-one'; import './blocks/block-two'; import './blocks/block-three'; import './blocks/block-four'; ``` Next add the script for the frontend assets. In the `src` directory create a file called `multi-block-frontend.js`, and for now simply paste in the following: ```javascript console.log( 'frontend test' ) ``` ### Enqueue the editor and frontend assets **Enqueue Editor Assets** Now that you have the script and style files being output as single files you need to enqueue them into the editor using the `enqueue_block_editor_assets` action. Open up the `wp-multi-block.php` file and add the following function: ```php function multiblock_enqueue_block_assets() { wp_enqueue_script( 'multi-block-editor-js', plugin_dir_url( __FILE__ ) . 'build/multi-block-editor.js', array('wp-blocks', 'wp-components', 'wp-data', 'wp-dom-ready', 'wp-edit-post', 'wp-element', 'wp-i18n', 'wp-plugins'), null, false ); wp_enqueue_style( 'multi-block-editor-css', plugin_dir_url( __FILE__ ) . 'build/multi-block-editor.css', array(), null ); } add_action( 'enqueue_block_editor_assets', 'multiblock_enqueue_block_assets' ); ``` **Enqueue Frontend Assets** Now you need to enqueue the frontend assets by adding another function to the `wp- multi-block.php` file: ```php function multiblock_enqueue_frontend_assets() { wp_enqueue_style( 'multi-block-frontend-css', plugin_dir_url( __FILE__ ) . 'build/style-multi-block-editor.css', ); wp_enqueue_script( 'multi-block-frontend-js', plugin_dir_url( __FILE__ ) . 'build/multi-block-frontend.js', array(), null, true ); } add_action( 'wp_enqueue_scripts', 'multiblock_enqueue_frontend_assets' ); ``` ### Updating Block Styles In this configuration, each block has a separate file for editor and frontend styles. In most cases, what we are loading on the frontend is also what we want to load in the editor. What I prefer to do here is import my `style.scss` file into the ` editor.scss` file. This way you can maintain one set of frontend classes while adding anything unique to the editor. Here’s an example of how such an `editor.scss` file would look like for **block- one** after a couple of updates. The border is only added in the editor, and by adding `.is-selected` the border only appears when a **block-one** is selected. Update each of the `editor.scss` files for each of our blocks to import the `style. scss` file like this example: ```language-sass @import "./style.scss"; .wp-block-example-block-one.is-selected { border: 2px dotted #f00; } ``` ### Removing Unused Files and Clean Up block.json Now that you have single file assets in place we can go through our blocks and delete any **view.js** files not being used, these are no longer loaded via the block. If you are adding blocks to your own multi-block plugin and have blocks that require this functionality you can include those in our frontend entry point js file. To learn how the view.js file plays a role in using the Interactivity API, you can read [A first look at the Interactivity API](https://developer.wordpress.org/news/2024/04/11/a-first-look-at-the-interactivity-api/) on this site.  In each of the blocks, edit the `block.json` files to remove references to the js and css files. You are looking to remove the following items: ```language-json "editorScript": "file:./index.js", "editorStyle": "file:./index.css", "style": "file:./style-index.css", "viewScript": "file:./view.js" ``` **Note:** in the dynamic blocks make sure you **_do not remove_** the render line that looks like this: ```language-json "render": "file:./render.php" ``` Go ahead and run `npm run build` to generate new plugin assets and go test the new block in the editor as well as the frontend of the development environment. ### Additional Scripts One final thing that you will include in your plugin is an example of how to add additional scripts to the compiled editor script. These scripts can be used for block modifications or variations, slot fills, or other functionality. Add a simple script to remove the outline style on a core button. **Add a Script to Modify a Block Style** First you need to install a couple of new dependency: ```bash npm install @wordpress/blocks @wordpress/dom-ready --save-dev ``` Once the package is installed create a script file like the following: * Create a scripts directory at `src/scripts/modifications` * Create a file named `button.js` and paste the following: ```javascript import { unregisterBlockStyle } from '@wordpress/blocks'; import domReady from '@wordpress/dom-ready'; domReady(() => { unregisterBlockStyle( 'core/button', array( 'outline' ) ) }); ``` Now you need to include this script into the block editor entry point: * Edit `multi-block-editor.js` * Import the `button.js` so your revised file looks like: ```javascript // Import the plugin blocks import './blocks/block-one'; import './blocks/block-two'; import './blocks/block-three'; import './blocks/block-four'; // Import other block scripts import './scripts/modifications/button'; ``` Now all you need to do is update the build files with `npm run build` and refresh the editor. Try adding a button you’ll see the `outline` style option is now gone. If you are interested in more ways to curate the editor experience, the post [15 ways to curate the WordPress editing experience](https://developer.wordpress.org/news/2024/07/04/15-ways-to-curate-the-wordpress-editing-experience/) offers additional code snippets to streamline content creation, ensure consistency, and create personalized editing experiences. ## Wrapping Up **Author’s note:** I hope others out there find benefit in this approach to building a block plugin in some of their future work. I’m sure there are several ways that my approach can be approved upon, and I would love to hear how we can do that as a community. For an tutorial with a different approach, see the article [Setting up a multi-block plugin using InnerBlocks and post meta](https://developer.wordpress.org/news/2024/05/22/setting-up-a-multi-block-using-inner-blocks-and-post-meta/). ## Resources **Documentation** * [Block Editor Handbook](https://developer.wordpress.org/block-editor/) * [Get started with create-block](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-create-block/) **Developer Hours** * [Modern WordPress development with the wp-scripts package](https://www.youtube.com/watch?v=cakxgM2UgbE) * [Hello, Blocks! – An Introduction to Block Development](https://www.youtube.com/watch?v=U3Zs3NOTLt4) * [Do you really need a custom block? Let’s explore alternatives](https://www.youtube.com/watch?v=V6-yg-GKTZg&list=PL1pJFUVKQ7ETApyQQlt3pLNjPx2HrQwl5&index=3&t=469s&pp=iAQB) **Courses on Learn.WordPress** * [Introduction to Block Development: Build your first custom block](https://learn.wordpress.org/course/introduction-to-block-development-build-your-first-custom-block/) * [Developing your first WordPress block](https://learn.wordpress.org/course/developing-your-first-wordpress-block/) * [Converting a Shortcode to a Block](https://learn.wordpress.org/course/converting-a-shortcode-to-a-block/) _Props [@bph](https://profiles.wordpress.org/bph/), [@milana\_cap](https://profiles.wordpress.org/milana_cap/) and [@flexseth](https://profiles.wordpress.org/flexseth/) for the review, feedback and additional resources._ **Share the post: ** **Categories:** [Advanced](https://developer.wordpress.org/news/category/advanced/), [Blocks](https://developer.wordpress.org/news/category/blocks/), [Concepts](https://developer.wordpress.org/news/category/concepts/), [Plugins](https://developer.wordpress.org/news/category/plugins/) **Tags:** [Block development](https://developer.wordpress.org/news/tag/block-development/), [Learning](https://developer.wordpress.org/news/tag/learning/) ## 28 responses to “How to build a multi-block plugin” 1. ![Drivingralle Avatar](https://secure.gravatar.com/avatar/a436ab0e9c96432f9852e6c89a6efba387bbbd837e6f3eb29d1c97edad80f6ec? s=40&d=identicon&r=g) 2. [Drivingralle](https://profiles.wordpress.org/drivingralle/) 3. [September 17, 2024](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-12123) 4. Images right after “Here’s what my updated directory structure looks like in VS Code:” and “Let’s confirm that these changes work and refresh the editor and add both of our blocks. We should end up with something that looks like this:” are swapped. And after adding the second block too. 5. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=12123#respond) 6. a. ![Troy Chaplin Avatar](https://secure.gravatar.com/avatar/fa03166fff0491864a56577a5a7315a6671cfb47eee98140b29d271fa1eb9322? s=40&d=identicon&r=g) b. [Troy Chaplin](https://profiles.wordpress.org/areziaal/) c. [September 17, 2024](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-12125) d. Thank you for the heads up, I’ve updated the images that were mixed up. e. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=12125#respond) f. ![Kani Avatar](https://secure.gravatar.com/avatar/b9c39a4cc2687d0b29101c2a41bfccdaeae9e10c862ed7f368e875db2e01475d? s=40&d=identicon&r=g) g. Kani h. [November 5, 2024](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-13565) i. Should I include view.js in multi-block-frontend.js if I use it? j. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=13565#respond) 7. ![mrwweb Avatar](https://secure.gravatar.com/avatar/5612a0b1e26e958b7cb153ad8d69325be61525b2bba4819361bb69f127ec34b4? s=40&d=identicon&r=g) 8. [mrwweb](https://profiles.wordpress.org/mrwweb/) 9. [September 18, 2024](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-12150) 10. Really great post! It’s awesome to have a canonical reference for this very common need (even on small sites!). 11. FYI, “If you are building long with this tutorial”, should have “along” instead of “long” (missing “a”). 12. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=12150#respond) 13. a. ![Troy Chaplin Avatar](https://secure.gravatar.com/avatar/fa03166fff0491864a56577a5a7315a6671cfb47eee98140b29d271fa1eb9322? s=40&d=identicon&r=g) b. [Troy Chaplin](https://profiles.wordpress.org/areziaal/) c. [September 23, 2024](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-12236) d. Thanks, I’ve made the update e. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=12236#respond) 14. ![Aileen Avatar](https://secure.gravatar.com/avatar/289511550d47afdbe3714908f9157ed6c4895f126a8ba07d23ec0b3782171a57? s=40&d=identicon&r=g) 15. Aileen 16. [September 22, 2024](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-12213) 17. This is really helpful, thank you. I have a question – what if I want to keep the styles and scripts for the blocks separate, as they were originally. But I also want to add and build some additional scripts, eg for block variations or customisations. Is that possible? What would I need in webpack.config.js to build my additional scripts but to keep the blocks separate as they were before? 18. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=12213#respond) 19. a. ![Troy Chaplin Avatar](https://secure.gravatar.com/avatar/fa03166fff0491864a56577a5a7315a6671cfb47eee98140b29d271fa1eb9322? s=40&d=identicon&r=g) b. [Troy Chaplin](https://profiles.wordpress.org/areziaal/) c. [September 23, 2024](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-12237) d. Thank you, glad you found it helpful. While I haven’t tested what you are looking to do, this came up as I was writing the article and I do want to cycle back and see what that could look like. I may take a look at this soon, if so I’ll let you know. e. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=12237#respond) f. ![Troy Chaplin Avatar](https://secure.gravatar.com/avatar/fa03166fff0491864a56577a5a7315a6671cfb47eee98140b29d271fa1eb9322? s=40&d=identicon&r=g) g. [Troy Chaplin](https://profiles.wordpress.org/areziaal/) h. [September 24, 2024](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-12241) i. Hey Aileen, j. I had a look at this and came up with a solution to build blocks individually while adding any other additional scripts that are needed. I have pushed a branch on the example repo that has a functional solution: [https://github.com/wptrainingteam/building-multi-block-plugin/tree/DontCombineBlockScripts](https://github.com/wptrainingteam/building-multi-block-plugin/tree/DontCombineBlockScripts) k. Key changes were: – Removed the webpack.config.js – Created uniquely named webpack.custom.js and set this up without importing anything from wordpress/ scripts – Removed the imports of all the blocks from multi-block-editor.js l. Once I recreated my blocks so I had all the files previously deleted and ran my build everything worked as expected after some testing. m. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=12241#respond) n. a. ![Aileen Avatar](https://secure.gravatar.com/avatar/289511550d47afdbe3714908f9157ed6c4895f126a8ba07d23ec0b3782171a57? s=40&d=identicon&r=g) b. Aileen c. [September 24, 2024](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-12242) d. This looks, great, I’ll definitely try it, just what I need for my plugin right now. Thank you! e. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=12242#respond) f. ![Aileen Avatar](https://secure.gravatar.com/avatar/289511550d47afdbe3714908f9157ed6c4895f126a8ba07d23ec0b3782171a57? s=40&d=identicon&r=g) g. Aileen h. [September 24, 2024](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-12245) i. Does your new version still support adding additional scripts (eg variations or your Unregister Block Style example)? I don’t see that in your example, and I am having trouble getting that to work in the build. j. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=12245#respond) k. a. ![Troy Chaplin Avatar](https://secure.gravatar.com/avatar/fa03166fff0491864a56577a5a7315a6671cfb47eee98140b29d271fa1eb9322? s=40&d=identicon&r=g) b. [Troy Chaplin](https://profiles.wordpress.org/areziaal/) c. [September 24, 2024](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-12261) d. I took a look at you’re right, there’s still something that is not functioning properly and while the additional script is being built and enqueued, it is not functioning as expected. I have an idea why, but not clear on how to fix just yet. e. But I’m quite curious now as well so I’m gonna find some time to try and figure this one out. I will reply and let you know if I do find a solution. f. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=12261#respond) g. ![Troy Chaplin Avatar](https://secure.gravatar.com/avatar/fa03166fff0491864a56577a5a7315a6671cfb47eee98140b29d271fa1eb9322? s=40&d=identicon&r=g) h. [Troy Chaplin](https://profiles.wordpress.org/areziaal/) i. [September 26, 2024](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-12291) j. Hey Aileen, k. I’m happy to say that I put together a solution that will maintain the original output of the blocks when building while adding additional scripts for various block modifications and more. l. The main change here is in the webpack config file entry points where I am including the entry from the default config. This handles the block build separate from the other entries, where you can add as many as you want. m. I have pushed these changes to a branch that you can see here: [https://github.com/wptrainingteam/building-multi-block-plugin/tree/DontCombineBlockScripts](https://github.com/wptrainingteam/building-multi-block-plugin/tree/DontCombineBlockScripts) n. As a part of this update I also removed the original blocks and created one for a static block and one for a dynamic block, as well as a new admin javascript file. I also updated the structure in the src folder to better organize the script entry points and adding a helpers folder for various other scripts. o. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=12291#respond) p. a. ![Aileen Avatar](https://secure.gravatar.com/avatar/289511550d47afdbe3714908f9157ed6c4895f126a8ba07d23ec0b3782171a57? s=40&d=identicon&r=g) b. Aileen c. [September 27, 2024](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-12310) d. Great, this works for me, thank you. My plugin is adding a custom post type, meta fields and variations to core blocks. Also a couple of custom blocks and patterns (which are only in use on the custom post type, so I only want the block css and js when the blocks are added, not everywhere). The build process is now working for the blocks and the other scripts too. Thanks for your help! 20. ![Mark Solano Avatar](https://secure.gravatar.com/avatar/10003798b3cb0bb92b769af2e620499880e08c1faf22e5cc4c2184def5e202c7? s=40&d=identicon&r=g) 21. Mark Solano 22. [September 24, 2024](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-12258) 23. Thanks this is helpful, especially for a beginner like me. While I was working on my interactivity api and followed the link that you have suggested. I have encountered a problem with my view.js that doesn’t get built on the build directory, or basically the code @wordpress/interactivity storing and registering a context doesn’t get compiled to any files which causes my block not to interact. 24. How do I put my interactivity code in this kind setup? 25. Thanks 26. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=12258#respond) 27. a. ![Troy Chaplin Avatar](https://secure.gravatar.com/avatar/fa03166fff0491864a56577a5a7315a6671cfb47eee98140b29d271fa1eb9322? s=40&d=identicon&r=g) b. [Troy Chaplin](https://profiles.wordpress.org/areziaal/) c. [September 25, 2024](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-12267) d. Hey Mark, e. I am glad you found this helpful. The issue with the view.js was noted under the “Removing Unused Files and Clean Up block.json” section, but as per the comments between myself and Aileen above I am hoping to find a solution to this issue. f. If you only want to compiles blocks and have no need for the extra scripts then you can follow the article right up to the “Combine Block Assets” section and blocks will still compile as you would expect in a basic create-block setup. g. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=12267#respond) h. ![Troy Chaplin Avatar](https://secure.gravatar.com/avatar/fa03166fff0491864a56577a5a7315a6671cfb47eee98140b29d271fa1eb9322? s=40&d=identicon&r=g) i. [Troy Chaplin](https://profiles.wordpress.org/areziaal/) j. [September 26, 2024](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-12292) k. Hey Mark, l. I have pushed updates to a branch that provides a method to build block as per the default build process will also including additional scripts for a variety of needs that output in separate files. m. I am not familiar with building anything with the Interactivity API, but as a way to test that with a multi block plugin I plan to look into this in the near future. n. You can find the latest branch here: [https://github.com/wptrainingteam/building-multi-block-plugin/tree/DontCombineBlockScripts](https://github.com/wptrainingteam/building-multi-block-plugin/tree/DontCombineBlockScripts) o. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=12292#respond) 28. ![Huan Avatar](https://secure.gravatar.com/avatar/1ac80e2d5ca9079d8cf1cc29f968e56e1ac98ed1fdad537139c5267bcbedfab0? s=40&d=identicon&r=g) 29. [Huan](https://profiles.wordpress.org/daodaotw/) 30. [September 25, 2024](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-12275) 31. Thank you Troy, multi-block is an important topic for devs. 32. My use case is similar to Aileen: – separate scripts for interactive blocks ( Interactivity API’s `–experimental-modules` instead of `–webpack-copy-php`) – non-block script file for core blocks’ filters 33. I’m curious about the use cases for combined script? I thought separate scripts suits most use cases in a multi-block plugin. 34. Looking forward to your solution. 🙂 35. Discussions about webpack config: [https://github.com/WordPress/gutenberg/issues/55936](https://github.com/WordPress/gutenberg/issues/55936) [https://github.com/WordPress/gutenberg/discussions/44010](https://github.com/WordPress/gutenberg/discussions/44010) 36. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=12275#respond) 37. a. ![Troy Chaplin Avatar](https://secure.gravatar.com/avatar/fa03166fff0491864a56577a5a7315a6671cfb47eee98140b29d271fa1eb9322? s=40&d=identicon&r=g) b. [Troy Chaplin](https://profiles.wordpress.org/areziaal/) c. [September 25, 2024](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-12288) d. Hey Huan, e. My use case was to serve one combined JS and CSS file via a CDN in a large scale environment. But also, I was not familiar with the impact of not having the view.js file was, as I have not had time to properly wrap my head around the Interactivity API. This was mentioned during the review of the article and a note about this was added. Since then I’ve been interested in finding a solution so people who find this article can make the choice between the 2 approaches. f. Thank you for the links, I will check those out later. The issues I currently face with the solution I am working on directly relates to webpack and what the build process is doing when I import the default config. I need to dive into that and see what other options I may have. g. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=12288#respond) h. ![Troy Chaplin Avatar](https://secure.gravatar.com/avatar/fa03166fff0491864a56577a5a7315a6671cfb47eee98140b29d271fa1eb9322? s=40&d=identicon&r=g) i. [Troy Chaplin](https://profiles.wordpress.org/areziaal/) j. [September 26, 2024](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-12293) k. Thanks again for those links Huan, I found the solution to the issue of how to build blocks using the default method while adding additional scripts in separate files. l. I would assume because the build is now default this would have no impact on the Interactivity API, but I hope to find some time soon to look into this and setup a test in this branch: [https://github.com/wptrainingteam/building-multi-block-plugin/tree/DontCombineBlockScripts](https://github.com/wptrainingteam/building-multi-block-plugin/tree/DontCombineBlockScripts) m. I’m not familiar with using –experimental-modules so I can’t say how this applies. Could this work in addition to –webpack-copy-php? n. Cheers! o. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=12293#respond) p. a. ![Huan Avatar](https://secure.gravatar.com/avatar/1ac80e2d5ca9079d8cf1cc29f968e56e1ac98ed1fdad537139c5267bcbedfab0? s=40&d=identicon&r=g) b. [Huan](https://profiles.wordpress.org/daodaotw/) c. [September 26, 2024](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-12300) d. Thanks Troy for your branch update. I see there are moving parts (`devDependencies` and ‘webpack.config.js’) and I’m afraid of breaking, so currently I put multi blocks in one plugin (following basic setup) and non-block scripts in another plugin. e. There seems no “WordPress standard” regarding webpack config for multi-block and non-block all-in-one, maybe your approach will be part of the standard. I try to raise awareness by sharing: [https://github.com/WordPress/gutenberg/issues/55936#issuecomment-2376364088](https://github.com/WordPress/gutenberg/issues/55936#issuecomment-2376364088) f. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=12300#respond) g. ![Stefano Avatar](https://secure.gravatar.com/avatar/91db05863fab71aeade0dec63660fe332672727d0f7d5dac4fec60fb76f8547e? s=40&d=identicon&r=g) h. [Stefano](https://profiles.wordpress.org/stefacchio/) i. [October 18, 2024](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-12783) j. Hi Troy, thanks for your tutorial. Can you help me with how manage languages with multi blocks? I’d like to have languages file for plugin and then languages files for each block. Is my logic correct? If Yes, how can I configure it? k. Thanks! l. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=12783#respond) m. a. ![Troy Chaplin Avatar](https://secure.gravatar.com/avatar/fa03166fff0491864a56577a5a7315a6671cfb47eee98140b29d271fa1eb9322? s=40&d=identicon&r=g) b. [Troy Chaplin](https://profiles.wordpress.org/areziaal/) c. [October 26, 2024](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-13089) d. Hey Stefano, apologies for the late reply. I won’t pretend to know what I’m doing with language files so unfortunately I am not able to give you any advice here as I would hate to point you in the wrong direction. e. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=13089#respond) 38. ![Vladislav M Avatar](https://secure.gravatar.com/avatar/fa43c82e29fd45e444da9e6ec9298c2a5f239532ce659cec9923c789613a9cd3? s=40&d=identicon&r=g) 39. [Vladislav M](https://profiles.wordpress.org/mrngstr/) 40. [October 19, 2024](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-13032) 41. There is an easier way to register multiple blocks automatically. Just use list_files() function. Like this: $blocks = list_files( __DIR__ . ‘/public/blocks/’, 1 ); foreach ($blocks as $block) register_block_type( $block ); 42. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=13032#respond) 43. a. ![Troy Chaplin Avatar](https://secure.gravatar.com/avatar/fa03166fff0491864a56577a5a7315a6671cfb47eee98140b29d271fa1eb9322? s=40&d=identicon&r=g) b. [Troy Chaplin](https://profiles.wordpress.org/areziaal/) c. [October 27, 2024](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-13094) d. Thanks for the suggestion Vladislav. I had some issues using list_files, but I took a few minutes to explore a similar options as I really like this idea and wanted to add this in another project. Here’s the code that I used that works great: e. public function multiblock_register_blocks() { // Get the path to the blocks directory and an array of block folders $blocks_dir = __DIR__ . ‘/build/blocks/’; $block_folders = glob($blocks_dir . ‘*’, GLOB_ONLYDIR); f. // Iterate over each block folder, checking for a block.json file foreach ( $block_folders as $block_path) { $block_json = $block_path . ‘/block.json’; g. if (file_exists($block_json)) { register_block_type($block_path); } } } h. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=13094#respond) 44. ![Onno Avatar](https://secure.gravatar.com/avatar/9a8f910a07102b7cc6101e4cb88f40fb105547da16b3f445ef186cf3ef947291? s=40&d=identicon&r=g) 45. Onno 46. [October 29, 2024](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-13107) 47. Love the How to,, it really helpt me moving on. 48. What I’m struggling with (as a newbie) is including images into my multi-block- plugin. As long as i reference images with a static url in the src folder, it works fine. When I add the images and image folder manually to the build folder and use “plugin_dir_url( __FILE__ ) . ‘images/meal-type-dinner.jpg’” to get the image, it works fine as well. Here is a link to the stack overflow item I created with more details: [https://stackoverflow.com/questions/79102376/how-to-include-images-in-the-build-of-a-wordpress-multi-block-plugin](https://stackoverflow.com/questions/79102376/how-to-include-images-in-the-build-of-a-wordpress-multi-block-plugin) 49. But I cannot get the image folder and content included in the build automatically. What am I missing? 50. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=13107#respond) 51. ![Alwyn Barry Avatar](https://secure.gravatar.com/avatar/2a62c756e32000a959f02d3b7bbc2789af95fb13f543de0352df0a03cb734d03? s=40&d=identicon&r=g) 52. [Alwyn Barry](https://github.com/AlwynBarry) 53. [April 16, 2025](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-17854) 54. I have a similar problem to @Onno but with a different resource. 55. I am including HTML for Alpine.js in the output of a number of blocks, and I have the common html files in a separate directory called ‘inc’. When I do a build the ‘inc’ folder is always not copied to the build folder. If copied manually everything works, but the build should do the copy. 56. I also want to include a common fonts directory which is copied to the build folder. 57. I’m not sure how to achieve this from the description above – though it is really clear for what you are doing. I also can’t find any resource online which seems to answer this need. 58. Any help would be greatly appreciated! 59. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=17854#respond) 60. ![Rachel Avatar](https://secure.gravatar.com/avatar/daec184bd36571411f2d61003a2d355804d6a997fd8f583631bbbb1c2f267a47? s=40&d=identicon&r=g) 61. [Rachel](https://rrvasquez.com/) 62. [November 24, 2025](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-20211) 63. Thank you so much! This is the first reliable resource I’ve found that details the step by step process of having multiple blocks, not just one block. How the scripts work and the expected file structure were a huge help! 64. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=20211#respond) 65. a. ![Troy Chaplin Avatar](https://secure.gravatar.com/avatar/fa03166fff0491864a56577a5a7315a6671cfb47eee98140b29d271fa1eb9322? s=40&d=identicon&r=g) b. [Troy Chaplin](https://profiles.wordpress.org/areziaal/) c. [December 5, 2025](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/#comment-20576) d. Hey Rachel, glad that you found this article helpful. I wrote a follow up to this with an improved setup that you should check out, it follows more of a core standard for block builds, doesn’t combine all the assets, and allows for building interactivity blocks alongside static and dynamic blocks. [https://developer.wordpress.org/news/2025/08/refactoring-the-multi-block-plugin-build-smarter-register-cleaner-scale-easier/](https://developer.wordpress.org/news/2025/08/refactoring-the-multi-block-plugin-build-smarter-register-cleaner-scale-easier/) e. [Reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?replytocom=20576#respond) ### Leave a Reply 󠀁[Cancel reply](https://developer.wordpress.org/news/2024/09/how-to-build-a-multi-block-plugin/?output_format=md#respond)󠁿 Your email address will not be published. Required fields are marked * Comment * Name * Email * Website Save my name, email, and website in this browser for the next time I comment. Notify me of follow-up comments by email. Notify me of new posts by email. Δ ## Have an idea for a new post? ### 󠀁[Learn how to contribute](https://developer.wordpress.org/news/how-to-contribute/)󠁿 Share your knowledge with fellow WordPress developers. Search ### 󠀁[Review tips and guidelines](https://developer.wordpress.org/news/tips-and-guidelines-for-writers/)󠁿 Everything you need to know about writing for the Blog. ## Subscribe to the Blog Email Address Join 1,773 other subscribers * [About](https://wordpress.org/about/) * [News](https://wordpress.org/news/) * [Hosting](https://wordpress.org/hosting/) * [Privacy](https://wordpress.org/about/privacy/) * [Showcase](https://wordpress.org/showcase/) * [Themes](https://wordpress.org/themes/) * [Plugins](https://wordpress.org/plugins/) * [Patterns](https://wordpress.org/patterns/) * [Learn](https://learn.wordpress.org/) * [Documentation](https://wordpress.org/documentation/) * [Developers](https://developer.wordpress.org/) * [WordPress.tv ](https://wordpress.tv/) * [Get Involved](https://make.wordpress.org/) * [Events](https://events.wordpress.org/) * [Donate ](https://wordpressfoundation.org/donate/) * [Swag ](https://mercantile.wordpress.org/) * [WordPress.com ](https://wordpress.com/?ref=wporg-footer) * [Matt ](https://ma.tt/) * [bbPress ](https://bbpress.org/) * [BuddyPress ](https://buddypress.org/) The WordPress® trademark is the intellectual property of the WordPress Foundation. * [Visit our X (formerly Twitter) account](https://www.x.com/WordPress) * [Visit our Bluesky account](https://bsky.app/profile/wordpress.org) * [Visit our Mastodon account](https://mastodon.world/@WordPress) * [Visit our Threads account](https://www.threads.net/@wordpress) * [Visit our Facebook page](https://www.facebook.com/WordPress/) * [Visit our Instagram account](https://www.instagram.com/wordpress/) * [Visit our LinkedIn account](https://www.linkedin.com/company/wordpress) * [Visit our TikTok account](https://www.tiktok.com/@wordpress) * [Visit our YouTube channel](https://www.youtube.com/wordpress) * [Visit our Tumblr account](https://wordpress.tumblr.com/)