Blog Post

Deeper into Block Development…

I have written few times about blocks development on Dev4Press and my personal blog, and over the past few months, I have been learning more about how to develop more complex blocks and components.

And, we have block editor in the WordPress core for years, and still, the biggest downside of the block development remains almost completely useless documentation on Even when Gutenberg development started, developers leading the charge promised comprehensive documentation, examples, and anything else to speed up the adoption process. Well, that has not happened yet, and I really don’t expect it ever will.

With the new WordPress 5.8, the need for blocks development is even higher, because widgets should be now considered Legacy features, and will be replaced by blocks. I would maybe delay this transition more, but the fact that the new Legacy Widget block in WP 5.8 is so full of bugs, I decided to convert some of my widgets to block to avoid changing the way my widgets work and maybe break them for other versions of WordPress.

The Learning Process

When it comes to WordPress, I am a PHP developer, and while I used a lot of JavaScript, it was mostly built around the use of jQuery. Things like React were not something I was interested in, and I hardly had the time to learn it. And Gutenberg is built on React, but a lot of stuff has been abstracted to have components and objects as building blocks; it is still tough to get into blocks development considering the absence of usable documentation.

I understand the frustration of developers posting on Twitter or Reddit about how bad Gutenberg is, how it is hard to find good blocks or create new blocks.

Some blocks I made

Eventually, I set aside time to start with blocks development, learn the basics related to set up, make the first simple blocks, use Server Side Rendering, and create the first few blocks. But, when it comes to more complex stuff, I had tons of questions on how to do things that I viewed as simple, but these things were not simple at all. My first issue was how to build controls for selecting posts or terms based on different criteria. And the issue of how to create complex block inspector control where things happen based on conditions. And the issue of working with data storage to get data back from the server. And, many more things you would expect to find simple examples because that is something everybody needs. But, no Gutenberg developer has had the time to make simple block examples, simple components that do these essential stuff to help other developers getting started and expand the developers’ base.

The only way to learn all this is to find a plugin that implements something you need, hope there is a source file for each block, and then analyze it and see what you need for your own blocks. And, hope that whatever you find is actually good because I have seen many blocks and block libraries that are badly coded. I am not even sure if my blocks are all coded properly, but at this point, I am more worried about making them work the way I needed them.

How is it going so far?

Well, so far, I have learned few things I needed by analyzing many plugins to find the simple way to get data from the WordPress datastore objects and use them without crashing the editor. I learned that getting data is not as straightforward as you might expect, because data is not retrieved when you need it, it is done with queues and promises, and you can’t trust that data will be there in the first place when you need it.

I have spent few days figuring out how to add autocomplete control that allows you to get a list of posts (or terms) to select one or more posts (or terms), and use it. I figured out a lot of stuff that I needed so far, with few more things still search for. And, I am sure I will have more things to find out somewhere when I start making more complex blocks.

One of the controls I made to show different display elements for the block inspector

The majority of blocks I have made so far, rely on the use of the sidebar inspector and server-side rendering, but some blocks are fully done in JavaScript, with no need to get things rendered on the server-side. I even made several components for the inspector that I was reusing, several functions to run Entity Records queries, use custom SVG icons.

Some of the blocks I have rewritten few times to get things to be more optimized, and right now, I am kind-a satisfied with my blocks’ development progress. Right now, I am putting the finishing touches on the GD Knowledge Base Pro 5.0, which will include 7 blocks, and I plan to rewrite widgets and shortcodes for few more plugins until the end of this year.

Learn and teach others

Yeah, I had a hard time getting to learn some of the things I needed. So, I will be starting a tutorial series related to blocks development on my personal blog. I already posted the tutorial on converting shortcode to a block, but the new tutorials series will include various other stuff and the most basic things that most blocks will need. I will also have a public GitHub repo with the plugin project that will include some of the examples, components, and functions. I hope to have the first few tutorials published soon.

So, let me know what problems you had with the development of the block, how did you learn how to do some of the things, what resources you used for learning, and share in general your blocks development experience.

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

BreadcrumbsPress Path Settings

BreadcrumbsPress Pro 4.3 / Lite 2.2

Both Pro and Lite versions of BreadcrumbsPress have been updated with new settings related to breadcrumbs paths, improvements to the blocks implementation, various tweaks, improvements, and fixes.
setup packages

Introducing Setup Packages

By popular request, Dev4Press now includes setup packages that can be purchased along with the plugin licenses and include plugin setup and training with the Dev4Press Support team via Meet, Zoom, or Skype.
antispam wpforms

Fighting spam in WPForms Lite & Pro

WPForms is a very popular plugin for creating contact forms, and a free version is available in the repository. But both versions have very basic spam protection, and that's why coreSecurity Pro has an Antispam feature for the WPForms plugin.

Leave a Comment

Grammarly - Number 1 Writing App
WP Rocket - Make WordPress Load Fast in a Few Clicks