Design Suggestion: Block Sidebar

[brandonpeat]

I'm a UX designer and front-end developer. I'm very excited by Gutenberg but I think the UX could be improved a lot with a couple simple tweaks.

Issues

1. The current "add block" button brings up a very small window with a search bar, expandable sections, and a long scrollbar. This makes it hard for new Gutenberg users to explore and compare what blocks exist. As new blocks are developed by the Gutenberg team and/or third-party developers, this list is going to continue to grow and exacerbate this issue.

2. The similar titles of the top 2 block categories are problematic. A first-time user will have trouble distinguishing "Most Used" and "Common Blocks", especially since most blocks within them are the same (I think they're completely the same, until/unless the user starts using blocks from other sections?).

3. Adding a block closes the "Add Block" window. If I want to add a dozen blocks, I have to toggle that window open a dozen times (whether I'm toggling it from the top or from a "+" icon above one of my existing blocks). That's going to slow users down.

Suggestion: changing the "Add Block" window to a sidebar.

This could be toggled on/off in the exact same manner as the "Settings" sidebar on the right (consistent behavior = good for training users).

Existing "Add Block" functionality (search, expandable sections) could be preserved as is. Possibly consider having ALL sections expanded at the start for maximum discoverability by the user. Search is great, but many first-time users will want to understand what the options are instead of searching for terms they're not familiar with yet.

My rough design comp above also suggests shifting to a 2-column format (vs the current 3-column) so sidebar width can match the Settings sidebar width and not encroach too far into the main content editor. (I've obviously omitted several blocks per section purely for speed of design, the real deal would have them all there.)

This could make it possible to add drag-and-drop functionality of blocks from the sidebar to the main content area, like good old widgets do? Again, consistent behavior = good for training users. And it will speed up adding new blocks, since users can browse/scroll each area independently to figure out what block they want to put where.

With this greater ease of browsing and discovering blocks, I think the "Most Used" section can be removed. Having blocks appear in more than one place in the menu is going to be confusing for new users, especially when at start "Most Used" blocks are going to entirely be "Common Blocks." That's going to negatively impact users exploring and discovering blocks beyond the set we're showing them twice in a row. That said, I could see a use case for a "Most Used" section for sites with a lot of different users or content types. Perhaps there could be an option to enable/disable the "Most Used" section, and leave that up to individual site admins?

Thanks to the team for all your work on Gutenberg!

[designsimply]

Welcome and thank you for the feedback! I know that there have been a number of past discussions as well as iterations on this topic. I would like to link to a few examples for a little background to start:

• Try: use 'frecency' to sort items in the inserters #5342 - label changed from "Recent" to "Frequent"
• Consider not padding Frequent tab with blocks that are in common category #5627 (comment) - explanation of intent for the frequent category
• Utilize top bar area to place the most common / most used blocks #8224 - suggestion to use the top toolbar for most used / common blocks
• Re-grouping Editor Inserter Menu #11406 - non-English perspective on the naming of "Common" and "Most Used"
• Should "common blocks" comprise the most commonly-used blocks? #11515 - a suggestion to match "Common Blocks" better with usage metrics
• Try inserter with collapsable panels #6636 - discussion around collapsible panels and their merit or disadvantages

There are probably more that I have missed!

On the point about there being a large number of blocks, some updates that have been made in the past for that were making the panels collapsible and also adding a / inserter which you can use to add blocks quickly from a search when starting from an empty block. To help with discoverability, the writing prompt has had some iterations such as "Write your story" changing to "Add text or type / to add content" (also see #9076).

On the point about naming, I think it would be cool to move that part of the discussion to #11406 (partly because it's a similar ask from a different perspective and also because it's helpful to keep issues streamlined where possible).

The adding dozens of blocks at once point is interesting to me as I tend to add them as I go and not add several all at once. You may be a bit ahead of the curve with the idea around drag and drop to place blocks because that sounds a bit more like what will be planned in Phase 2 which will be about Customization. Currently, we are wrapping up Phase 1 which is the block editor.

For reference, here is a screenshot showing how the inserter currently looks:

Note: I've only added a few notes from things I've seen discussed in the past but I'm adding these for historical reference and not advocating for any one position over another at this point. 🙂

[brandonpeat]

Thanks for the links, I tried searching for open issues related to this but wasn't finding much. I figured I wasn't first to the party!

Some of my suggestion is similar to #11557 in that the current interface format is probably optimized more for small or medium screens, while those of us with larger screens (which I'd assume is at least a healthy chunk of developers) aren't getting a super optimized experience. The inserter has a ton of content, but a user's access to that content is only through a tiny window no matter their screen size.

I just picked up Gutenberg yesterday so I hadn't seen the evolution process. I think the idea of the expandable sections is great vs. the tabs in prior versions, but IMHO the expanding sections should also expand the window they're in instead of forcing a scrollbar. And if that's the case, why not move the whole thing to a sidebar?

I also think it's worth considering how Gutenberg works with Wordpress as a whole. I work at an advertising agency and we build a lot of websites on Wordpress, so for our clients WP is rarely used for blogging and more for creating/managing a corporate presence. Whoever draws the short straw on the client side has to learn the CMS, and it can be a big ask to get someone to learn a big new system when it's not part of their day-to-day. There are now at least 3 areas where users select from a list of things on the left, and add to a content area on the right: Pages/Posts with Gutenberg, and the Widgets page, and the Menus page. But those processes and UX elements look very different. I think a more holistic UX approach could bring those areas closer together in look and function, and make all 3 more intuitive to users.

Re: order of adding blocks: Coming from a design and development background rather than content creation, in many cases I'll want to define the page's structure first -- adding columns, text blocks, an image over here -- and then go back and populate with final content.

I've joined the thread at #11406 for naming-related input!

[afercia]

Please refer to #11688 (comment) for some general considerations about sidebars.

In this specific case, there would be one additional issue to address:

• currently, when pressing a block button in the inserter, focus is moved to the newly inserted block so users can start operating on the block
• inserting multiple blocks would move focus each time a block is inserted
• this wouldn't be a problem for mouse users, but it would be a huge problem for keyboard users
• they would be forced to navigate back to the inserter each time
• what is the keyboard interaction flow in the two different cases?
• I'm not sure there's a way to programmatically determine when users are going to insert a single block or multiple blocks, and I'm not sure Gutenberg should even try to do it

[karmatosed]

This is an interesting exploration but I would note something like this could be used in a plugin to explore. I would also add that @afercia has a really valid point about accessibility concerns regarding sidebars. For now, let's close up this issue. I can see a future exploration of having different preferences in plugins.