Hey CSS-Tricksters! 👋 We have a special long-form series we’re kicking off here totally dedicated to Gutenberg, a major change to the WordPress editor. I’ve invited a dynamic duo of authors to bring you this series, which will bring you up to speed on what Gutenberg is, what it can do for your site, and how you can actually develop for it.
This series is more for developers who are curious about this new world and wanna get started working with it. This series isn’t necessarily for site owners who want to know how it’s going to affect their site or who are worried about it for any reason.
It’s clear there is a lot of possibility with Gutenberg. Yes, it’s aiming to be a better editing experience, but it also likely to change how people think of what’s possible with WordPress. With the custom “blocks” that content will be built with (don’t worry, we’ll get into all this) it’s almost the WordPress editor becomes a drag-and-drop site builder.
I’d recommend listening to this episode of ShopTalk to hear more about all this potential.
Funny story really. It just so happened that two authors I work with regularly were both independently creating long form series about this exact topic at the exact same time. Shame on me, because I didn’t put 2 and 2 together until both of them had made significant progress. It would have been too weird to release both series independently, so instead, we all got together and worked out a way to combine and rework the series and make a single series that’s the best of both.
Here we are with that!
You’ll probably do best with this series with these skills:
- WordPress development concepts such as actions, filters and template tags
- Using the command line to navigate directories and run build tasks
If you’ve written your own npm modules, feel totally comfortable writing commit messages in Vim, or you’re an old-hat at React, then this series might move a little slowly for you.
From here on out, I’m passing this series over to the authors and your Gutenberg teachers: Lara Schenck and Andy Bell.
I was in that room, and I remember thinking:
I can do that! I’m not sure why, jQuery has suited me just fine and I really like CSS the best, but okay, Matt, I’ll put that on my list of things to do…
—Me, in 2015
If you’re reading this, I’m assuming you’ve at least heard of Gutenberg, but if not, here’s a rundown by Chris from a few months back that should help orient you. I’m also assuming you feel some mixture of ignorance, intrigue, excitement, and panic when thinking about Gutenberg and what it means for WordPress, ergo ~30% of websites. I’m here to tell you to scrap the panic and keep the excitement and intrigue because this is very exciting for both us developers and WordPress itself.
I predict that, in the coming years, the adoption of Gutenberg will cause WordPress to outgrow its unfortunate reputation as a legacy, insecure, developer-unfriendly, blogging engine. Case in point:
I think I’m gonna make my personal website a WordPress site again. Coming full circle after 6 years 😊
— Rach Smith 🌈 (@rachsmithtweets) February 20, 2018
- There’s still time.
- We now have a very specific, real-world context for our learning.
This topic of this series is not original. The WordPress community has already risen to the task of creating excellent resources for Gutenberg development, and I recommend you read and watch as many as you can! While this series covers some of the same information, the goal here is to structure the content in a way where you, reader, have to work a little bit to get the answers—sort of like class or guidebook with questions and homework.
Yes, we will create a block, but along the way we’ll stray from the block-building and learn about the environment setup, about APIs, and other development concepts and terminology that took me a good while to understand. At the end of the day, I hope to help you feel more confident experimenting with code when there isn’t airtight documentation or loads of Stack Overflow posts to fall back on.
With all of the knowledge and tools that we worked with, at the end of this tutorial series, we’ll have a solid custom card block. This can also work as a baseline for so many other types of block for maintaining website content.
Our setups vary wildly, so I’m going to point you to the official Node JS website for this, where you’ll find handy installers. There’s a really useful page that explains how you can use popular package managers too, here.
We’re going to be using our terminals to run some commands later in the series, so get yours setup. I like iTerm, but that’s only for Mac so here’s some resources for both Mac and Windows users:
- Mac: You can use the default terminal which is located at Applications > Terminal
- Windows: You can either get the Linux subsystem running, use command prompt or get software like Hyper
Once you have a local instance running, have a theme ready to play with as we’ll be diving into a little bit of theme code later on.
At this point, I think you’ll be full of confidence in this stack, so we’re going to get stuck into the main course—we’ll build out our custom card block.
Sound good? Awesome. Let’s dive in!