Multiple Blocks in One WordPress Plugin

This guide will show you how to create multiple blocks in one WordPress plugin. We will add a new block to our plugin, which currently has one block – the scbdemo block.

Video tutorial: Create Multiple blocks in one WordPress plugin

GitHub Repo

You can find the code for this guide on scbdemo: Part 2 branch on GitHub.

How to Create Multiple Blocks in WordPress

1. Create a new folder inside the src folder.

Open the plugin directory inside your code editor and navigate to the src folder. Inside src, create a new folder for the new block.

For this tutorial, we will create a new folder named newblock which will be the name for our block.

2. Copy all files from the first block (scbdemo) to newblock

Select all files inside the first block – scbdemo block. Copy and paste the files into the newblock folder.

You should copy and paste the following files into the newblock folder.

• block.json
• edit.js
• editor.scss
• index.js
• style.scss

3. Replace “scbdemo” with “newblock” inside the new block files.

You will now focus on the files inside the newblock folder. Loop through these files, and replace every instance of the scbdemo text with the newblock text.

For block.json, you will change the following.

• Edit the name of the block on line 4.
• Change the block description on line 9.
• Edit text domain on line 13.

For edit.js, change the block attribute for the Server Side Render. Adjust it from create-block-scbdemo to create-block-newblock.

In editor.scss and style.scss, change the class name for the block. Set the .wp-block-create-block-scbdemo to .wp-block-create-block-newblock on lines 7 and 8, respectively.

If there are any other files within the newblock folder with the old scbdemo text, change it to newblock.

4. Run Build

Run the command npm run build to compile the code for the new block.

After the build process, you will notice two folders inside the build folder. These are;

• scbdemo – Compiled code for our first block.
• newblock – Compiled code for the new/second block.

5. Create a new Class – Newblock.

Inside our plugin, go to core/Blocks. Create a new class – Newblock.php.

Copy the code inside Blocks/Scbdemo.php into the new Class file – Newblock.php.

Make changes to the code within Newblock.php. That is, adjust the;

• Class name to Newblock on line 15.
• Init hook callback function to create_newblock_init on lines 23 and 42.
• Plugin path to build/newblock so that we reference the build files for our new block.
• Shortcode callback method to get_newblock_shortcode on lines 47 and 33.
• Name of shortcode our function will return to [mrk_newblock] on line 34.

6. Create a new Shortcode – NewBlock

Inside our plugin, go to core/Shortcode. Create a new class – Newblock.php.

Copy the code inside Shotcodes/Scbdemo.php into the new Class file – Newblock.php.

Make changes to the code within Newblock.php. That is, change;

• Class name to Newblock on line 15.
• Name of the Shortcode to [mrk_newblock] on line 23.
• The Shortcode callback method to ‘get_newblock_shortcode‘ on lines 23 and 31.
• The output of the new block to “New Block Shortcode” on line 33.

7. Register the NewBlock Classes in Init.php

Open the Init.php file. Add the NewBlock (class for the block) and NewBlock shortcode class to the get_services array, as seen on lines 25 and 23, respectively.

8. Test the new block.

Return to WP Admin and open a demo page. Add the newblock block and the [mrk_newblock] shortcode.