Learning Gutenberg: Series Introduction

Celý článek

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.

Who this is for

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.

How this series came to be

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!

Prerequisites

You’ll probably do best with this series with these skills:

• WordPress development concepts such as actions, filters and template tags
• Foundational (not deep) JavaScript knowledge e.g. understanding the difference between an object and an array and what callback functions are.
• 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.

Meet your teachers

From here on out, I’m passing this series over to the authors and your Gutenberg teachers: Lara Schenck and Andy Bell.

A bit from Lara

Hi! Back in 2015, Matt Mullenweg, the co-creator of WordPress, instructed a room full of over a thousand WordPress developers, business owners, end users, designers, and who knows how many more live-stream and after-the-fact viewers to "learn JavaScript deeply."

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

The thing is, it's entirely possible to build pretty awesome and robust WordPress themes without touching a byte of JavaScript. Needless to say, I didn't get around to learning JavaScript deeply for a good year and a half, so now I'm playing catch up... and I'm sure I'm not the only WordPress developer in that boat.

Back to the present. Not only has it continued to take over the web in a very big way, JavaScript—in all it's bundled, destructured, spread-operator-ed glory—has made its way into the inner workings of WordPress by way of the editor revamp named Gutenberg.

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

Little ol' WordPress is catching up, and it's bringing with it all the JavaScript goodness you could possibly imagine: Gutenberg is a React-driven SPA editing experience poised to be released in WordPress Core later this year, in version 5.0. It will flip the WordPress ecosystem upside down and, hopefully, make way for a new generation of themes and plugins powered by blocks—a phenomenon other content management systems have embraced for some time.

This means two things for the developers like myself who neglected to “learn JavaScript deeply” back in 2015:

1. There's still time.
2. We now have a very specific, real-world context for our learning.

This is great news! I’ll speak for myself, but I find it much easier to learn a technology when I have a specific application for it. With that, I invite you to join me on a journey to "learn Gutenberg deeply" and, in lieu of that, a solid chunk of JavaScript and React.

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.

A bit from Andy

The new, upcoming WordPress editor is bringing a wealth of opportunity to content producers and developers alike, but with that, it brings a whole new JavaScript powered stack to learn. For some, that’s causing some worry, so I thought I’d get involved and try and help. We’re going to dive into some core JavaScript concepts and build out a custom block that will power a classic design pattern—a card. This design pattern gives us plenty to think about, such as variable content and media.

Before we dive into that, we’re going to look at the new JavaScript stack and the tools that it gives us. We’re also going to take a look a React component to give us a primer of reactive, state-driven JavaScript and JSX.

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.

Before we dig in, let’s get our machines set up with the right tools to do the job. Because we’re using the modern JavaScript stack, there are some browsers that don’t yet support the language features. Because of this, we’ll be using some Node JS-based tools to compile this code into a more cross-compatible form.

Get Node JS running

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.

Get your terminal running

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

Get a local WordPress instance running

Because we’re using the modern JavaScript stack, it’s important to get an instance of WordPress running locally on your machine. If you haven’t done that before, check out this guide. I strongly recommend that you download something like MAMP, XAMP or similar if you’re new to this.

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.

Modern JavaScript can be daunting if you’re not working with it day-to-day, so together, we’re going to dig in to some core elements of the modern version of JavaScript: known commonly as ES6.

We’re then going to take that knowledge and use it to build a React component. React is an incredibly popular framework, but again, it’s quite daunting, so we’re going to dig in together to try and reduce that. The Gutenberg JavaScript setup very much resembles React, so it’s also an exercise in getting familiar with component based, reactive JavaScript frameworks in general.

Once we’ve covered that, I’m hoping you’re going to be feeling pretty awesome, so we’re going to take that momentum and dive into the sometimes dreaded, webpack, which is a tool we’re going to use to process our JavaScript and smoosh it together. We’re also going to get Babel running, which will magically turn our ES6 code into better-supported ES5 code.

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!

The post Learning Gutenberg: Series Introduction appeared first on CSS-Tricks.