Rob Mc

WordPress 5.0 has rolled out, which  means millions of people now have Gutenberg as their page and post editor.  Given the state of reviews over at WordPress.Org surrounding the Gutenberg Plugin (and, conversely, the Classic Editor Plugin), you either love the new post editor or you hate it.

For me, I like the idea of blocks, but the actual writing and editing experience in the GB editor leaves a LOT to be desired.  Specifically, block based editing is incredibly distracting to me.  I have a hard time adjusting to it right outta the box.

I had the option to just install the Classic Editor Plugin, of course, and for all of my clients’ sites so far I have done so.  They were not interested in GB, preferring to keep things as they know them – which is an entirely sensible thing to do.  While Gutenberg isn’t horrible by any means, it is a huge change from how things are done in WordPress, and for many that’s just too much change in their daily lives.  Truly, I get it.

However, I decided that for me personally, I would embrace it a bit and see what I can do to make it work.  As someone who is very comfortable with the Classic Editor, specifically the text/html editor, this was a challenge.

The issues I have with the Gutenberg Editor are as follows:

1.  Incredibly visually distracting – with controls at the block level, the flickering of formatting options and tools was overwhelming to me, completely throwing myself out of the writing experience.
2. Automatic Formatting – the GB editor is very smart and does a pretty good job anticipating what you want to do.  While this is a commendable piece of code, I’m used to a lot more manual control over what I want to do.  I wanted to find a way to either eliminate this, or make it less intrusive.
3. Meta-Data – due to the “clean”-ness of the new editor (some say “spartan” or “blank”), the familiar fields in the editor are not easily visible (Categories, Tags, Featured Image, Excerpt, etc).
4. Scrolling – currently in the GB editor the scrolling is… unpredictable.  Why, I have no idea.  But, it definitely is as I am frequently prevented from scrolling all the way to the top or bottom of a post while editing.
5. A Lot Of Clicks – for many editing operations (adding a picture, formatting text, etc) it takes 2-3 times as many clicks as with the previous editor.

First Up – Getting the Controls Under Control

Buried in the Document Settings panel of the Gutenberg Editor is the option to set a “Top Toolbar” view.  For someone who can’t stand the flickering controls, this was a gold mine.  You do this by clicking on the three vertical dots at the top right corner to access the Editor Tools and Options Panel and then clicking on “Top Toolbar”.

Selecting this option sets the editing tools for any block in a ribbon at the top of the editor and not directly at each individual block.  You can see the difference in the two screen shots below.

This setting preserves the previous “TinyMCE” style of editing control and most closely resembles what you see in a traditional document editor, such as Google Docs or MS Word.  In other words, it’s the closest to the familiar “ribbon” of controls in document editing.

Not only does it keep the controls from flickering all over the place, it’s also eliminates the annoying phenomenon of the block level controls covering up the last line of text in a previous block.

Next, Automatic Formatting

This one could not be fully fixed – if you are using the GB editor with standard blocks (ie you’re not writing everything in the Text Editor option or constantly using “classic” or “html” blocks), this is impossible to change.  For example, as soon as you type a number or a dash at the beginning of a line, it’s going to convert it into a “list” block.

Another example of this are “Title” blocks, which automatically defer to Gutenberg’s internal style guide, transforming blocks in hierarchy from H1, H2, etc.  When you first add (or transform) a block to Title, it just does this – and you can’t change it without clicking around. 

There is no way around this.

But, you can provide yourself more control over this, and I found that to be a little more helpful and enough to calm my document control issues.

Like I said, Gutenberg tries very hard to be helpful and it has a style guide all its own that is on automatic pilot.  But, you can override it, and that is easy to do.  Sadly, not every option is readily available at the top (or even block level controls) at all times.

Gutenberg “out of the box”, hides a lot of block functions, requiring several clicks to uncover the full suite of tool selections for that block.

Unless you enable the Settings Panel by clicking on the “gear” icon at the top right of the editor screen. 

Opening the Settings Panel displays an additional panel of “block” controls and provides any settings or options not immediately displayed in the block tools. 

This will save you significant frustration.

I definitely recommend just keeping that panel open at all times.  One, it unleashes auxiliary settings for each “block”, which is nice.  So, no hidden title block hierarchy, better access to image settings (size, caption, alt text, etc), and it’s not that jarring visually.

And, two, enabling this panel solves a lot of the issues from #3 on my list…

Easy MetaData Access

The Gutenberg Editor keeps a lot of stuff hidden by default.  Personally, I don’t find that very helpful.  At all.

Maybe for others this is preferred, as it is certainly a cleaner interface.  But, for me, it just means more work afterward finding everything.  

On the web a page or post is more than just what is on the page.  To make it effective, you need to tailor the meta-data, including things like featured image, excerpt, categories and tags, and more.  SEO, how it’s shared on social sites, comment control – it’s all in the metaboxes.

And, sadly, those metaboxes are not displayed by default in the GB editor.

But, you can easily enable them and I recommend you do.  Click on the “gear” icon at the top right and the right-side Settings Panel appears and it is full of helpful metaboxes – the sames ones that would appear by default in the previous “classic” editor screen.

WTF Is Going On With Scrolling?

Scrolling around in Gutenberg can get a little squirrelly.  Not sure why that is, likely it is a bug causing a conflict between the various panels (main editing area, side Settings Panel, bottom remnant plugin-metaboxes, etc).

To be honest, who really knows?  I’m sure there is an bug report in Github for it, but as there are hundreds of bug reports at this time, I’m not interested in searching for it, just solving it.

And there is an easy fix – enable “Full Screen Mode” in the editor settings.

You can do this by clicking on the three dots icon at the top right of your screen and selecting “Fullscreen Mode”.  

That means, like me, you will have both “Top Toolbar” and “Fullscreen Mode” selected.

For whatever reason, this makes pretty much everything work better from a pure “mechanics on the screen” standpoint.

How do you get back to your regular dashboard when you’re done with editing if you’re in the “Fullscreen Mode” of your editor?  Just click the “exit arrow” icon at the top left of your screen.

Getting Your Click Count Down

One of the chief complaints about the GB editor is that it takes too many clicks to get something done, as compared to the Classic Editor.  And, in my experience, this is completely true.

But, there are things you can do to make it less of a pain.

If you enable the Top Toolbar and keep the right side Settings Panel open, you can see the full tool suite for editing whatever block you happen to be in, which at least keeps the “Hunt and Find” for the right tool to a minimum.

Also, you don’t have to click to select a block before you start editing in that block.  You can just go ahead and highlight whatever you want to change.

One common complaint among users so far is that to change a piece of text from plain to bold type it takes more clicks, mainly because users felt they needed to (1) click the block to activate it, then (2) select the text, then (3) make the change (three clicks).  But, you can just go straight to selecting the text and then making the change, bringing the operation down to the normal 2 click actions you would see in the Classic Editor.

Side Note:  This is a byproduct of such a blatant “block” based editor.  The initial instinct of nearly every user is to feel they need to click a block to “activate” it and then they can edit inside of it.  That is not required – you can just go straight to working in the block.  This was a chief complaint among many in the GB reviews and comments in the hopes that the GB team would make the text blocks either invisible or comprehensive, with only the “code” type of blocks (images, widgets, quotes, etc) as visible blocks.  Sadly, that is not the case to date.  But, activating the Top Toolbar option lessons the “block” visual cues and makes things a little more instinctive.

Having the side Settings Panel activated also reduces the number of clicks required on a lot of other activities – editing images, quotes, Text Headings, and more – by simply making them more visually accessible.  Otherwise, you’ll have to click around the visible controls to uncover the hidden ones, which not only adds to the click count, but is incredibly frustrating as well.  Enabling the Settings Panel is essential in my view.

The Wrap Up

Gutenberg reminds me a lot of Windows 8.1 – and that is both good and bad.

Windows 8.1 (not pure 8, that was terrible), worked really well if you knew enough to set it up properly.  You could easily and quickly get out of that wretched mobile-tile interface they had going on and return to a more traditional desktop with a number of really nice extras. 

But, you had to bother to manually (even painstakingly) set up the Windows 8.1 desktop to do that, and many didn’t.  As a result, most people hated it and it was universally reviled, with Windows 10 largely reverting back to the traditional desktop interface with an ardent and public apology and a promise that they would never do that again.

The Gutenberg Editor might not be as catastrophic as Windows 8 was, or as reviled as the SnapChat redisign currently is.  But, it’s definitely a huge change and, in my opinion, a bit of a step too far.

If I had been leading the WordPress team, I would have kept the editor layout exactly the same as the “Classic” editor but added a new button to insert “blocks”.  Then, perhaps based on how that went, made a larger and more informed and tested visual change to the editor for WP 6.0.  But, that’s me.

I’ve found that, much like Windows 8.1, if you make a few quick selections, a majority of the issues surrounding the GB editor go away and it becomes a much more pleasurable writing experience.  Enough that I’m going to stick with it a while longer.

To wrap up, to make the GB editor a nicer editing experience, I highly recommend the following:

1.  Enable the “Top Toolbar” option in the Editor Tools and Options Panel via the three dot icon in the top right.
2. Enable the “Fullscreen Mode” option in the Editor Tools and Options Panel, also via the three dot icon.
3. Enable the right sidebar Settings Panel by clicking on the “gear” icon at the top right.

Gutenberg remembers your preferences, so once you select these options when writing a post, as long as you leave them alone each time you edit a page or post, the editing screen will be set up the same way with the same options.

Find any other tips for using the GB Editor?  Sound off in the comments below.