Adventures in Gutenberg Block development

WordPress Block Editor is now a part of WordPress for over two years, and over this time, significant work has gone into the editor. And, it is obvious that block development is becoming an increasingly important part of WordPress development. So, I decided to dig deeper into Block development.

In the past two years, I did create few blocks, but they were very basic blocks with no settings, mostly dealing with simple layouts. Now, I want to create some more complex blocks from scratch, implement various techniques for server-side rendering support, settings for block support, and more. The first time I made those simple blocks, I have used create-guten-block project, but considering that it has not been updated for the past year or so, and that official WordPress blocks documentation considers it as not fully compatible and deprecated when it comes to modern block creation practices, I have decided to try and learn about blocks creation from documentation starting with this tutorial and using officially maintained packages.

Examples of the simple layout based blocks

My plan is to spend few days working on the new blocks development, starting with blank plugin prepared with @wordpress/create-block, and after that, attempt to create full blocks that will cover few important use cases that will be increasingly important going forward. First project I will do, will be to create existing shortcode to block, with all the shortcode attributes implemented as block settings. That will help with the conversion of shortcodes for some of my plugins, to start with, and potentially, add shortcodes replacements in the form of blocks for most (maybe all?) of my plugins.

I plan to publish series of posts on this blog with my progress and experiences related to the blocks development learning process, and maybe post some useful code. I will have all the code I write during this learning phase, available on GitHub.

Let me know what experiences you had with blocks development, and share some free (and only free) learning resources for Gutenberg blocks development.

Please wait...

Leave a Comment