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.
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.
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?