It’s easy to get lost while trying to get around the Site Editor unless you are working day and night inside the tool. The navigation is jumpy and confusing, especially when going from template browsing to template editing to modifying individual blocks. A large PR is in progress for redesigning this UI with the introduction of a “browse mode” that would make the experience feel more like a design tool.
Gutenberg lead engineer Riad Benguella opened the PR as a continuation of the ongoing work on this project, which has its roots in ideas and explorations that have been fermenting since 2019. He shared a video that roughly demonstrates the target for the proposed UI changes.
Video
It essentially introduces a “navigable frame” where users can select from a menu of features on the left. More detailed efforts on improving the animations and placement of the menu items is happening simultaneously within the ticket.
The original idea was to include the “Navigation menu” item inside the sidebar, but Benguella removed it in favor of keeping the PR contained to simply adding the “edit/view” mode.
Although such a large PR has the potential to introduce a slew of regressions, Benguella said there is no other way around a big PR due to the the necessity of the structural changes to how the site editor is organized. He is attempting to keep it narrowly focused and not try to tackle features like browsing capabilities and adding UI (template lists, global styles, etc) to the sidebar.
The idea is not without some pushback. Alex Stine, Cloud Platform Engineer at Waystar, warned against introducing another Mode into Gutenberg, saying it “feels kind of reckless considering we haven’t refined existing modes for all users.” He noted that Gutenberg already has select/edit mode contexts.
“This was a feature basically added for screen readers only,” Stine said. “I am hoping this will one day be removed, but we’re not quite there yet.
“I think the community is trying to solve the wrong problem. If Gutenberg itself did not have such a complex UI, there would not be the need for a hundred different modes in a hundred different contexts, blocks, or even editors. We have gone so crazy making everything so quickly, no one thought about how to unify the interface across all editors. This feels like it could be another patch to a bigger problem.”
Stine cautioned against growing the UI for something that ultimately doesn’t make things any simpler.
“In a sense this PR doesn’t introduce any new mode, it just redesigns the current navigation panel a bit,” Benguella said in response. “I think it’s an opportunity to improve the a11y of the navigation in the site editor.
“The confusion in this PR is that it’s not about another mode in the editor itself, it’s higher level, it’s how we choose which template and template part to edit before actually entering the editor.”
Although the project’s contributors have been referring to it as “browse mode,” it is essentially a redesign for the existing UI to make it more intuitive for users to navigate. Gutenberg may not need any more new “modes” but the site editor is in dire need design improvements that will unify the experience and make it less chaotic for getting around.
During the most recent core Editor meeting, Gutenberg contributors called for feedback on the big PR, since it has so many moving parts and needs more scrutiny. It’s not ready to land in the next release of Gutenberg yet, but the concept is rapidly taking shape and may expand to include more features in the sidebar once the basic structure is in place.
