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.
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 Blocks | Download Unit Testing Content |
| CoBlocks | Download Unit Testing Content |
| Kadence Blocks | Download Unit Testing Content |
| Kioken Blocks | Download Unit Testing Content |
| Otter Blocks | Download Unit Testing Content |
| Stackable | Download Unit Testing Content |
| Ultimate Add-on for Gutenberg | Download 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.
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.
Blocks Plugin Unit Test: Choosing the Perfect Gutenberg Plugin for your Website and Theme
Tweet
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.
Leave a Reply