A beginner’s guide to the new Gutenberg editor

If you are a WordPress user or developer, you’ve almost certainly heard or seen the word “Gutenberg” pop up a lot in the last few months. A quick Google search of Gutenberg will likely lead you to Project Gutenberg (volunteer effort to digitize and archive cultural works), Johannes Gutenberg (a German blacksmith, goldsmith, printer, and publisher), and then finally to the WordPress.org repository.

So, what does WordPress have to do with a German blacksmith and printer? More than you might anticipate! Johannes Gutenberg introduced mechanical movable type printing to Europe and started the Printing Revolution. His invention is regarded as a milestone of the second millennium, ushering in the modern period of human history. That’s a pretty serious resume!

WordPress, like Johannes Gutenberg, is looking to revolutionize publishing with a drastically new and improved content creation editor, codenamed Gutenberg. The new editor has been in development for over a year now and is scheduled to be released in WordPress 5.0 sometime in 2018.

Getting Started with Gutenberg

Now that we’ve done a quick history lesson on Gutenberg and established a little context, let’s take a closer look at the new editor coming to WordPress. First, let’s establish some terminology so we’re all on the same page. While the editor is currently being developed under the name Gutenberg, it looks like that might not always be the case. There is an ongoing discussion happening to determine how to refer to the editor after it’s included in WordPress core. I’ve seen a lot of people referring to it as the “block editor” or simply “the new editor.” For the sake of this article, we’ll stick to these terms until something official shakes out.

So what’s the big deal? How is the new editor different or better than the current editor? For starters, the new editor is block-based, which means each bit of content you add into your post (paragraphs, images, galleries, quotes, etc.) are treated individually. These blocks can be moved around and modified with settings specific to each block. While these elements were all available in the old editor, they are now all a little more dynamic and easier to work with. Another benefit is that you have a much better interface for adding and interacting with your content. Crafting content in the old editor sometimes felt disconnected and antiquated by today’s standards.

Back end meets front end

Another aim of the new editor is to bridge the disconnect of the post edit screen and the way your post is displayed on the front end. With the new editor, you can get a near-exact preview of your post as you are building it. The guesswork of what a post might look like is now gone, so long as the proper styles are implemented by the theme you have installed. Because the theme controls how the post (and your whole site) looks, it will also control how your post edit screen looks. (P.S. we have a theme that integrates nicely with Gutenberg) Personally, I hope that one day soon, there is no “back end” of WordPress. We should be able to edit content in place, and get the admin out of the way.

Speaking of getting things out of the way, the new block editor utilizes some very handy wide-format styles that let you take your content wider than the content area, or even span the full width of the screen. Out of the box, Gutenberg can take image blocks, galleries, embeds and more to the edge of the screen, while blocks like paragraph and blockquotes remain inside the content area as expected. See an example of this in the video above.

This functionality and styling opens up a whole range of options. You are no longer confined to the content box. Now you can have full-width sections within any post or page. Paired with nested blocks, you can begin to see how powerful your page creating will become. Imagine building your whole homepage with just 5 or 6 block sections. And the whole time you’re seeing exactly what will be published! No page building plugins, no shortcodes, less headaches.

Let’s take Gutenberg for a spin!

We could talk about it all day, but the best way to get started is by installing the Gutenberg plugin and tinkering around with the new editor. To install the plugin, you can go to Plugins → Add New in your WordPress dashboard, search for “Gutenberg” and install and activate it like you would any other plugin. If you are a masochist, you can also download it from the WordPress.org page and install it manually.

Once the plugin is installed, you’ll notice there is a new Gutenberg admin menu item. Clicking this will take you to a nice little demo post with the new Gutenberg editor and some blocks of content already added. This is a great way to play around with some of the content blocks and get a feel for the UI. Once you’re a little familiar with the editor, I encourage you to go to Posts → Add New and create your own post.

Gutenberg Editor Breakdown

Wading through a brand new user interface can be a little disorienting, especially since WordPress hasn’t always been the most user-friendly piece of software out there. Let’s take a quick look at a few of the core features of the new editor. Keep in mind that because Gutenberg is still in development, these features may change or be relocated in the future.

Block Inserter

Currently, there are two ways to insert blocks into your posts and pages. At the top of the page there is a toolbar with a (+) icon. Clicking this will pop open a box where you can search for blocks and insert them. There is also a block inserter shown when you click above, below or in-between blocks already in your editor.

Undo / Redo / Content Info

Next to the block inserter in the top toolbar, you can find controls to undo and redo actions. Next to these icons is an info icon, which when clicked will show you a handy word count.

Publish Options

The options to publish a post, set it as draft, and preview the post are located in a toolbar at the top of the page. You can also toggle between the visual editor and the code editor here.

The Inspector

On the right side of the screen you’ll notice a new sidebar called the Inspector has been added. This sidebar holds the settings for your page as a whole, as well as individual block settings. All of the page-level options such as categories, tags, featured image and post attributes are now available in the Document view of the sidebar.

Block settings can be viewed by clicking inside any of your blocks and then clicking the Block settings tab at the top of the sidebar. Some blocks may automatically show the block settings when you click inside the block.

Inline Toolbar

When you click on some blocks, you’ll see an inline toolbar that lets you modify certain block settings such as alignment, image editing, formatting and more. The options shown will depend on the options defined by the block.

Let’s customize a block

The introduction of block settings makes customizing your post very quick. Instead of hunting around for settings or adding settings to a shortcode, you can now preview your settings live to see what you’re going to get on the front end.

The video above shows some of the settings you’ll find in the default paragraph block. You’ll notice that I’m able to customize the font size, background color, and add a drop cap style fairly quickly. Instead of hunting around for settings or adding settings to a shortcode, I’m able to customize the block styles in one centralized place. How fancy!

Each block has different settings and some blocks will have more advanced settings than others. Developers will be adding all kinds of handy settings to their own blocks to help you build your site even quicker.

Looking forward

As I’ve mentioned, Gutenberg has been in development for some time already. Although it isn’t quite finished yet, you can download the plugin and start using it today. There is also an official handbook for developers to get acquainted with the new codebase, which is heavily javascript-based. (We’ll dive into the code side of things in another post.)

Unfortunately, there isn’t a ton of basic documentation for WordPress newcomers or novices (yet?). Because of this, I’ve had customers at my theme shop, Array Themes, write in with all kinds of questions about the editor. Some are excited, some are concerned, some don’t know what to think!

I think it’s safe to say this will be a much-welcomed feature to WordPress once the dust settles and everyone becomes more acquainted with the new editor. Hopefully, we provided you with a nice overview of the Gutenberg editor and you learned a thing or two in the process. You might also download our Atomic Blocks plugin and WordPress theme from our homepage to help you get up and running quickly!

• Share:
• Facebook
• Twitter
• Email

• Category: Tutorials