What is New

For Bloggers and WordPress theme designers, allow me to help you get started with valuable tips to make things easier.

gutenberg editor

WordPress Gutenberg editor style and layout needs a change

  • Posted on

I will be honest in saying that I am not a fan of the up and coming WordPress Gutenberg editor. Automattic is putting this editor into the core of WordPress is one thing, but we need a better interface. As I am sure there are people who love this editor, it desperately needs some user interface refinement. 

I decided to write a quick post on this one issue with a few screenshots, using Gutenberg v3.5.0 and the Atomic Blocks theme.

The WordPress Gutenberg Editor – Default Layout

When you install and activate the editor, you will notice a rather sparse layout with functions spread out and hidden. Writing posts is going to be challenging for many people who were once used to where things were. But with the new Gutenberg editor, we now get an interface like this:

WordPress Gutenberg Editor
Click to View Larger Screenshot

Definitely a minimalist style concept for the editor layout, but if you are used to the old editor, this one is going to take you extra time to learn it. Finding the various functions that are hidden will be the most challenging. If you are managing your website on a large monitor with high resolution, the area will seem even more spread out.

My Own Layout Suggestion

Playing with the WordPress Gutenberg editor, currently on version 3.5.0, I decided to explore potential layout and styles that might appeal to others. I know WordPress is protective on the colour schemes, so I did one with the dark grey and one with a light grey that fits within the default styling of WordPress.

Gutenberg Dark

This one helps with a higher contrast by placing the blocks along the top with a darker background:

Click to View Larger Screenshot

Gutenberg Light

If you are one that likes a lighter style, this also keeps the blocks in view along the top but with a lighter background:

Click to View Larger Screenshot

Basically the same layout and positioning for the editor blocks, but the idea is to keep them in view. The width would also relate to the width of the content area as well and maintaining responsiveness.

Of course, this is just an idea that came to me when exploring the editor, but having to click on a little (+) icon and having to scroll for blocks is tedious in my opinion.

UPDATE: I decided to post to the Gutenberg Github with the suggestion of the layout I proposed. First, I have to admit I am surprised I even got a reply back from the lead, Tammie Lister, but it’s only right to at least appreciate the fact she did reply.

Ultimately the response was:

Thanks for taking a look. Whilst I appreciate this suggestion for now we are going to stick with what we have for the block library. There is also an interation going on with it right now. A few consideration points I would suggest for you in thinking about iterations:

  • Mobile: What you suggest wouldn’t adapt to smaller devices.
  • Interaction sections: Ideally each area has a section that makes sense, it doesn’t if you combine and pull out from the block library as you have.

Again, I appreciate that I got a reply, but I really don’t agree with that assessment. However, it appears they are basically keeping what they have now and the ticket was “Closed” without further input. Too bad because I honestly felt this would help ease the frustrations with Gutenberg’s layout that a lot of people have.

  1. Rob McClellan

    Throw on the common editing functions (a’la MS Word Ribbon) and the ability to add/mix meta-boxes and you’ve got a winner. One of the biggest complaints about Gutenberg is their chosen layout – it is too simple for such a complex editor.

    I think the code blocks concept is an excellent one, and a much needed update from shortcodes and widgets. But the actual editor itself is very poorly designed.

    Of course, that everything (including every element of text) is its own separate block is a very… unique decision. Personally, I would never treat individual text elements in that fashion.

    Gutenberg strikes me as a stripped down page builder that calls itself an “editor” instead of an actual editor that allows for the placement of discrete “blocks”.

    • Andre

      There is definitely a lot of room for improvement. As mentioned, I’m not a fan of Gutenberg, but there are a “few” things that I like, such as the ability to visually see (when hovering) each block where paragraphs and other elements are in their own individual block. The idea of blocks is also moving towards a likable feature. Still, the layout still needs some serious attention.

Write a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.