It has been almost two and a half years since Gutenberg (or Block Editor) has been merged into WordPress core for the WordPress 5.0 release. And, since then, block editor is getting better and more relevant for various types of uses.
And, with that, developing blocks has been increasingly more important. But, there are few problems with the current adoption rate of the blocks and development of new blocks, starting with the use of JavaScript and React with a very complex build environment, having a classic editor still very popular and shortcodes still in wide use. The number of plugins currently implementing shortcodes is huge, and converting all these plugins is a big job that will take years to be done, and that is only for plugins that are still supported by their developers.
But, block editor will soon enter and a new phase of development where it should be used as a full site editing environment, and because of that, having blocks replacing the shortcodes will be very important to give the end-users the best experience when it comes to content and website editing.
For a while now, I have been looking into the block’s development. But, I don’t really have enough free time to dedicate to learning the React and advanced JavaScript needed for block development, and most of my plugins will not really benefit from blocks anyway. On the other hand, I have started the full redesign process for the Dev4Press website, and it is done with the use of the GeneratePress theme (and premium plugin) and the GenerateBlocks plugin. So, many of the custom elements I have created for previous versions of the website are still in form of custom templates or shortcodes. And, the whole process of redesign would greatly benefit from using blocks instead of shortcodes or some complex custom templates. There is no way to replace every custom template, but many things can be made into blocks, and still rely on the existing code base to make the block work.
In the past few months, I have been exploring the ways on how to start with blocks development, but lately, I have focused my efforts on one specific area: convert existing shortcodes into blocks, have all the shortcode attributes implemented as settings in the block sidebar, and completely reuse the shortcodes rendering function to render the block content on the server-side.
What I have learned so far can be seen as a practical implementation of 3 blocks in the ArchivesPress plugin where all the existing shortcode attributes have been converted to block settings. More about the latest version of the plugin is available in this block post.
And, on my personal development blog, I have written a tutorial on the whole process of how to create a new plugin with blocks to convert existing shortcodes and reuse their code for block rendering. You can check out the article about Getting started with Blocks development, and the tutorial Convert shortcodes into blocks. This tutorial comes with the full plugin made as an example, and also available on GitHub, so check out the tutorial for more information.
I plan to post more tutorials about the subject soon and try to cover different use cases, and more different block types. I am still just starting with blocks, and for now, I am focusing on the types of blocks I need for myself, but, I will try to learn as much as I can about blocks development.
For the upcoming redesign of the Dev4Press website, I have created a new plugin for these custom blocks, and so far, I have added 2 blocks, but the plan is to have at least 15 to 20 blocks to cover all (or most) the custom coded elements that can fully replace templates and made the website design easier to maintain in the future.
Let me know if you have already started to develop Block Editor blocks, do you plan to convert shortcodes into blocks, and what is your experience with the block’s development. Do you have some useful block examples on GitHub to help other developers with the block development?
