Site Editor: Rationalizing the Order of Sidebar Items

[okmttdhr]

What

I propose reorganizing the sidebar items to ensure they follow a more logical and rational sequence.

Why

After researching the current ordering of the sidebar items, I found that they appear to lack a rationale (or I just could not find it). For reference, here is a list of PRs (Pull Requests) that contributed to adding each sidebar item:

• Add templates list page for site editor #36379
  • Library: Rename template parts to library #50769
  • Patterns: Rename Library to Patterns #52102
• Add: Navigation menus to the browse mode sidebar. #46436
• Add the pages menu to the site editor #50463
• Add: Styles section to the browse mode sidebar. #49014

The current order of items, such as 'Navigation' does not align with the user's needs, especially when previewing a block theme. This misalignment can lead to confusion, as backed by the data showing a first-item bias in click ratios on WordPress.com. Reorganizing these items more logically would enhance user experience and reduce confusion.

[annezazu]

Related PR: #56430 (comment)

[annezazu]

👋🏼 Chiming in here after having time to dig into both the PR that's underway and this issue in more depth. In terms of context for the order of the sidebar items, the design concepts and discussion can be seen first in this PR and later here in this dedicated discussion issue. Some of this goes back to the original design shared in this Make Core post. I can't speak more to it beyond those designs.

There are a few issues to separate out here:

• The experience of using the Site Editor for the Live Preview feature vs using the Site Editor to edit your site. Quite different contexts!
• The assumption that navigation isn't useful to users in all contexts, including Live Preview, causing unnecessary clicks rather than navigation being selected because it's useful (and a very common action to take).

I understand that currently the Navigation section is limited but so is the Styles section, particularly if you don't have any or many style variations to load. This work to improve the Styles detail view seeks to remedy that. This doesn't mention some longer standing issues with switching style variations that I touch on here:

Currently, the Style section of the Site View emphasizes style variations with a deep link to open Styles. In writing calls for testing and thinking about current issues with changing style variations, like Custom CSS: Unsaved Additional CSS is lost after browsing different style variations & Custom colors are lost when styles are changed, it feels risky to surface style variations to this degree and doesn't align with what I imagine is a common action a user will take. For many, style variation switches would constitute a pseudo theme switch in terms of impact to the site's design and potentially layout. Right now, it's really easy to switch and not know how to switch back to what you originally had too without an undo button visible. I know we have revisions but to access those revisions one would have to know to go to the granular Styles view > three dot menu > view revisions.

While for Live Preview, it might make more sense for Styles to be higher up, it's not the only use case the Site Editor is used for (nor the main use case). We need to consider the broader impact and cohesive experience. Let's get @WordPress/gutenberg-design involved here.

Can we get more data shared around what you all are seeing, along with additional user insights shared here? This is a big potential change that will impact docs, training, marketing, etc. While the current order isn't set in stone and should be iterated upon based on feedback, let's do so very carefully cc @scruffian who is working on the related PR. I worry about how rapidly the order of items are changing and being thrown around there.

[jasmussen]

I want to mainly echo Anne, and note with emphasis that the current order is very much intentional. It can certainly be revisited, but it should be done carefully. Of note, switching between block themes is currently an extremely unpolished and rough experience that I hope we can get in a better shape soon.

For the slightly longer view I'd even say that "previewing" is going to have nuance, where switching themes should not just be a simple preview and switch action, but in fact offer choices of what to keep from the old theme, and what to get from the new. This ties directly into multi-entity saving, the modal that appears when you make changes across site options, page content, and more. This interface should be the same that's shown when you switch themes, and should break out details about every single change you are saving with descriptions and context, so you can pick and choose what to keep or discard. Add to that options for scheduling, and you should be able to plan out how your Black Friday store design should look, and have that go live automatically on a particular date; site title, content changes, style changes, navigation changes, and even theme switches if need be, on a particular date.

[richtabor]

Can we get more data shared around what you all are seeing, along with additional user insights shared here?

This is the hero here. Considering the admin redesign I'd say let's continue to gather data and insights before changing the default order up.

[scruffian]

Closed in error, sorry!

[autumnfjeld]

I want to mainly echo Anne, and note with emphasis that the current order is very much intentional.

Can you explain the intention? Why the order is like it is? Do you think Navigation is the most common thing people will be looking for?

[jasmussen]

Sure, I went into it a little in the comment, but happy to elaborate a bit:

The site editor is currently optimized to create a single place where you can build out and launch your complete website. This puts emphasis on pages and navigation over styles, as the relationship between the two is often unclear, yet it's a key part to customize when you onboard or switch to WordPress.

Styles are intentionally lowered on the list because the experience at the moment is very poor; style variations as presets lack all the nuance of picking fonts and individual colors, and does not provide a compelling or clear path towards customizing those. When you don't have any style variations, the button is just a link into global styles, where the global styles inspector is easily mistaken for the document inspector, we see this often.

Of note, switching between block themes is currently an extremely unpolished and rough experience that I hope we can get in a better shape soon.

Finally, the theme switching flow truly needs a more holistic thought as it is ties into not just switching up the visuals, but as I noted in the example, about scheduling, saving for later, or customizing all at once not just style changes, but even content changes. Those are some big structural improvements needing to be made, and you can watch the process unfold in WordPress design snaps every two weeks. Notably this one from a few weeks ago delves into moving global styles into the site view, an important step on the way to a baseline.

This took a while to write. I hope it was useful!