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:
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.
This one helps with a higher contrast by placing the blocks along the top with a darker background:
If you are one that likes a lighter style, this also keeps the blocks in view along the top but with a lighter background:
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.