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?
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.
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.
Disable Gutenberg
Disables
Gutenberg. Doesn’t expire in 2022. ‘Nuff said.
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.
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.
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.
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.
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.
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.
Getting Started With Gutenberg By Creating Your Own Block –
From our friends at Smashing Magazine.
Gutenberg
Handbook – This is the official developer’s handbook from
WordPress themselves. Obviously it’s not exactly meant for
beginners.
How to
Build Gutenberg Blocks Using JSX – This one’s for you React
developers out there, specifically.
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.
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.
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.
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.
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
| Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5! |  |
Recent Comments