Skip to main content
Guide Collection

Learning Gutenberg

Back in 2015, Matt Mullenweg, the co-creator of WordPress, instructed a room full of over a thousand WordPress developers, business owners, end users and designers to "learn JavaScript deeply."

A few years later, it makes sense what he meant. WordPress has announced a new editing experience called Gutenberg, which introduces a drag-and-drop interface and is slated to release in version 5.0. This guide explores the impact of Gutenberg and will walk you through creating your first block.

Monthly Sponsor
Thanks, HelloSign!
Article

Learning Gutenberg: Series Introduction

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 […]

Article

Learning Gutenberg: What is Gutenberg, Anyway?

Gutenberg is the new React-driven SPA editing experience in WordPress. Oh wait, a string of buzzwords doesn’t count for a viable explanation of software? We’re going to unpack that string of buzzwords as we explain what Gutenberg is.

Article

Learning Gutenberg: A Primer with create-guten-block

Welcome back! We’ve just taken a look at what Gutenberg is and how it operates from the admin side. Gutenberg is certainly going to have a massive impact on the WordPress world. If you are just arriving here and have no idea what we’re talking about, I recommend at least skimming Part 1 to make […]

Article

Learning Gutenberg: Modern JavaScript Syntax

One of the key changes that Gutenberg brings to the WordPress ecosystem is a heavy reliance on JavaScript. Helpfully, the WordPress team have really pushed their JavaScript framework into the present and future by leveraging the modern JavaScript stack, which is commonly referred to as ES6 in the community. It’s how we’ll refer to it […]

Article

Learning Gutenberg: React 101

Although Gutenberg is put together with React, the code we’re writing to make custom blocks isn’t. It certainly resembles a React component though, so I think it’s useful to have a little play to get familiar with this sort of approach. There’s been a lot of reading in this series so far, so let’s roll-up […]

Article

Learning Gutenberg: Setting up a Custom webpack Config

Gutenberg introduces the modern JavaScript stack into the WordPress ecosystem, which means some new tooling should be learned. Although tools like create-guten-block are incredibly useful, it’s also handy to know what’s going on under the hood.

Article

Learning Gutenberg: Building Our Custom Card Block

We’ve got some base knowledge, we’ve played with some React and now we’ve got our project tools set up. Let’s dive into building our custom block.

icon-link icon-logo-star icon-search icon-star