|

Multiple Blocks in One WordPress Plugin

Home / Guides / Converting Shortcodes to Blocks in WordPress / Multiple Blocks in One WordPress Plugin
Lesson 7 of 7
4m read.
Advanced
8m video.

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

Notes

To fully understand this guide, you should go through Part 1 of our series on How to convert shortcodes to blocks in WordPress. In that guide, we create the first block for our plugin.

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.

New src folder structure.
New src folder structure.

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.
New build folder structure.
New build folder structure.

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.
Newblock Class file.
Newblock Class file.

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.
Newblock shortcode Class.
Newblock shortcode Class.

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.

Add Newblock Classes to Init the file.
Add Newblock Classes to Init the file.

8. Test the new block.

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

Testing the Newblock and Shortcode.
Testing the Newblock and Shortcode.