Gutenberg is on the horizon… If you’ve not started investigating what’s changing yet, now is the time!
WordPress’ new post and page editor experience is tentatively set to launch with WordPress 5.0 in the months ahead (April to May-ish?). While an official release date hasn’t been set in stone yet, the powers that be seem set to launch the Gutenberg editor as soon as it’s reasonably ready to go. That’s looking to be sooner rather than later right now, and everything about your post & page editor experience will be changing with it.
If you’ve missed out on the conversation so far, we have an introduction to Gutenberg out now to help you catch up. That piece deals with introducing the new Gutenberg editor and the very significant changes it brings to the WordPress environment you’ve grown familiar with. We’d recommend you start there if you’re new to the conversation, then hop back over here.
Here we’ll be taking a deep dive into how the Gutenberg editor actually works on a nuts-and-bolts level. There’s been a lot of controversy surrounding the change, and good reason for it. Your WordPress post and page editor experience is about to change dramatically.
All we have to fear…
From the point of view of someone who works professionally in the post editor daily, and has for a fair number of years, I don’t share a lot of the trepidation that many have expressed. But, I can certainly see where it’s coming from. Radical change is naturally accompanied by a healthy dose of anxiety. Everything I know and love about the WordPress post editor is getting a full makeover from the ground up.
Logging into the Gutenberg editor for the first time, the change is dramatic. My first thought was “Oh dear Lord, where did everything go? Where do I even type?” After a bit of experimentation, that first impression began to move into more of a “Huh, this is actually kind of neat…” direction. I can’t say now that I’m that unhappy with it. In fact, it looks to have a lot of potential and is not at all unpleasant to work in… after you get used to it!
Getting used to it will be what this article is about. Let’s take a tour through the new Gutenberg editor in WordPress and see what it has to offer!
First off, where the **** did everything go?
It’ll help to follow along if you try this yourself. You can experiment with the Gutenberg editor yourself with the official (beta) plugin on wordpress.org. DO NOT install this on a live environment. Spin up a local or test site for yourself. It’s still in beta. There will be bugs! For reference, I’m currently working off of v2.3.0.
Loading up WordPress for the first time with Gutenberg installed, everything appears the same. Dispel that notion quickly by clicking into the Add New post or page editor.
All the familiar features you know and love are still here.
The new Gutenberg editor looks empty at first blush, but it’s anything but. All of the features you’re used to are still here, you’ll just be using many of them in different ways.
Options that were once spread out across the post editor are now condensed into one handy dandy location.
Text editing options only appear when you need them, by indicating the type of block you want. That’s a big can of worms to unpack, so we’ll hold off on that for a moment. First let’s focus in on the new Settings sidebar.
Where’d my sidebar, screen options, author box, excerpts, etc go?
The biggest reason the new Gutenberg editor looks empty relative to the classic editor is that all of our satellite options are packaged much more smartly and accessibly into the Settings sidebar. That’s pictured below, along with the Settings gear icon you can click to conveniently hide them all while you work.
Screen Options from the classic editor is no longer present, but everything you used to have to look there for is in our new Settings sidebar. Did I mention you can hide all of this with one click of the gear icon? 🙂
Format, Categories, Tags, and Featured Image options
These all displayed by default in the sidebar and were toggle-able from the Screen Options menu. They’re still present in the Settings sidebar and can be expanded/contracted normally by clicking the little arrow next to them.
Excerpt, Send Trackbacks, Custom Fields, Discussion, Slug, and Author options
These are all options that, when enabled via the classic Screen Options menu, would appear as boxes under the post content. They’re now (mostly) included into the Settings sidebar as well. No more scrolling past your content to find them!
The exceptions to this are Slug and Custom Fields. Slug has always been a bit redundant as it can be edited directly via the permalink beneath the title. No great loss there. Custom Fields is a piece of the ongoing discussion around Gutenberg as it moves through beta. Riad Benguella has a good article on this, and here is another discussion on them in Github.
Saving drafts, publishing, and the new Revision feature
Once a bit of content has been entered (yes we’ll get into how to do that very soon) you’ll notice the once greyed out Preview and Publish options are now clickable. You’ll also notice Save Draft pop up next to those. Bonus: we now have a Revision option as well:
Save Draft, Preview, and Publish are the same familiar features they’ve always been.
The new Revisions feature is pretty awesome. Click it to open a new window where you can see the changes you have previously made, and even restore to a past point in time!
Ok, how about my rich text editor options? And how do I even make a post?
This is where we veer off into completely new territory. The major change with the Gutenberg editor is the introduction of blocks. Text blocks, quote blocks, audio blocks, image blocks, you name it. With each block comes a set of relevant editor options. That’s a section unto itself, and we’ll explore it below!
Gutenberg Blocks and the New Post/Page Editing Experience (How to Write Things in the Gutenberg Editor)
The major change that the new Gutenberg editor brings is the way we’ll be writing posts and making pages in WordPress. The motivation here was to modernize the post/page editor and bring it in line with other newer CMS platforms by enabling users to build in the same view that the work will be published in. In other words, writing in Gutenberg is a visual experience that will let you build content in the backend as it will be viewed in the front end.
This is accomplished in part by the introduction of moveable blocks. It’s not a perfect system, but it’s certainly a step in a more modern direction that holds a lot of potential for future applications.
But enough WordPress philosophy… how does this thing work so that we can write a post!?
Introducing Gutenberg Blocks
The new editor has a title and paragraph text block from the onset. More blocks can be added by clicking the circle/+ icon in the upper left. Controls there also let you easily undo and redo work, and also view stats like word count, heading, and more.
Clicking the + icon presents a popup with 4 tabs:
- Recent: recently and commonly used block types appear here
- Blocks: full selection of available Gutenberg blocks
- Embed: blocks that offer embed options to popular services like Twitter, YouTube, and Instagram
- Saved: Custom blocks can be saved for future use
There’s even a search feature so that you don’t have to hunt and peck through tabs when you know exactly what you’re looking for.
Blocks are categorized by type:
- Common Blocks
- Formatting blocks
- Layout blocks
- Widgets
Now here’s the cool thing, and a point that alleviated a lot of my concern for the new block UI. You don’t have to add a new block from the list every single time you want to do something. You just start composing, and Gutenberg responds to you as you type. More on that in a minute, just wanted to mention it before we moved on 🙂
Composing in Gutenberg blocks
With the classic post editor you had a rather large toolbar at the top that offered a host of editing options. Many of them I rarely used, many of them I frequently used. That single universal toolbar is gone, which is sorta scary. How do I add lists? Make bold text? Create a heading?
These options aren’t gone in the Gutenberg editor, their presentation is just much smarter. They quite literally appear when you need them, but almost always only when you need them.
Click into the default paragraph text block that Gutenberg presents. There are no editor icons, just a short list of commonly used blocks. You can either quick-select your block type here, or just start typing. Gutenberg responds to what you’re doing within the block by presenting you with relevant options.
Start typing. Rich text editor icons appear…
This is a really neat touch. It’s essentially smart blocks… Gutenberg presents only what I need, only when I need it. Much less clutter that way and a nice visual representation of what the post is going to actually look like as I work.
You DON’T have to manually add blocks!
Actually adding a new block is no more difficult that hitting Enter. As soon as you do, a new paragraph begins in a new Paragraph block. The editor now has a flow to it that’s really nice. As I work, I have what I need where I need it. I don’t have to interrupt my work to select new blocks, they just appear as I need them. Blocks can be moved to rearrange your content on a page, edited as needed, or deleted whole cloth. You’re not locked into a block type, either. Have a short paragraph you’d think would be better as a list? You can edit it and it will become a list block. Easy peasy.
Editing Gutenberg block settings
You’ve already seen above how text editing options appear as needed. The same is true for any block type… image, audio, quote, etc blocks will all furnish the options you need directly above the block as you work. There are additional block settings you have to work with as well, as you can see from clicking the 3 vertical dots to the right of any block:
Here you can switch to an HTML view and make edits, dupe the block, trash it, save it, alter its form, and more. Some of these options (those below the line) also vary responsively to the block type.
Ninja Forms and Gutenberg
We’ve added a Ninja Forms block that’s ready to go for you as soon as you update! It’s in beta right now as well, but rest assured it will be in its final state soon. I only say this to let you know that the visual aspects of what you’re going to see below might be slightly different, and that the block itself is not feature-complete quite yet.
That said, here’s Ninja Forms in the Gutenberg editor!
We plan on making the forms list searchable, as well as some other ease-of-use/user experience upgrades for you in the near future. Those will be completed prior to Gutenberg’s official launch date- our developers are literally working on them as I type 🙂
A Ninja Form can additionally be added via the shortcode widget block, for reference. It just won’t be viewable on the backend, only in preview.
For content creators, the Gutenberg editor is a step forward
I’ve loved my Gutenberg experience so far. That, of course, is coming from someone who is a content creator, not a developer. I realize there are a lot of very legitimate concerns on how Gutenberg has been handled from a developer standpoint. I don’t mean to gloss over that… but from a writer’s standpoint Gutenberg is an upgrade over the classic experience, hands down.
I’m 2000+ words into this article now, and I’ve only just touched on the many features the Gutenberg editor brings to the table. There are lots of block types we haven’t explored, a host of embed options, cover images… all kinds of neat features out there waiting to be discovered. Go plug in the Gutenberg editor in a test or local install if you haven’t already. Poke around. It’s fun!
Do you have any recommendations for us on the Ninja Forms block? Anything specific you’d like to see in it? Our development team is hard at work making it feature complete right now, so let us know! I’m more than happy to field questions in the comments below as well!
