As web developers we are not constrained by the exacting requirements of safety critical systems such as those used on airliners or in nuclear power stations.
We web developers are accustomed to taking a more casual approach when creating our back-end applications and front-end browser-side JavaScript. Sure, we’ll take a glance at the documentation, maybe read through a tutorial blog post or two, or search StackOverflow for a solution to the problem we’re currently stuck on, but generally we don’t need to take the rigidly strict approach needed in safety critical systems.
This “hacking” mindset may serve us well in most instances but when it comes to developing for the WordPress block editor (also known as Gutenberg) it serves us less well. This is for a number of reasons. The block editor is a large and complex piece of software. It also has a unique API. In addition it uses technologies that we WordPress developers who are more accustomed to working with PHP find somewhat alien and forbidding, if not downright scary – e.g. node, React, JSX, ES6, etc…
It therefore behooves us as web developers seeking to dip our toes in the murky waters of block development to take a more systematic approach and do our homework in order to learn about the API properly, to learn about the processes and techniques involved, and to ensure that we’re following best practice.
This in itself is a daunting prospect. You may well be asking yourself the following questions. What do I need to know? How do I get started? What resources are available to help me learn? What resources are available to help me when I get stuck? It’s true, there’s much to learn, and the resources to help you learn are not always easy to find.
This post is intended to guide you through the murkiness and emerge blinking into the clear light of day. It has been written by someone who has followed the same path. Before learning about block development I was a PHP developer who started by creating custom themes and went on to develop plugins to implement custom functionality on WordPress/WooCommerce sites. More recently I had the need to learn JavaScript in order to create client side interactivity and work with the WordPress REST-API in web applications for my clients.
So, allow me to guide you through some possible answers to the four questions posed earlier, namely:
- What do I need to know?
- How do I get started?
- What resources are available to help me learn?
- What resources are available to help me when I get stuck?
What do I need to know?
You’ll find that the procedural programming skills that you may have as a seasoned PHP developer aren’t needed much when it comes to block development. Instead an understanding of functional programming will help you a lot, and in particular React.
React is a framework built on JavaScript that has become enormously popular in recent years. The block editor is built almost entirely in React and creating custom blocks requires an understanding of React. If you’re unfamiliar with React seek out a good tutorial. There are plenty available, both free and paid, but the official tutorial is a great place to start to get the fundamental concepts down.