Blog Post

Developing blocks for Block Editor

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.

Detail from the Featured block created for new Dev4Press website

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.

Block with sidebar settings controls from the ArchivesPress plugin

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?

Please wait...

About the author

Milan Petrovic
Milan Petrovic

CEO and Lead developer of Dev4Press Web Development company, working with WordPress since 2008, first as a freelancer, later founding own development company. Author of more than 250 plugins and more than 20 themes.

Subscribe to Dev4Press Newsletter

Get the latest announcements, release digests, promotions and exclusive discounts, and general Dev4Press-related news straight into your mailbox.

This form collects your email (optionally your name) for the purpose of sending you newsletters. Check out our Privacy Policy for more information on how we store and manage your data. We will not send you any spam. Newsletters are sent 2 to 4 times every month.

Latest From The Blog

license management

License Code Validation and Management

Dev4Press License validation system updates will soon be deployed, including license code management via the Dev4Press Account Dashboard. All updates will be deployed on April 14, 2024.
panel options

In Development: SweepPress Pro 5.0 and Lite 3.0

In about two weeks, brand new, significant updates to SweepPress Pro and Lite plugins will be released, bringing several game-changing features to WordPress cleanup and maintenance tools already included.

GD Press Tools Pro 6.3

The new major release for GD Press Tools Pro, version 6.2 is here, and it brings some major changes. First of all, the plugin has two addons less, one addon is added and one more addon has been deprecated (but still included for now).

Leave a Comment

Grammarly - Number 1 Writing App
GeneratePress - The perfect lightweight theme for your next project