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

• Navigation block: double accessibility color contrast warnings.
• Navigation block: new editable list view undo doesn’t work after using the option to create a new menu.
• Query Loop: Small image and title pattern has incorrect spacing.
• Text Only mode: ensure split settings work correctly. Fixed in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 15.0.
• Styles: Preview and Stylebook cut off with Whisper variation. Fixed in Gutenberg 15.0.

Previous:

• Using ‘Reset’ while a variation is active resets to the default theme style instead of the variation style
• Navigation toolbar overlaps on submenu links when we open sidebar settings or When we use smaller viewport
• List view drag and drop – make it possible to drop at all levels of the hierarchy. This bug also impacts the Navigation Block editable list mode. 
• Site Editor: Gradient background color repeats.
• Navigation: Ghost inserter after items. Fixed in Gutenberg 15.0.
• Remove editor notices in the Site Editor. Fixed in Gutenberg 15.0.

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.. 

• Browse Mode: Make the Edit button more visible. Fixed in Gutenberg 14.9.
• Browse Mode: Consider unifying add new templates and template parts UI.
• Browse mode: Consider adding in descriptions of templates after selection and improve the organization of templates to reflect importance/hierarchy, especially in order to identify the template powering the homepage.
• Browse mode: Add the ability to resize the view (already planned as a follow up item).
• Browse mode: Move Styles into the Browse mode navigation component (already planned as a follow up item).
• Browse mode: Add in the “Dashboard” link to make it easier to return (already planned as a follow up item).
• Navigation block: Consider offering a way to rename a navigation block upon creation.
• Navigation block: Allow users to change breakpoints for mobile menus.
• Navigation block: Allow users to adjust hover style for menu items (only available in theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.).
• Navigation block: Add the ability to customize the navigation block’s responsive modal, specifically for this test to resolve some spacing issues. 
• Improve prompt to edit “read more” text.
• Site Editor: preserve selection in drill down tabs when switching between.
• Site Editing: Discard unsaved changes when moving between editing modes.
• Site Editor: add a ‘Preview Site’ feature.
• Style Previews: add options for blocks missing previews (already noted for follow up in the initial PR).
• Style Preview: Navigation block only shows mobile view making it difficult to style.
• Template inspector: Surface revisions panel.
• Button: Adopt support for border color, style, and width.
• Shadow: Add shadow presets and UI tools in global styles (PR in progress).
• Consider renaming or removing “Areas” in dropdown.
• Settings: Consider renaming or removing “Plugins” section.
• Discussion around adding a way to include Javascript or PHP snippets to Block Themes.

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. 

• Align pattern / template part modal dimensions, and add view options for a more cohesive experience. This includes improving the Query Loop block setup state, which was repeatedly mentioned as a pain pointPain point Pain points are “places where you know from research or analytics that users are currently getting hung up and have to ask questions, or are likely to abandon the site or app.” — Design for Real Life in this experience by numerous folks. 
• Navigation: Block inserter challenges, specifically around emphasizing selecting a page or post and disabling direct insert.
• Desire for better handling of unset / inherited values with Design Tools including confusion around how adding a background color adds padding.
• Navigation block: New editable list makes it hard to see how to delete submenu items
• Navigation List View: Drag and drop considerations
• Include an option to have multiple Query Loop blocks with the option to not repeat posts already shown by previous Query Loop on the same page.
• Site Editor: Ensure consistency between “resetting” mechanisms.
• Split Settings: No ability to tab or use keyboard shortcuts to get to different sections.
• Clicking the WordPress Icon in the Site Editor should go to the Dashboard.
• Navigation Focus Mode: Ability to access/edit Navigation Post items in isolation to help prevent mistakes. 

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