If you haven’t heard already, the Gutenberg editor will soon become the default WordPress content editor once WordPress 5.0 ships.
If you want to get the most from the new editor, you’ll need to use a Gutenberg-compatible WordPress theme…which won’t be every theme, at least not when Gutenberg first ships.
To help you find great themes that work with Gutenberg right now, I’m going to first give you a quick summary of what actually makes a theme compatible with Gutenberg. Then, I’ll share some of my favorite themes that are built to help you get the most from the Gutenberg editor.
And if you’re worried – you don’t have to use one of these themes. Gutenberg will still work with any theme, you just get some nice benefits when choosing one that’s specifically Gutenberg-ready.
What’s Unique About Gutenberg-Compatible WordPress Themes?
Since this whole Gutenberg editor thing is still new to a lot of people, you might be wondering what the differences are between any old WordPress themes and Gutenberg-compatible WordPress themes?
I mean – Gutenberg is the general editor, so it will work with any theme by default – even old ones. So what’s unique about the themes on this list?
There are a few different things that go into making a theme compatible with Gutenberg. Let’s run through them…
Special Style Support For Gutenberg Blocks (And Maybe Theme-Specific Custom Blocks)
Themes that are compatible with Gutenberg will offer detailed style support for all the native Gutenberg blocks. This ensures that all the blocks look pixel-perfect and fit the rest of your site’s design.
Beyond that, some Gutenberg themes even take things a step further and come with a set of custom Gutenberg blocks that you can use to build your site’s content.
Support For Full-Width Alignment Options
The Gutenberg editor offers a neat full-width option for images, which lets you embed images that stretch across the entire screen. This is not currently possible with the TinyMCE editor.
Article continues after this block
However, this feature only works if theme authors explicitly declare support for it, which a Gutenberg compatible theme should do.
Custom Styles In The Gutenberg Editor (Maybe)
Gutenberg-compatible WordPress themes have the option to apply their own styles to the Gutenberg editor even when you’re working in the back-end. By doing this, themes can give you more of a visual approach to creating your content.
Here’s an example from the CoBlocks theme that you’ll see later on:
Not all the themes on the list will do this last one. But it is a cool feature that some Gutenberg themes include.
Ten Awesome Themes That Are Already Compatible With Gutenberg
Now that you know what makes a theme compatible with Gutenberg, let’s dig into some of our favorite free and premium Gutenberg themes!
Many of these themes go beyond basic compatibility and also offer more advanced integrations to help you create a great site using Gutenberg.
1. Atomic Blocks
Atomic Blocks is a Gutenberg-ready theme from Array, which is one of my favorite theme shops. Not only does Array have a great minimalist aesthetic, they also write super clean code.
The Atomic Blocks theme keeps that trend going, offering up a content-focused design that’s perfect for any text-first site.
Beyond its core Gutenberg-ready design, Atomic Blocks is also built to integrate with its companion Atomic Blocks plugin, which adds a bunch of new blocks to the Gutenberg editor, including blocks like:
And Atomic Blocks also has custom styles for all the default Gutenberg blocks, as well as full support for the full-width alignment options.
All in all, if you like the Gutenberg editor and minimalism, you should give this one a look.
Gutentype is a premium Gutenberg-compatible theme that’s for sale at ThemeForest.
I like the styling on this one – it has a very modern look. And beyond that, it’s also got all of the Gutenberg integrations that you’d expect, including:
- Dedicated styles for all the Gutenberg blocks
- Full support for Gutenberg alignment options, including demo content built with those alignment options
You can choose from several demo designs for your site, ranging from a simple list to various grid layouts. I featured my favorite – Gutentype Grid – above.
3. Editor Blocks
Like Atomic Blocks, Editor Blocks is another combo of a:
The Editor Blocks plugin gives you more layout-focused blocks, including blocks for:
- Pricing tables
- Hero sections
- Featured brands (e.g. a logo showcase grid)
- Feature list
- Team members
The Editor Blocks theme displays all of these custom blocks perfectly, which means you can use them to build your own custom design using the Editor Blocks foundation.
If you want a flexible base theme that you can customize with Gutenberg, this one is a neat option.
4. Block Theme / Block Lite
Block Theme comes in both a premium version, as well as a more stripped-down Lite version that’s available at WordPress.org.
Beyond its neat block-grid design, it has full support for all of the Gutenberg blocks, as well as the Gutenberg alignment options.
Price: Free or $69 for Pro
Novum is the first WooCommerce-focused Gutenberg-compatible theme to make an entrance on this list.
Beyond support for the core Gutenberg blocks and alignment options, Novum also comes with its own set of LoveThemes blocks that you can use in your Gutenberg designs, including new blocks for:
- Call to action
- And plenty more
Florian is another premium Gutenberg-compatible theme for sale at ThemeForest. It’s built for lifestyle bloggers and offers full styling support for all the native Gutenberg blocks, as well as Gutenberg alignment options.
You can see demos of the styling for all the native Gutenberg blocks by going here.
Let’s get back to some free Gutenberg themes!
Like Atomic Blocks and Editor Blocks, CoBlocks is a theme and block plugin duo, though you don’t need the plugin to enjoy the theme.
The CoBlocks theme is a “trimmed down” version of Tabor, another theme that you’ll see further down this post.
Beyond offering full support for the Gutenberg blocks and alignment options, CoBlocks also styles the back-end Gutenberg editor to make it look like the front-end, which offers an easy visual editing experience (you saw this at the beginning of the post).
If you want a minimal theme that showcases your writing, this one is a great option.
Ebigale is an affordable blogging theme that ships with full support for the Gutenberg editor. It comes with a few different demos for topics like:
Mae is a premium Gutenberg-compatible theme that ships with its own set of 20+ premium Gutenberg blocks, in addition to support for all the core Gutenberg blocks/alignment options.
It’s got a really neat design that’s perfect for “events, meetups, and conferences”. You definitely need to check out the live demos, because there are some really neat hover effects going on.
Finally, Tabor is a more premium theme from the same guy (Rich Tabor) behind the CoBlocks theme/plugin. It has a similar design, just in a more polished package.
As such, it has full support for everything Gutenberg, as well as built-in inline styling for OptinMonster, which is a neat bonus. It also comes with a custom block to help you edit your homepage hero section (see the details here), as well as a Gutenberg Accent color option in the WordPress Customizer.
There Will Be More Gutenberg-Ready Themes To Come!
Because I’m writing this post before WordPress 5.0 has even been released, I can guarantee that there are a lot more great Gutenberg-compatible themes on the way, either in the form of new themes, or updates to existing themes.
And as Gutenberg becomes more popular, you can bet that developers will integrate it into their themes in more and more interesting ways.
We’ll try to keep this post updated as the Gutenberg theme world evolves. But in the meantime, feel free to share any great finds in the comments section so that everyone else can check ’em out!