In case you didn’t already hear the news, the new Gutenberg Editor is now available as a public BETA plugin on the WordPress.org plugin directory.
It’s not quite ready for prime time - the plugin includes a hefty warning about not using it on production sites - but it is functional and usable...for beta purposes.
While Gutenberg as part of the core is still ways off (Matt Mullenweg recently confirmed Gutenberg won’t be in WordPress 4.9), we still thought it would be helpful to give you a look at how the Gutenberg Editor works.
Then, at the end, I’ll give you some suggestions for how you can play around with Gutenberg yourself without needing to install it on a production site or set up a local development site.
All in all, I think Gutenberg is a nice editing experience for casual users, but I don’t think it’s going to make your life any easier if you’re a power user. In fact, it might even make things more difficult.
How Does the Gutenberg Editor Work?
Gutenberg offers a completely different take on the default WordPress Editor. Instead of one long input box that basically acts the same as a Word document, the Editor is now broken up into individual blocks. One block may contain several paragraphs of text, another an image, and another a button. So and so on.
Because each element is an individual block, it’s usually easier to manipulate and align each piece of content on the page.
Block-based Editors aren’t actually anything new (check out my Setka Editor review for something kind of similar, but with way more features). But what is new is the prospect of one being part of the core.
Let’s take a deeper look at how the blocks work…
Writing Is Distraction Free, But Otherwise Much the Same
When you first create a new post, you can just click into the Editor and start typing. This is pretty much the same as you do now, except when you click in, Gutenberg automatically makes what you’re typing a block:
You can see the outline of the block when you first click into it. But as you type, the block outline and formatting options disappear, giving you an awesome distraction free writing interface:
Adding Media is Easy With Blocks
You may have noticed that the Add Media button is nowhere to be seen. That’s because it’s been replaced by the + Insert button that helps you add all types of content blocks to your post:
Anything you add via the insert menu will appear as its own block. You can quickly change basic alignments by using the align buttons. And you can set your alt-text in the sidebar menu (which is where most customization options appear):
Where the Insert button starts getting really cool is in all the external media that you can easily embed. There’s a whole huge list that you can quickly select from:
There’s also, thankfully, a search button so that you can find what you’re looking for.
You can use these embed blocks to quickly insert content from another site. For example, to embed a tweet, all you need to do is select that block and paste in the URL:
Then Gutenberg embeds the content with proper formatting:
For pretty much every Embed, you just need to paste in the URL and Gutenberg handles the rest. I’m guessing most casual users will much prefer this method to needing to hunt down the HTML embed code and paste it into the Text tab of the current TinyMCE Editor.
Pre-Formatted Content Blocks and Layout Blocks
Another neat feature is the addition of Formatting blocks and Layout Blocks. These allow you to quickly insert things like pull quotes, buttons, and separators, as well as custom code or HTML.
Think of these almost like lightweight elements you’d see in a page builder.
For example, if you insert a button block, you’ll be able to quickly...add a button:
For power users, adding CSS buttons isn’t really a difficult thing. But again, this should make creating post content much more accessible to the general population.
For now, you don’t have very much control over the style of the button, though.
Moving Content Blocks Around
One of the advantages of the block-based system is that it’s super simple to move blocks around. Whereas with the previous TinyMCE Editor you’d pretty much need to copy and paste to move content around, now you just need to use the up or down arrows next to each block:
In case you’re wondering - Gutenberg is not drag and drop. But you can select multiple blocks at the same time by clicking dragging your mouse over multiple blocks:
This helps out if you need to move large chunks of content around.
Undo / Redo Buttons Are Here!
One thing I absolutely love about Gutenberg is the addition of Undo and Redo buttons to the Editor. If you make a mistake, all you need to do is click to undo your last action:
Just as smooth and simple as working in Word.
Some Things That You Might Not Like
While I’m generally a fan of Gutenberg for casual users, there are some things that I worry about. Again - this is still the beta version, so some of this stuff might get fixed.
Copy and Pasting Is Awkward
One of the issues I’ve encountered with some block-based editors is that they make copy and pasting text from an external source a bit...awkward.
To test that, I’m going to copy and paste in some text from my Setka Editor and see what Gutenberg does with it:
The highlighted parts are <h2> tags in the original text. But as you can see, Gutenberg strips away that formatting when you paste in text (unlike the current TinyMCE Editor).
Additionally, if you want to paste in text and add your images later, you seem to have to use the up and down buttons for each individual image instead of just inserting it directly where you want it.
That’s a mess if you’re one of the people who likes to write in Google Docs and then bring content into WordPress. Since I’m one of those people...this is actually a pretty huge negative in my opinion.
No Column Support
While you can change alignments, Gutenberg’s interface is still just one big column. I wish there were some way to divide content into multiple columns.
In poking around, it appears that that’s unlikely to happen in the initial release. But it seems the devs have indeed thought about columns and are building that into Gutenberg’s foundation.
At least according to current plans, multi-column layouts might well be coming in version 2 of Gutenberg...we’ll just have to wait for quite some time.
How the Heck Do You Change Colors?
I feel like I’m taking crazy pills but I couldn’t figure out how to change the color on any element in Gutenberg.
Take that button for example - it’s great to be able to add it - but what if I don’t want it to be blue?
Do I have to add custom CSS just to change the background color of my button? I know introducing that opens up a whole new can of worms because then you also need to find a place for font color as well.
But it feels overly limiting to have it hard-coded as blue.
Maybe this changes, or maybe I just completely missed the setting...but it seems odd.
Final Thoughts on Gutenberg
I think Gutenberg is an improvement for casual users who like to write their content in the WordPress Editor.
But as someone who writes and uploads multiple posts per day from Google Docs, I don’t see any benefit to Gutenberg based on how I work. All it does is make it a heckuva lot harder to bring in content from something like Google Docs. Which would be, pardon my French, a massive PITA.
As an optional alternative? I think it’s neat. As a replacement for the WordPress Editor? I’m not a fan.
If you want to play around with Gutenberg for yourself, you can easily spin up a test site with something like Addendio or Poopy.life and test it for yourself. Both let you quickly create a sandbox so that you’re not risking your production site just to use the Gutenberg Editor.
What do you guys think about the Gutenberg Editor?