Firstly, to reassure any of my Twitter followers who might be thinking I was kidnapped after the next few lines: no, I have not been kidnapped (although isn’t that something that kidnappers would like you to believe? Anyways…) I’ve been branching out a tiny little bit.. maybe it’ll help somebody?
Gutenberg blocks in WordPress
The new WordPress editor – Gutenberg – has been around for a couple of months now, and it made many fierce fans and foes already. It’s WYSIWYG (What You See Is What You Get – enabling you to design visually instead of coding, basically), and some claim that it enters the area of visual page builders. Some think it won’t have any impact on established frameworks because it serves a completely different purpose, some embrace it, and some install plugins to deactivate it. Love it or hate it, it’s a part of the WordPress world now – so it’s good to at least get familiar with it. If you’re an end-user and not a developer, you probably have to worry only about how to use the interface, and you’ll be able to enjoy the growing selection of plugins and themes that support it.
Wait, what on Earth is React?
fall over and over try to reach it. I’ve approached it from the perspective of learning a new thing or two to create a better learning experience, but if you select a goal that’s closer to your interests, it’ll be easier for you to find tutorials for similar use cases/code snippets to learn from.
The good thing is: you don’t have to
Gutenberg block development: helpful resources
The list below includes my selection of helpful tutorials that will give you a solid understanding of how Gutenberg
- If you don’t have a local WordPress development environment, let me just tell you that it is a bad idea to test whatever you’ve developed on your live site. Local by FlyWheel makes setting up a local WordPress testing space super simple. More on selecting a space to develop and test at ElegantThemes.
- Start with WordPress documentation (always start with documentation, actually…). It’s going to be your reference point, and it’s in a constant state of flux as Gutenberg evolves, but it’s quite useful. It has a list of all the components you can use – say, RangeControl, SelectControl, RichText, MediaUpload, etc – that will save you a lot of time and will be more than enough to just get started.
- Got XAMPP or similar setup with WP-CLI? wp scaffold block command makes it very simple to append a base block to an existing theme or plugin and start from there. I’ve used it quite extensively at the beginning.
- Zac Gordon created a widely praised Gutenberg block development course, and he shares snippets of his knowledge on his blog, too. Here’s about registerBlockType() function, your block’s foundation.
- Here are a few words about block attributes – the info that you can get your block to save.
- Jim Schofield’s two-part series, in which he builds a hero banner, was the first Gutenberg tutorial I properly went through to understand what’s possible and grasp the basics. He has a knack for explaining things and takes you by hand through the set-up process here. I’m also talking about the first posts from his site that I came across. Start here, then jump to part 2. Jim has dropped a handful of tutorials and Gutenberg tips so far, so he’s worth subscribing to if you want to experiment with Gutenberg further. Check out his blog!
- Muhammad Muhsin shares his tutorial plugin and development process at Smashing Magazine. It’s helpful to read other people’s code and try to analyse what it does if you’ve got a solid explanation. His tutorial is fantastic for that.
- How to create nested blocks for Gutenberg by Raquel M Smith, who explains what InnerBlocks component does, giving a comprehensive list of functionalities of nested blocks.
- Once you’ve coded ’em, style ’em. This tutorial from TutsPlus explains how to register styles for your block and target them with CSS. (Note that at the time of the post’s publication, this functionality didn’t work with InnerBlocks.)
- See also: Tania Rascia’s guide to React. After a few problems you pose yourself, you’ll want to understand React better, and this is an excellent place to start (recommended by React docs!)
Have you got any cool Gutenberg tutorials to share? Feel free to drop your recommendations below with a few words of explanation!