FSE Program Running Through Refinements Summary

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

  • InstaWP for allowing the outreach program to use their tooling for free, enabling more folks to jump into this call for testing and for more creativity in what we are able to test. 
  • Replay.IO for trialing their software for the WordPress project and the various folks helping use it for this last call for testing. 
  • @piermario for the Italian translation of the call for testing.

Shout out to @pauthake015 @wesleyrakshit @bgoewert  @georginareeder @haeunpark @teresagobble @magicroundabout @ccwalburn @alexandretp @lanesdon @ioanamuresan @plari @jartes for being first time contributors. Expect a badge on your WordPress profiles for your contribution! What a lovely and large crew of new contributors to celebrate. 

High-level summary 

Feedback for all of the tested features was generally positive with folks able to see how what’s being worked on unites and moves forward the Site Editor experience. As always, there were also noted bugs, feature requests, and areas of refinement that mostly matched either current priorities or previously reported items, underscoring where the experience needs to move towards. Overall, three specific areas of iterations stood out outside of the positive feedback: 

  • Improving the pattern selection options particularly in the Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. setup state. 
  • Making the “Edit” option clearer in Browse mode. This has been improved upon already!
  • Iterate on the ability to rename a menu after creation and ensure drag & drop is reliable. 

Folks were impressed by Browse mode and the potential for it to help orient users to the Site Editor and its capabilities by emphasizing templates from the start with friction before editing. Moving Styles to this same section has already been listed as a next step and was reflected in the feedback as folks continue to look for clear delineation between what impacts a site globally. 

The 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.’s editable list view managed to strike a nice balance between the current List View experience and the prior menu management experience in Classic menus. This nice middle ground familiarity resulted in mostly excitement and ease, with continued feedback for refinement and desired functionality. 

Finally, the Style Book and Previews were a hit with minor bugs to resolve. It’s clear both will make a large difference in empowering folks to customize their sites and understand the global impact of their changes. 

First of all – I simply love the new concept. I love the list 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. – it feels more natural to see list there and content in the main panel; I really like the Edit button – it makes a huge difference in terms of clarity of the intent to change – and I anticipate we’ll see less mistakes. Overall I detect a ‘feel good’ factor and am excited to see these live.

@ioanamuresan in this comment.

Overall, I really enjoyed navigating through browse mode – the ability to easily view templates in the Site Editor and preview each one before going in to edit is a great experience… I also really love how much easier it is to see your navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. items in the sidebar here. Dragging and dropping menu/sub-menu/sub-sub-menu items is really easy and smooth.

@georginareeder in this comment.

I really like the split of settings in the sidebar – the navigation feels like a place where it makes sense conceptually to break them up that way… The Style Book is pretty much the greatest thing since sliced bread! It really feels like a game-changer to me – and I personally found it a way more usable to browse and edit the styles.

@jordesign in this comment.

I love that choosing Appearance > Edit now opens the editor with the sidebar so that you can see the options for Templates and Template Parts. I also like that you have to click Edit to edit the home page when you first access it. I think that makes it much clearer than immediately being thrown into the editor without a good understanding of where you are or what you are editing…I love the updates to the Navigation block and being able to add and configure menu items in the right sidebar! I didn’t have any trouble updating or creating menus with the new format…I experimented with the Replace option on the Query loop and found the patterns confusing. I couldn’t easily tell where one pattern ended and another began, and after I selected some of them, they looked different than I expected.

@ccwalburn in this comment.

I really liked the way the Navigation editing worked! It was so easy to manage. I also liked having the Stylebook available. I always have to create a page with all the blocks I want to use and style. The Stylebook makes it so much easier.

@antigone7 in this comment.

Confirmed Bugs

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

New

Previous:

Feature Requests 

Much of the feedback on Browse mode and the Navigation block matched what has already been noted or planned, underscoring the work that remains. In particular, at the beginning of the call for testing, there were repeated notes about the “Edit” button not being visible in Browse mode which was quickly iterated upon as the test continued. Finally, while the Navigation Block’s UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. improves, there are still repeated calls for deeper customization options both around mobile menus/overlays and things like hover styles in the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing.

Seemed to me that naming and renaming the menu should be somewhere more intuitive than under Settings > Advanced. Maybe next to the create button, or simply by clicking on the name of the menu. Or when creating menu?

@robglidden in this comment.

I find myself wanting some more description than just “Single.” If I customized these all for myself, maybe this would be enough to remind me what each one is.

@clubkert in this comment.

I really wanted drag-and-drop handles on the left-and-right-hand panels to be able to resize them.

@magicroundabout in this comment.

General Usability

Pattern selection for the Query Loop block, renaming the Navigation block, and visibility of default design tool options stood out as the most repeated feedback across each response. Outside of the critical feedback below, many folks found a much improved experience with each feature noting a much easier time creating and customizing menus, styling across one’s site with the preview and Style Book options, and quickly maneuvering through templates. 

The ‘list view’ vs ‘grid view’ to show patterns for the query loop is not intuitive. It is not clear that the ‘list view’ is showing a single pattern option, with the ability to scroll sideways to view others. When first seeing the ‘list’ vs ‘grid’ tabs in Choose Pattern, I would have expected that to have ‘single’ vs ‘grid’ pattern options – Similar to how the same buttons in the Query Loop toolbar determine whether they will appear in a list or grid view. None of the pattern options show ‘Grid with Images’; aka what shows up when you click the Grid button in the Block toolbar.

@alexandretp in this comment.

I found the dragging dropping of menu items in the right sidebar a bit eventful. Had a hard time positioning where I wanted them. If I accidentally indented them an extra level, I couldn’t go back just one level – I had to move it to the main menu, then reattempt to add it as a 1st level submenu. That said, it’s waaaaaay more clear and manageable than before so I think this is a significant improvement.

@ioanamuresan in this comment.

Clicking the black + square to add a link brings up a module which has too much focus on open in new tab and Transform. It would be helpful to better integrate selecting a page or post into this modul. It really needs a redesign making it a lot easier to select what one needs.

@paaljoachim in this comment.

I miss a “learning mode” (that can be switched off and on) with extra explanations for each option (and links to docs) in context.

@juanmaguitar in this comment.

I found myself clicking (and double clicking) the menu item itself to try to edit it which did nothing (vs. clicking the pencil).

@clubkert in this comment.

I find it confusing that it says “Browse styles”, when you are actually choosing, not browsing, a style variation.

@robglidden in this comment.

It bothers me that the role of the “W” logo in the top-right seems to change. Historically the WordPress logo takes you to the Dashboard, but when editing it takes you back a step. I found this confusing… I also generally dislike the fact that so many icons are non-standard and don’t have text labels. This makes it very hard for a new person to navigate the user interface. Yet when I turned labels on the experience was WORSE with labels being chopped off and it not being clear what anything did…I like the idea of tabs rather than LOOOOoooonnngg settings screens, but I don’t like the icons. Turning text labels on in the preferences didn’t seem to have any effect on the sidebar. Again, icons-plus-labels would be a much better option here. I really disliked having additional style settings turn-on-and-offable in the sidebar behind the three-dots menu thing. And I could not find how to make the text bold (eventually found as “appearance” but this should be “weight”).

@magicroundabout in this comment.

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