Skip links

Learning Gutenberg block development and basics of React: Helpful resources and tutorials

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?

So, I have been sharpening my JavaScript skills. This post will probably be more useful for designers/developers rather than casual bloggers, but I dropped a few super basic explanations regardless. If you fancy learning a new skill anyway, read on!

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.

The discussion around Gutenberg often focused on the technology behind it. So far, quite a lot of WordPress development happened in PHP (which is a programming language that works on the server to collate the pages for the visitors of your website). Gutenberg shook it up: blocks – tiny modules that you can insert straight into the page – are written in JavaScript (a programming language that your browser processes to make a website interactive) with help of a library called React.

Wait, what on Earth is React?

As we’ve mentioned, React is a JavaScript library. That means that it provides some shortcuts and functionalities that you otherwise would have to spend your time building on your own; sometimes, it’s easier to just use code that has been tested by a dedicated community, as it saves you a fair amount of time. React was initially created by developers at Facebook to enable their newsfeed – the static page that gets new content without having to be manually refreshed – and is now widely used for website/app development.

I must admit, I’ve approached it backwards – after reading that Gutenberg is built with React, instead of learning the actual framework… I’ve jumped straight into writing code. For me, it’s best to learn skills by solving actual problems, testing your logic, reading the documentation and googling error messages, and at the end of the day, isn’t it just JavaScript? Some people prefer learning by understanding the concepts and applying them, but given that you have some basic understanding of JS, a good way is to set a bar and 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 know React inside out to get started with developing your own Gutenberg blocks. You should be able to get to the hang of things quite quickly – I’ve learnt some useful stuff in a span of two weeks.

To benefit from the list below, you need to have some understanding of HTML, CSS and JavaScript. A basic understanding of PHP (for dynamic blocks) is also welcome.

Gutenberg block development: helpful resources

The list below includes my selection of helpful tutorials that will give you a solid understanding of how Gutenberg works and will introduce you to basic concepts of building a Gutenberg block for WordPress. At the time of publication, it was sometimes tough to find the answers to burning questions (which should change in a few months…). That’s how the list below came to be.

  • 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.
  • Pat Haran Borgen’s free course recommendation – an ES6 guide (which is JavaScript, but under its rightful name for the new version) will help you to update your modern JavaScript understanding.
  • 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!
  • CSS-Tricks have a six-part series about modern JavaScript development that takes you through building a block while explaining some basic concepts. A super-useful primer which shows you how to use create-guten-block – a massive shortcut if you want to (partially) skip the initial unease of learning about command lines, Webpack configurations, managing dependencies, et cetera, and just get down to the blocks.
  • 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!

Leave a comment

%d bloggers like this: