For some time now I wanted to push an update on the Code Snippet DM plugin to add support for Gutenberg blocks. It was a requested feature from users and also a great way for me to start testing with Gutenberg blocks.

I’ve stayed away from Gutenberg since I don’t use it in my development process and there are very few clients at this moment that even use the Gutenberg editor. Plus, I wasn’t very eager to try it back when it appeared in 2018, or somewhere around that time.

Given that some years have passed and WordPress is pushing the Gutenberg editor as default now, I imagined that this is a mature product that is ready to be used and I should give it a try.

Tutorials

To get started you can use a tutorial, here are some of the tutorials that I looked over:

The first 2 are from WordPress and they do touch on the main aspects of how to create a block or a plugin that supports blocks, I still feel is not a complete tutorial and I’ll get to that point in the Issues section.

The Kinsta tutorial is very detailed, so I recommend following that one.

Learning curve

To create the Gutenberg blocks you will need to use React. I never used React before, this was my first time. I’m familiar with VueJS, so that helped a lot.

But if you take into account that this uses React in order to create/compile the final files for your blocks, I would say there is a big learning curve if you’re not familiar with the process.

You will need to have NodeJS installed on your machine, you need to know how to install npm packages, be aware that you need to start the process, run the build, etc.

The good thing is that you can use

Copy Code 


npx @wordpress/create-block gutenpride --template @wordpress/create-block-tutorial-template

and you will get a project template set up for you to start working on your block.

It will have all the scaffolding required and it will be ready to compile.

Now the tricky part is that you will have to navigate the WordPress documentation or the repository in order to find what type of component you require to create your blocks. All the tutorials and examples use only the RichText component.

Issues

My main complaint about Gutenberg block creation is the WordPress documentation. I feel it lacks a lot of information or it’s not well presented.

As I looked through the components available, some of them didn’t have all the props mentioned or no description at all. Also, it seems to be a difference between what is presented on the Component reference page and what is the actual library.

I felt like I had to do a lot of guessing and testing to see if I can get what I want from a component because the documentation wasn’t guiding me too well. Maybe a better search in the documentation will help, there should be a fast way to find out what component I can use for a certain thing. I don’t want to read the whole list and guess by name if it matches what I need.

In the end, it might also be my lack of experience with React.

Conclusion

  • Steep learning curve if you’re not familiar with React.
  • Documentation could be better
  • Requires you to learn the library in order to know the existing components to use

In the end, I got the update I wanted for my plugin in 1 day and managed to sort all the issues. I will try to create more blocks in the future to get used to working with them.