Gutenberg is the new editor for WordPress, introduced in WP 5.0. While this inclusion certainly changes things for everyday users and opens up a lot of possibilities for content creation, it also opens up a great deal of opportunity for developers, too. The editor is designed to be as extensible as possible, and you can add anything you can think of to the builder. We’ve put together some of the best Gutenberg tutorials for developers we could find so that you can get started adding your own flourishes to the new WordPress experience.
A Quick Note
Take some time, look through those, and see what like. And when you have them bookmarked or saved to Pocket, settle in and take a look at some of the best Gutenberg tutorials around the web.
1. The Official Gutenberg Page
You gotta start out with the official WordPress Gutenberg site. I mean, if you don’t know the base documentation, nothing above that will make sense. They have recently made the front page a fully interactive demo of the builder, as well as providing links to their handbook FAQ and a tutorial called The Language of Gutenberg, which is pretty much required reading before you move forward with development.
While it’s not technically a tutorial, Gutenberg.news kind of aggregates some of the higher-profile/quality tuts from around the web in one place. I run by there occasionally to see what’s new and end up falling down the clickhole every time. They do have a mix of developer and user tutorials, but you will find tuts like Creating Custom Gutenblocks with the Rich-text Component and tweets with links to Github repos that can teach you how to convert your existing shortcodes to Gutenberg blocks.
3. The Gutenberg Development Guide
I guess it’s right there in the name, huh? The Gutenberg Development Guide is a series of tutorials that span the range from beginner devs to experienced WP veterans. The Gutenberg Hub is a lot like Gutenberg.news, but the content doesn’t always overlap (sometimes it does). Again, this is a clickhole if you’re looking for Gutenberg tutorials for developers (or anyone, really). Consider yourself warned.
4. Zac Gordon’s Gutenberg Development Course
Not all the best things in life are free, and Zac Gordon’s amazing Gutenberg development course is testament to that. One of the first major (if not the first) A-Z course on the new WP editing experience. The course is updated with new info as Gutenberg is updated, so don’t fear about paying the $79 for something that will be outdated. Zac is well-known in the WordPress community, and this course will absolutely show you why. There are even example tutorial videos you can use. That way you will know what you’re getting into ahead of time.
5. Zac Gordon’s Blog
You probably get that Zac Gordon’s a Gutenberg guru. But you’re not limited just to his paid course. On his blog, he’s got a bunch of Gutenberg tutorials for developers that you’ll wanna check out, too.
6. How to Prepare Your Plugins for Gutenberg
TutsPlus has a really solid walkthrough of all the various ways that you’ll need know to make sure that your plugins don’t break when a user has Gutenberg active. From how metaboxes work now to the REST API and registering different kinds of blocks, this is your one-stop shop for seeing all the ways that you can integrate your plugins with the new Gutenberg editor for WordPress.
7. Fullstack React
8. Modern React with Redux
Let’s “Gut” Going
That’s a Gutenpun, see? Seriously, though, Gutenberg is the future of WordPress. Whether you like the new way of creating content or have installed the Classic Editor plugin to keep it old-school, it’s here. And if you’re a WordPress developer, you will have to deal with it. It really isn’t that hard to continue your education and see the direction Gutenberg is going. Any of the tutorials above really should get you (or gut you) on your way to fully grasping the power and extensibility of the editor.
What Gutenberg tutorials or resources have you used to prepare yourself for the new era of WordPress development?
Article featured image by 32 Pixels / shutterstock.com