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 WordPress.org. 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.
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.
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.
