FSE Program Guiding the Gutenberg Gallery Summary

This post is a summary of the seventeenth call for testing for the FSE outreach program. As always, I want to highlight those who helped to bring others along with them in this latest effort: 

Finally, thanks for the patience as this recap took a bit more time to get done, due to balancing other responsibilities with 6.1. 

High-level summary

In many ways, this post could be split equally between the zoomed out view and navigation blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. as that’s where much of the focus of feedback is centered. To make it easier to see the emphasis on zoomed out view and navigation block in the feedback from folks, each item of feedback has been clearly labeled. 

In general, the zoomed out view proved to be seen as a high value add with folks immediately appreciating the value when switching between style variations and only a few bugs/enhancements found. It’s clear that, in time, having this view invoked contextually when doing things like changing style variations or adding patterns will be advantageous to the site editing experience when you need a way to see a broader view. 

In terms of the navigation block, feedback underscored that it remains clunky to use. With this test focused on theme switching it highlighted that, while 6.1 brings huge strides in terms of fallbacks, work remains to be done even for basic site switching experience. Due to the complexity of the navigation block, various issues surrounding using the block itself were also noted including overlap issues when managing sub-menu items, a desire to have a more dedicated way to quickly alter the structure of the menu items, and confusion around the “double click to edit” experience that prioritizes selecting a container block rather than inner blocks at first.

Beyond these two buckets of feedback, some high level items remained including a need to properly migrate widgets to block themes as that’s a key part of the experience currently lacking that causes content loss. Tied to this, various pain points in style switching, a big part of Twenty Twenty-Three, were noted including a lack of clarity around how changes to a style variation wipes out previous manual edits to styles and a delay in the changes to a style variations appearing on the front end of a site. More simply, this test also showed how opening up access to edit these parts of your site also requires a more streamlined way to make common changes, like changing basic colors (background) in a new template, without impacting the entire site. 

O that is very very nice! I like being zoomed out and viewing the page while clicking the various styles! It gives a really nice overview!

@paaljoachim in this comment.

I feel like novice users likely don’t know the implication of what will change with their theme. They might assume that the colors/styles may change, but not necessarily structural changes (like having to re-do the menu). I wonder if there is some way to give users (maybe just those that haven’t switched themes before) some more information about this.

@clubkert in this comment.

Adding a way to edit the menu via a drag and drop interface in a modal window or something would be nice, precise clicking and adding submenus was tricky for me, whereas the WordPress standard way of editing menus is quite easy to work with.

@chopinbach in this comment.

I noticed that when I switched from Twenty Twenty One to Twenty Twenty Two the navigation changed and lost the previous menu. That’s unexpected and not great.… When clicking on manage menus, I was actually hoping to find the old menu interface where I could easily drag and drop menu items, add classes, and enable different items still not shown in the menu (Product categories, languages, etc.). My dreamy dream wish would be to select a menu in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. and be shown the “classic” editing interface for that menu, right away…Menus were one of the ways I often used to wow friends and customers about how simple WordPress menus were, and even newbies would get it right away. Coming from Joomla! Everybody was pretty impressed in a positive way.The block menu system still often feels like a collection of somewhat unrelated blocks, that won’t even update links when page slugs are changed. The menu experience really feels needlessly clunky and not intuitive to me. I wonder how new users feel about it.  

@piermario in this comment (merged a few different lines).

For any folks who want to watch a group go through this experience, check out the following video:

Confirmed Bugs

The following bugs were found in the current experience, some of which have already been fixed: 

When selecting a pattern from the footer categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging., it gets added as Group. When it’s just a Group, the Replace functionality is not available. In order to use the Replace functionality, you have to first add a Footer block and then select one of the footer patterns from there. I guess this can be confusing for some people expecting to see the Replace menu item, when there is none.

@luminuu in this comment.

Feature Requests 

It’s important to note that most folks mentioned wanting to see a different icon for the zoomed out view. In the issue introducing this feature itself, the icon was a topic of conversation but, in the long term, this isn’t truly meant to be a “standalone” tool to toggle on/off. Rather, it’s meant to be a view that is embedded intuitively throughout the experience. To get a sense of what that might look like, here are two examples where this mode would be “invoked” while taking specific actions where the view is most helpful: when the patterns tab is open in the Inserter and when switching between style variations. For this reason, an issue was not open. 

Continuing to do work that improves the “out of the box” default options of the navigation block remains incredibly valuable, from better fallbacks to preventing accidental duplication of imports. 

Zooming worked well to see what was there. I was able to insert new sections or patterns. I could also rearrange sections. I was not able to replace or delete any sections. (Not sure if that’s an option yet.)

@antigone7 in this comment.

When I edit the template in zoomed out mode and have selected a Group block or HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes./Footer via the List View, the blue lines surrounding the selected group are very thin and almost not visible.

@luminuu in this comment.

When I switched, the home page title showed up (where it wasn’t there before), the menu changed, and my twitter feed was now gone (that I had added to the footer).

@clubkert in this comment.

General Usability

Much of the usability feedback came in around the zoomed out view and navigation block. For the zoomed out view, there was a desire for more functionality, from a way to control how much zoom occurred to being able to take action on each section (delete/swap/etc). Rather than opening individual issues for these items, this recap is going to rely on the current designs that include these items for consideration with comments left on the main issue. For the navigation block, the feedback heavily indicated that the current experience of controlling and rearranging menu items is still too difficult, especially when a “convert to links” step has to happen. There are numerous efforts in progress to ease this from a way to edit the navigation in isolation to an editable “list view” style mode in the block settings.

Click once to zoom a specific amount of percentage and click again to zoom out even further. So that one can choose between two zoom modes of how far out one views the page from.

@paaljoachim in this comment.

Repeatedly one click on the Navigation did not do anything. I had to double click it.

@paaljoachim in this comment.

If I change the styles manually (colors, etc.) then switch to a different style variation, there is no way to get back to my previous version. There is also no warning that I will be losing all of my hard work.

@clubkert in this comment.

It would be nice if the Navigation Menus in the top right of the toolbar allowed you to edit the items or if you could open a modal window to quickly edit the structure of the menu that would be easier.

@chopinbach in this comment.

Yay! Header and Footer patterns is one of the things I’ve been trying to discover, but I could never really find where this task could be done. So yay for the world of design options this feature opens, but unfortunately not so yay for the discoverability of this feature, which I find very interesting and fun.

@piermario in this comment.

#fse-outreach-program, #fse-testing-summary