6 January 2023 James Koussertari
The Gutenberg editor allows you to create custom layouts for your content with ease and with a variety of different block types.
The Gutenberg block editor was introduced in WordPress 5.0 as a way to streamline the content creation process. Although it is still in its early stages, the potential for block-based content is vast. As a result, there is a growing demand for WordPress developers who are able to create custom blocks.
If you’re a developer, this opens up a whole new world of possibilities for creating custom solutions for your clients. But where do you start? In this post, we’ll explore some of the best resources for learning Gutenberg block development.
Gutenberg blocks offer a number of advantages over traditional WordPress content creation. First and foremost, they are modular, which means that they can be rearranged and reused as needed. This gives users a great deal of flexibility when it comes to creating content.
In addition, blocks are responsive by default, which means that they will automatically adjust to fit any screen size.
Finally, blocks make it easy to add rich media content such as images and videos without having to use shortcodes or HTML.
If you’re interested in learning how to develop Gutenberg blocks, there are a few resources that you’ll need to get started.
First, a strong understanding of WordPress theme or plugin development will be extremely valuable.
Second, you’ll need experience with HTML, CSS, JavaScript and React.
Third, you’ll need to familiarise yourself with the Block API. The Block API is a set of functions that allow you to register, manipulate, and render blocks.
Fourth, once you have completed all of the above, you’re ready to start practicing developing Gutenberg blocks!
Firstly, if you have absolutely no experience working with WordPress, although this is not compulsory, I’d suggest you start with the Theme Handbook. This will get you to grips with some of the core principles of building WordPress themes. This is assuming you have experience with HTML, CSS and PHP. If you don’t, I’d suggest you learn those languages before continuing.
Again, this is not compulsory, but recommended if you want to have a good understanding of how plugins are built. Essentially a block or a collection of blocks are made with a plugins, so it helps to know at least the basic principles within the Plugin Handbook.
For those with experience developing themes and/or plugins for WordPress, the first place to start would be to learn JavaScript and React, if you don’t already know it. These languages are required for custom block development and you need to know them pretty well. There are some excellent resources available, whether free videos on YouTube, or paid ones on Udemy such as the fantastic tutorials by Maximilian Schwarzmüller.
Once you have JavaScript and React nailed, the WordPress block editor handbook would be a good place to start. This is the official WordPress documentation and is a great resource for getting an overview of how the Gutenberg editor works and how to create your first block. Once you have a basic understanding of how things work, you can move on to more specific tutorials and resources.
A good next step is checking out some of the existing blocks that have been created by other developers. This will give you a better understanding of what’s possible with Gutenberg and how different blocks are constructed. A good place to find existing blocks is the WordPress Plugin Directory.
A good way to get started is by following one of the many excellent block development tutorials that have been created already. A quick Google search will turn up plenty of results. One of our favourites for beginners is the YouTube tutorial series by wpBros. There is also a great tutorial by Carlo Daniele at Kinsta if you prefer text based tutorials.
Once you’ve completed all of the steps above, it’s time to start creating your own custom blocks. This is usually the hardest part and the one which you may put off. However you just need to jump in and start coding. You will definitely hit a lot of road blocks and will need to do further research, but there is no better way to learn.
Create Block Package – A tool for scaffolding a WordPress plugin that registers a block
Multi Block Plugin – An adaptation of the create-block package which allows multiple blocks
Gutenberg GitHub Repo – The official Gutenberg project code and packages
wp-gb – A comprehensive collection of React components for WP, by Johann Vårvik
Gutenberg Times – All-things WordPress Block Editor and Gutenberg plugin, by Birgit Pauli-Haack
Gutenberg Hub – A great resource for learning about the WordPress Block Editor, by Munir Kamal
WordPress Developer Blog – News, guides, tutorials and more, from developer.wordpress.org
Learn WordPress – Tutorials and lesson plans directly from learn.wordpress.org
Full Site Editing – Learn about FSE and block themes, by Carolina Nymark
WP Tavern – A website and podcast about all things WordPress
WP Weekly – The Weekly Newsletter for WordPress Professionals
HeroPress – Inspiring stories from people who have leveraged WordPress to change their lives
Bonus tip 1
Live inside the Gutenberg GitHub repo. You can learn so much by seeing how the core team have built their blocks and components.
Bonus tip 2
Join Twitter as it has a fantastic community of WordPress developers sharing their knowledge and experiences.
We hope you’ve found this article helpful.
Gutenberg block development is a great way to create custom solutions for your WordPress clients and to create your own block plugins for sale.
With a little bit of research and practice, you’ll be able to create any kind of block you can imagine. And who knows, maybe your blocks will be so useful that they end up on Gutenberg Market!
6 January 2023 James Koussertari