17 Plugins, Tutorials, and Resources for Gutenberg

Default avatar.
March 04, 2019
17 Plugins, Tutorials, and Resources for Gutenberg.
The WordPress community officially has Gutenberg fever. While there has been some grumbling (and not without some cause), the blocky little editor that could, has gone mainstream. People have been building, writing, collating, and generally just adapting to the changes, and I’m here to show you some of what they’ve done… Enjoy!

Plugins

As is usual, the WordPress community has gone wild, and has already developed loads of plugins for the new editor; we can’t possibly list them all. Besides, so many of them add pretty much the same new blocks, or very similar blocks, so I’ve decided to list only the ones that caught my eye. For more complete lists, see the “Authority Sites and Directories” section below.

Block Gallery

A photo gallery plugin that does what it says, and doesn’t come with a thousand other blocks. What more could you ask for?
01-blockgallery

Block Options for Gutenberg

Block Options for Gutenberg allows you to show or hide blocks based on a number of factors, including:
  • What device is being used to view the site;
  • Whether the user is logged in or not (great for calls to action, perhaps?);
  • Based on field values in Advanced Custom Fields;
  • And based on custom conditional logic you might set up yourself.
02-blockoptions

Coblocks

There are already lots of plugins that aim to turn Gutenberg into a full-on page builder, but Coblocks is the one I currently have my eye on. Sure, they’ve got plenty of layout options and features, but they’re mostly kept light and simple as opposed to overly animated. They seem largely style-agnostic as well. They don’t use JavaScript on the front end when they don’t have to, and they provide quite good controls for custom typography. Overall, I’m quite impressed. 03-coblocks

Disable Gutenberg

Disables Gutenberg. Doesn’t expire in 2022. ‘Nuff said. 04-disable

Google Maps Gutenberg Block

While this one not the only plugin that provides a map block, it’s one of the few that only provides a map block. Again, does what it says, and doesn’t bloat the menus. I’ll be a fan of these single-purpose block plugins until there aren’t quite so many of those “ultimate block collection” plugins. 05-googlemap

Gutenberg Manager

The Gutenberg Manager plugin allows you to enable or disable Gutenberg for posts, pages, or custom post types as you see fit. Basically this allows you to use another plugin in its place for some content types (such as a proper page builder plugin), without disabling Gutenberg completely. Those looking for flexibility in their content editing experience will want to grab this one. 06-manager

Jetpack

Yes, that Jetpack. As of November 27th, 2018, Jetpack features a few blocks of its own, including a Markdown-enabling block, payment buttons, maps, and a full-fledged contact form. It should be noted that some of the blocks, like many Jetpack features, require being on the Jetpack premium plan. 07-jetpack

WooCommerce Blocks

Made by Automattic themselves, WooCommerce Blocks provides Gutenberg integration for (you guessed it!) WooCommerce. There are blocks for product grids, featured products, hand-picked products, best-selling products, hand-picked products, and much more. Combine it with your favorite layout plugins for Gutenberg for the best effect, and you’ve got yet one more way to turn WordPress into a hand-crafted store. 08-woocommerce

Tutorials and Guides

Gutenberg wasn’t even properly out yet when people started writing tutorials and guides. People from all over the industry wanted to be ahead of the curve, and we’re all reaping the benefits. Here are some of the best I’ve found so far: Adding Gutenberg support to WordPress theme - What it says in the title. This’ll get you started. 09-adding Create Style Variations for WordPress Gutenberg Blocks: Part 1 and Create Style Variations for WordPress Gutenberg Blocks: Part 2 - This two-part series is for when you’ve already learned how to build a custom block, and want to give your users some extra options. 10-createstyle Getting Started With Gutenberg By Creating Your Own Block - From our friends at Smashing Magazine. 11-gettingstarted Gutenberg Handbook - This is the official developer’s handbook from WordPress themselves. Obviously it’s not exactly meant for beginners. 12-handbook How to Build Gutenberg Blocks Using JSX - This one’s for you React developers out there, specifically. 13-JSX Styling the Gutenberg Columns Block - An older tutorial from CSS-Tricks that deals with one specific block, but can be used as a starting point for customizing all block-related styles. 14-styling Working with Editor Styles in Gutenberg - Lastly, we have a tutorial on adding custom styles to the editor so that what the users sees in the back end is more or less what they get on the other end. 15-working

Authority Sites and Directories

Gutenberg Hub

Gutenberg Hub aims to be the one-stop shop for all things blocky in WordPress. They’ve got massive lists of themes and plugins, their own tutorials, and even a section for Gutenberg news. Whether you just want to learn how to get started, or go full on obsessive about a content editor (there is no shame in that), this is probably the place to start. 16-gutenberghub

WP Gutenberg

WP Gutenberg is a resource hub that focuses heavily on a listing style of content, and forgoes editorial. They have tons of plugins and Gutenberg-supporting themes listed, more than we could reasonably put in an article here on WDD. 17-wpgutenberg The only problem is that at the time of this writing, the site is a bit bugged. Clicking on any listing will take you to a 404 page, so you might just have to copy/paste titles into Google to find the resources listed. I’ll make the joke for you. It’s buggy like Gutenberg. See? it wasn’t that funny. Featured image via Unsplash

Ezequiel Bruni

Ezequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he’s not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy.

Read Next

3 Essential Design Trends, November 2024

Touchable texture, distinct grids, and two-column designs are some of the most trending website design elements of…

20 Best New Websites, October 2024

Something we’re seeing more and more of is the ‘customizable’ site. Most often, this means a button to swap between…

Exciting New Tools for Designers, October 2024

We’ve got goodies for designers, developers, SEO-ers, content managers, and those of you who wear multiple hats. And,…

15 Best New Fonts, September 2024

Welcome to our roundup of the best new fonts we’ve found on the web in the previous four weeks. In this month’s edition…

3 Essential Design Trends, October 2024

This article is brought to you by Constantino, a renowned company offering premium and affordable website design You…

A Beginner’s Guide to Using BlueSky for Business Success

In today’s fast-paced digital world, businesses are always on the lookout for new ways to connect with their audience.…

The Importance of Title Tags: Tips and Tricks to Optimize for SEO

When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user…

20 Best New Websites, September 2024

We have a mixed bag for you with both minimalist and maximalist designs, and single pagers alongside much bigger, but…

Exciting New Tools for Designers, September 2024

This time around we are aiming to simplify life, with some light and fast analytics, an all-in-one productivity…

3 Essential Design Trends, September 2024

September's web design trends have a fun, fall feeling ... and we love it. See what's trending in website design this…

Crafting Personalized Experiences with AI

Picture this: You open Netflix, and it’s like the platform just knows what you’re in the mood for. Or maybe you’re…

15 Best New Fonts, August 2024

Welcome to August’s roundup of the best fonts we’ve found over the last few weeks. 2024’s trend for flowing curves and…