What You Can Do With Gutenberg

Reading Time: 3 minutes

If you spend any time around people talking about WordPress you’ve undoubtedly heard about the upcoming Gutenberg editor in WordPress 5.0.

Coming November 27th (as of this writing), the Gutenberg project is a reimagining of the WordPress editor. The editor is built with JavaScript and has the lofty goal of tying the editing input to the frontend output more visually than in the past.

The Gutenberg editor is a really cool writing experience. It still has some kinks in the form of minor bugs. And some bigger issues in terms of things like accessibility. I’ll leave that to those smarter than me for now.

You can read all about what Gutenberg can do and I could get really technical, but let’s spend this post showing what Gutenberg can do.

First a note. I’m using a theme I built specifically for Gutenberg. So it’s been (and is still being) built to take advantage of the blocks Gutenberg comes with. So your mileage may very depending on how well your theme supports the new editor.

If you’d like to take a look at this theme on Github go ahead.

Let’s get into checking out the blocks.

Gutenberg Blocks

Cover Image Block

This is a Cover Image block. It lets you easily create a snazzy background image with a title over it. And you can make it use a fixed background to easily create a quasi-parallax effect. Plus that drop cap over there. That’s in Gutenberg too. No dealing with adding extra markup in the HTML tab.

Props to Atomic Blocks for the helping me figure out my background-attachment: fixed; issues with the cover block.

Media + Text

One of the newer blocks to the core Gutenberg repertoire is the Media + Text block. This block can be seen in use on my homepage and lets you add 2-column layout with media on one side and a title and text on the other. You can flip and flop the media and text. And you can easily resize the media column. Plus it’s all built with CSS grid which is nice!

Nifty Title

And a little descriptive text about the Media + Text block.

You may also ask how did you get that nice extra whitespace between the paragraph and the Media + Text block? That’s the spacer block. It gives you a block to easily allow for adding vertical space between blocks.

Columns

Columns are a staple in web design these days. And they do not have a good user experience being added within the current WordPress editing experience. You’re either looking at shortcodes or custom Advanced Custom Fields¹ integration.

Columns Made with Gutenberg

This is a sample of 3 columns made with Gutenberg.

Columns Made with Shortcodes

This is 3 columns made with a shortcode.

Note: If you’re seeing the shortcodes above instead of columns it is because I’ve removed the plugin providing the column shortcode. As I do it with blocks now.

Those do look similar. Until you take a look at them in the editor.

The Gutenberg experience is a lot more maintainable. Add in the options to easily make use of the alignwide and alignfull classes along with background colors and you’ve got a powerful tool.

Dynamic Blocks

Where blocks will really be able to shine is by allowing for dynamic content.

Things like Latest Posts, Recent Comments, Categories, Archives, and more can be inserted in posts and pages using the new editor. And they’ll update without you going back in to update the post.

Latest Posts From My Site

This is done through a combination of JavaScript for creating the block and PHP for rendering. For more check out my post on building dynamic blocks.

Block Ecosystem

This is just a sampling of the core blocks available within the new editor coming to WordPress 5.0. But like before the developers working with WordPress will continue to build and add blocks to the editor. There are already some great options out there with Atomic Blocks and others.

And if you’re a developer check out the great work being done by Advanced Custom Fields with their ACF Blocks.

It is an exciting time to be building sites with WordPress. There is still of course work to be done, but the editor is bringing a powerful set of tools to the masses.

Or other meta field plugins.