2022 has been yet another great year for the Block Editor and the Gutenberg plugin. There were three separate WordPress releases during the year – 5.9 (Josephine) was launched in January, 6.0 (Arturo) arrived in May, and 6.1 (Misha) hit your screens in November. And releases of the Gutenberg plugin went from 12.3 back at the start of the year in January, to 14.8 which launched just a few days ago.
Among those many releases a number of exciting new features became available, including:
- Full site editing
- Block locking
- The Navigation block
- The Elements API
- The Comments Query Loop block
- Style variations
- The Block Pattern Directory in the inserter
- Fluid Typography
- Block-based template parts in classic themes
The Block Editor has been gaining greater popularity over the year among both content creators and developers. Gutenberg is also gradually being adopted outside the WordPress space and has been adopted by Drupal, Tumblr, and Day One, so there’s never been a better time to get started with block development.
(You can learn more about Gutenberg adoption by watching the 2022 SOTW address)
This post will round up some of the wide range of resources that became available during the year and that will help developers who wish to build blocks or extend with blocks, and also those who wish to make a start on learning block development.
Make WordPress Core blog
The Make WordPress Core blog is where all the latest updates to both WordPress Core and Gutenberg are posted. Each post is tagged. Look out especially for those tagged with either #dev-notes or #gutenberg-new as these are the best way to keep up to date with the latest developments in the Block Editor.
Also look out for these tags:
What’s new in Gutenberg
A new release of Gutenberg is launched every two weeks and each release of Gutenberg has a “What’s new in Gutenberg” post published on the Make blog by the release lead. These posts have the #gutenberg-new tag and detail the changes and new features added in that release.
The “What’s new in Gutenberg” posts published in 2022 are: 12.3, 12.4, 12.5, 12.6, 12.7, 12.8, 12.9, 13.0, 13.1, 13.2, 13.3, 13.4, 13.5, 13.6, 13.7, 13.8, 13.9, 14.0, 14.1, 14.2, 14.3, 14.4, 14.5, 14.6, 14.7, and 14.8.
Developer Notes
A Developer Note (or “dev note” for short) is a blog post posted on the Make WordPress Core blog which has the #dev-notes tag. A Developer Note details a technical change in an upcoming release and what developers need to know about that change.
It’s well worth your while keeping an eye on the Make WordPress Core blog and looking out for new dev notes. This is the best way of ensuring that your technical knowledge is as up-to-date as possible.
All the dev notes for each of the 2022 releases can be found here:
Here’s a selection of dev notes from each of the 2022 releases that are particularly relevant for block developers:
5.9 (Josephine)
- Cover Block Refactor
- Locking Blocks in WordPress 5.9
- Miscellaneous block editor changes in WordPress 5.9
- Take more control over Inner Block Areas
- Gallery Block Refactor
6.0 (Arturo)
- Block Locking Settings in WordPress 6.0
- Updates to the @wordpress/create-block templating system
- Block Editor miscellaneous Dev Notes for WordPress 6.0
6.1 (Misha)
- Block API changes in WordPress 6.1
- Content only editing and other locking updates
- Simplified data access with new React hooks in WordPress 6.1
- Enhanced TypeScript support in WordPress 6.1
- Updated editor layout support in 6.1 after refactor
- Miscellaneous editor changes for WordPress 6.1
- Changes to block editor preferences in WordPress 6.1
- Extending the Query Loop block
- Editor Components updates in WordPress 6.1
- Block styles generation (Style Engine)
- Create-block scaffolding tool updates
- Moving Core block styling to JSON
Learning
Learn WordPress is a valuable resource for anyone working with WordPress in any capacity. Block developers will find it to be no less valuable for their needs and will find a number of useful courses and tutorials. Let’s look at what arrived there in 2022.
Courses
Among the courses produced in 2022 were a couple of interest for block developers. One is for developers wanting to make a start with block development but who need a step-by-step primer that guides them from first principles. There was also one for more advanced developers who need to work with WordPress’ data layer.
- Introduction to Block Development: Build your first custom block
Designed for those who find that the documentation and other resources can be confusing or overwhelming, this course provides a gradual and easy introduction for the newcomer to block development. It consists of a step-by-step guide that walks you through the process of building a custom block from start to finish. The course gently guides you through the steps needed to build a practical example project whilst providing you with a solid foundation in developing custom blocks, thereby arming you with the essential concepts and knowledge that you need to succeed in your block development projects.
- Using the WordPress Data Layer
The WordPress Data Layer is a JavaScript library that is used throughout the block editor to read and write data. Whenever you save a post, insert a page list block, or select the post author – it’s all powered by the WordPress data layer. Infamous as having a steep learning curve it’s actually not that hard with the right guidance which this course provides. There just weren’t many learning resources previous to the publication of this course which provides a step-by-step introduction to all the data layer concepts.
Tutorials
A wide variety of tutorials continue to be published on the Learn platform – in fact 65 were published over the course of 2022. Here’s a selection that is of particular interest to block developers:
- Using the create-block Tool (8 mins)
The@wordpress/create-blocktool allows you to quickly scaffold a new block plugin. In this tutorial you will learn what you need to get started with create-block, how to use it, and then review the code it generates. - Using Block Attributes to Enable User Editing (13 mins)
Giving users the ability to edit block elements is an important part of block development. In this tutorial, you will learn all about block attributes, and how you can use them to create blocks that your users can edit. - Styling your WordPress Blocks (9 mins)
Learn how Blocks enqueue CSS and then go on to use theclassNameproperty in JSX to apply class attributes, add custom styling to a block, and add additional styles to a block in the Block Editor. - Converting a Shortcode into a Block (16 mins)
In this tutorial you’ll learn how to convert an existing WordPress shortcode into a block by using the scaffolded code created using the@wordpress/create-blocktool, and then applying it to an existing PHP-only plugin. - How to Create Low-Code Block Patterns (4 mins)
In this short tutorial you will learn how to create a group of blocks in a block pattern and add the block markup to a plugin that will enable block patterns to display via the block inserter.
Videos
Watching a talk about some aspect of block development or watching a skilled developer code as they work through a project is a great way of learning or raising your skill level.
WordPress.tv publishes a wide variety of videos on all things WordPress and of particular interest to developers are the more technically-based videos. WordPress.tv is a resource which sees a continual and regular stream of new content and numerous videos were uploaded to the platform during 2022. Here are some that anyone interested in block development should watch:
- Let’s Build a Custom Block in One Hour – this is an extended version of Nick Diego’s talk from WCUS (mentioned below)
- Exploring the Power of Block Variations – yet another talk by Nick Diego where he covers the block variation API which allows you to create “variations” of existing blocks
- Hello Blocks! Coding a custom block – a workshop by Ryan Welcher and Wes Theron that introduces the fundamental concepts of block creation
Let’s Code
As part of his “Let’s Code” series of online workshops Jonathan Bossenger did a great series on developing blocks without React. This series is for you if you want to avoid installing all the tooling required to build React projects, or if you would rather code in good ol’ JavaScript rather than React.
Here are a couple more videos from Jonathan’s “Let’s Code” series that you may be interested in as a block developer:
- An introduction to block development – this helps you to get set up with all the tooling required to build blocks and gets you started with your first block project using wordpress/create-block
- Converting a shortcode into a block – this is for you if you have a shortcode based plugin that you want to convert into a block
The Training Team regularly host online workshops which are all published on WordPress.tv after the event.
WordCamps
WordCamps are a rich source of developer-related content and 2022 saw the return of in-person WordCamps after the hiatus caused by the COVID pandemic which saw WordCamps forced to move online. The flagship events, WordCamp Europe (WCEU) and WordCamp US (WCUS), both featured a number of talks of interest to block developers.
WCEU
WordCamp Europe was held in the beautiful city of Porto, Portugal in June. These talks from that event are of particular interest to block developers:
- A glimpse into the future of WordPress from a frontend point of view – learn about some future developments coming to WordPress from visionary entrepreneur and WordPress contributor Pablo Postigo.
- Creating a pre-publish checklist for Gutenberg – in this workshop Ryan Welcher talks about the SlotFill system and demonstrates how to set up a local development environment for building blocks.
- Level Up Block Building Skills – in this talk Greg Ziolkowski demonstrates the tooling necessary to undertake block development and shows how to scaffold a block plugin
- Lightning Talks – these are short talks, usually around 5 to 10 minutes each, that are grouped together. Check out the ones by JuanMa Garrido and Ryan Welcher in particular.
WCUS
WordCamp US took place in September and was held in San Diego, California. Some highlights from the event of interest to block developers include:
- Let’s Build a Custom Block in 15 Minutes – an entertaining short talk by Nick Diego in which he recreates the Hello Dolly plugin as a block, introducing you to various concepts in block development as he does so. (an extended version of this talk is also available)
- Customizing core blocks for clients – a talk by Alex Ball in which you will learn about the various ways of customizing core Gutenberg blocks to constrain the user’s options.
- Extending WordPress using SlotFill – The SlotFIll system enables the developer to extend blocks and the UI for the Block Editor and Site Editor screens. In this talk Ryan Welcher takes a deep dive into how this system works. You will learn how and where you can extend WordPress and how to create your own custom SlotFills.
Local WordCamps
As in-person WordCamps returned during 2022 a number of smaller local WordCamps were also organized. This one from WordCamp Montclair, which was held in June, particularly stood out.
- Using Advanced Custom Fields to create custom blocks – a talk by Jason Lawton that explains how to create complex blocks using the popular Advanced Custom Fields (ACF) plugin. If you’re already familiar with ACF why not use what you already know, but in new ways?
Blog
One of the more exciting things to happen in 2022 for WordPress developers was the introduction of the Developer Blog. The intention behind this blog is to focus on content that is directed more towards developers than the WordPress News blog does. Here you’ll find technical content, tutorials, feature overviews, and more.
It can be found at developer.wordpress.org/news. It’s currently in beta, but a full public launch is expected early in 2023.
The Developer Blog is still in its very early stages and only a few posts have been published so far, but here are the ones of particular interest to block developers (apart from the one you’re currently reading, of course):
- How to extend WordPress via the SlotFill system
- A PHP developer’s guide to getting started with block development
- Application state managed withDispatch, withSelect and compose 101
- Building a book review grid with a Query Loop block variation
Conclusion
2023 will be the year that WordPress turns twenty, and it is sure to be yet another exciting year for the WordPress block editor and for the Gutenberg plugin. The Roadmap will move inexorably forward. Phase 2, customization, is expected to wrap up and Phase 3, collaborative working, will commence.
Also coming up in 2023 will be the inaugural WordCamp Asia, which will be held in Bangkok, Thailand. This adds a third flagship WordCamp event to the annual calendar, alongside WCEU and WCUS, and you can be sure that there will be talks and workshops which will be very much of interest to block developers. The event is now sold out but these will be published on WordPress.tv soon afterwards so you needn’t miss out if you don’t already have your ticket.
As we go into 2023 keep yourself up to date with all the latest developments in Gutenberg over the coming year by regularly checking in on the issues, PRs, and discussions on the repo. Also be sure to check out the Make WordPress core blog for the latest dev notes and What’s new in Gutenberg posts to ensure that you keep ahead of the curve.
To conclude, this has been a round-up of the most useful learning and reference resources that surfaced in 2022 and which I consider to be of most interest to block developers. The length of this post is an indication of just how much activity is happening in the block editor/Gutenberg world.
What did I miss? Is there anything that you found particularly useful that I haven’t included above? Let me know in the comments.
Also why not tell me in the comments if you found any of these resources particularly beneficial or helpful and why.
Props to @bph, Courtney Patubo Kranzke, @greenshady, and Wes Theron for suggestions and feedback that made this post better than it would otherwise have been.
Leave a Reply