Blocks Plugin Unit Test: Choosing the Perfect Gutenberg Plugin for your Website and Theme

Since the launch of new WordPress Gutenberg block editor, there have been a lot of blocks plugin added on the plugin directory. Most of these Gutenberg blocks plugins provide several collection of useful blocks that you can integrate easily on your website. The huge question is which of these plugins perfectly fits your needs and works smoothly with your current theme?

Sure you can try themes with sample contents on it, but there has been no way to do unit testing when it comes to Gutenberg blocks. You have to manually add each block that you want to test to the editor and hope that it’s not broken on both backend and frontend views.

It’s probably not news to you that I’ve created EditorsKit plugin which provides set of tools for Gutenberg editor. One of my goals with this plugin is to provide help to users to make the switch from Classic Editor easier. This is the main reason I’ve added a lot of formatting options that are available on TinyMCE but missing on the block editor.

To achieve my goals, I’m working really hard to provide help on EditorsKit Facebook Community, create Gutenberg Editor Tips & Tricks on Twitter, and provide several tutorials on this website. I’m not stopping there though; I believe that I can lift a huge amount of weight when it comes to making the blocks plugin selection easier for all users.

Why do we need Blocks Plugin Unit Testing?

A lot of you probably have selected one or two favourite blocks plugin based on the creator and available blocks. I’ve seen a lot of growth for each blocks plugin on the directory. But for those of you who don’t, here’s why you have to do unit testing first.

Check all available blocks.

You have to check how all of those blocks work or are displayed on your website. This will give you an idea if this block can be integrated on your niche and posts. Having checked all blocks means you can easily select which of those blocks will need to be disabled on the Block Manager.

Theme Support and Compatibility.

Does your activated theme support all the blocks available on the plugin? Are all blocks being displayed correctly on the frontend? Are all nooks compatible with the theme styling? You have to consider these questions to be able to fully utilize the power of the blocks plugin.

Check for Invalid Blocks.

With tons of blocks available you can never be sure if all of those are valid and working perfectly until you use them. Some of these blocks might need compatibility check with the current Gutenberg version that you are using. Having them checked before deciding your plugin of choice is very crucial. You might regret not testing it first and end up switching later on.

These are only the major reasons, and you could probably think of a few more.

How to do Blocks Plugin Unit Testing?

I’ve explained the whys, and now let us proceed to the hows. As I’ve mentioned, I’m  trying to provide the easiest solution as much as possible. There are only a few steps and I hope this could help you find your perfect blocks plugin!

1. Install EditorsKit plugin.

First, you need to install EditorsKit plugin which is available for free on the plugin directory. Why? You need this plugin to import the .json file format that is needed for testing your choice of blocks plugin. You can deactivate the plugin after testing if you don’t want to use the rest of its available tools and features.

Install EditorsKit plugin.
Install EditorsKit plugin.

2. Choose between the available blocks plugin.

Now that you’ve installed EditorsKit, the next step is to install the blocks plugin. You have to install the plugin of your choice and activate it as well.

I’ve created a sample content for each of the available blocks in order for you to check them. Click the download sample content to get the .json file format that you need to import on the Gutenberg editor.

Atomic BlocksDownload Unit Testing Content
CoBlocksDownload Unit Testing Content
Kadence BlocksDownload Unit Testing Content
Kioken BlocksDownload Unit Testing Content
Otter BlocksDownload Unit Testing Content
StackableDownload Unit Testing Content
Ultimate Add-on for GutenbergDownload Unit Testing Content

3. Drag & drop the downloaded .json file.

Next, you need to create a post or page on your WordPress website. Then drag and drop the .json file on the content. This will automatically create all the available blocks with sample content. Check if all these blocks are valid and preview if all of them are displaying perfectly on the frontend.

Drag & drop the downloaded .json file.

That’s it! Pretty easy. You can repeat the process if you want to try the other plugins as well. This will help you choose those which  are supported by your theme and check if all the stylings are working as expected.

Can I disable blocks that I don’t need?

When you are done deciding which of the plugins above perfectly suits your needs, you now have to manage those available blocks. 

If you do not need any of them, you can disable those blocks on the Block Manager. I’ve also added a special feature on EditorsKit that will only be available after the .json file from this tutorial is imported. Just go to Advanced Panel and click the “Remove & Disable Block” button; and block/s will automatically be disabled and synced into Block Manager.

Disable selected imported block when unit testing.
Disable selected imported block when unit testing.

Blocks Plugin Unit Test: Choosing the Perfect Gutenberg Plugin for your Website and Theme

More…

I hope this tutorial and EditorsKit features add into my goal of providing help to make the usage of Gutenberg block editor a lot easier . If you think you can help or provide any suggestions, please let me know and I will be very happy to check them. You could also reach out to me on Twitter anytime.

8 responses to “Blocks Plugin Unit Test: Choosing the Perfect Gutenberg Plugin for your Website and Theme”

  1. Hey how do I get my blocks plugin on your list and unit tested?

    1. Jeffrey Carandang Avatar
      Jeffrey Carandang

      Thanks! I’ve sent you a direct message via Twitter.

  2. thanks for reviewing gutenberg plugins. it is step forward. though i can not see anything about the Getwid plugin. Why you did not test its blocks?

    1. Jeffrey Carandang Avatar
      Jeffrey Carandang

      Thanks! I’m really glad that you find it really helpful. I’ll be adding few more plugins on the list 🙂 I’ll check if I can add Getwid as well.

  3. So helpful! What about a unit test json for all the core blocks? (Maybe only a couple of all those embed blocks) And would you be willing to post to Git or someplace to always get the latest version and allow pull requests? Keeping this sort of thing up to date with the frantic pace of block updates is tough.

    1. Jeffrey Carandang Avatar
      Jeffrey Carandang

      Thanks Colin! I’m working on that as well. I’ll definitely let you know once it’s available.

  4. Jeffrey, thank you for this tutorial. So so helpful and easy to follow. You’re a gem my friend.

    1. Jeffrey Carandang Avatar
      Jeffrey Carandang

      Thanks Rita! I’m really glad that you find it really helpful and easy. I hope you’ll find the perfect blocks plugin for your website 🙂

Leave a Reply

I won’t send you spam. Unsubscribe at any time.

%d bloggers like this: