Revising the presentation of key Site Editor features

The Site Editor is a powerful tool, but the user experience lacks some coherence and a sense of hierarchy.

Template management and editing has central focus, despite the fact that it’s a product area that has proven difficult for some users to interpret.

Impactful features like style and menu management are hierarchically relegated, and consequently deliver a sub-optimal UX.

This week I’ve been ideating on how we might present site editor features with more appropriate weighting, so that the overall experience feels more like a design tool.

Orientation

Presently, when a user opens the site editor they’re taken to an instance of the block editor with their homepage pre-loaded, or more specifically the template that resolves to display their homepage pre-loaded. The latter nuance is important to note because due to the inherent complexity of the WordPress template system it can be a real source of confusion for less technical users.

Quite often, folks will be required to contemplate the ambiguous ‘Index’ template, or understand that the ‘Page’ template is applied not only to their homepage, but to all pages. Neither are the most user-friendly introduction to site editing!

So instead of dropping them directly in edit mode, we might instead present their site in a navigable ‘frame’, accompanied by a menu of features, where styles and navigation are presented on more appropriate footing next to templates. This isn’t a new idea, indeed it’s been explored in detail in issue #36667, and written about on the Making WordPress Design Blog.

Clicking between Browse and Edit modes

The combination of the site frame (Browse mode) and one-click editing helps to obfuscate some of the aforementioned confusion around template editing. Now you simply browse to the page you want to update, and click ‘Edit’.

The lines that exist between template and content still need to be drawn more clearly, but they’re best indicated within the editor canvas and we have several open issues exploring that already.

Another feature of the design tool could be a high-level view where you’re able to observe some of the most impactful pages and templates at your site together. It’s usefulness becomes apparent as you play around with the various styling options.

Switching to Site Overview then changing style variation

Block preview

One frustrating consequence of Styles being a secondary feature to the template editor is that you can often find yourself customising the appearance of a block without being able to see it on the canvas. This kind of ‘blind editing’ feels really awkward, and because it’s encapsulated within template editing, we’re forced to consider band-aid solutions like putting previews in the Styles panel.

In this updated interface we can simply swap out the site frame and replace it with a preview of the block you’re editing. This is better not only because it ensures you can always observe the thing you’re editing, but also because it creates a richer preview environment. Maybe you need to see how an image scales down to small screens, or how buttons in a row will fill the space / wrap, or how different block styles / states (hover) are rendered.

Editing the Button block with a preview

Identity and homepage settings

I don’t miss the Customizer, but one thing it did fairly well was the facilitation of identity and homepage configuration.

Centralised settings panels for these features didn’t make their way into the Site Editor yet, largely because a convenient location for them hasn’t presented itself.

But it should be possible to edit this site meta data without having to go into the full template / post editor modes, and editing the Site Title block on a granular level.

One option would be to replicate the old Customizer interface in the design tool:

Navigating to site meta edit interfaces in the design tool

It goes without saying that as you manipulate these options, the site frame would update to reflect your changes automatically.

The Library

More complex features like templates, template parts, reusable blocks, patterns, and so on, live in the Library. Each section therein behaves the same – a thumbnail mosaic details the entities within the selected category, and clicking one invokes the edit view for that item.

Browsing Page templates in the Library

It’s possible to switch from the mosaic to a list view, where bulk actions such as trashing can take place.

Managing menus

Finally we have menu management. This is currently tacked on to the Site Editor and suffers the same ailments as the block styling experience, IE you often find yourself editing something without being able to see it on the canvas, which feels very disorienting.

To fix this, we can reuse the block styling flow from before, whereby after selecting a menu to edit, you actually see that menu in the preview area on the right.

Editing a navigation menu

One dot still to connect here is the block-based editing experience for navigation menus. Obviously we have the Navigation block itself, but also the focussed editing mode that is used for template parts. It’s fairly easy to imagine the latter serving as a bridge between these interfaces. IE an ‘Edit as blocks’ button that takes users to focus mode. This could be presented as a part of the Navigation block, and the menu editing interface demonstrated above in the design tool.

Implementing an MVP

A nice thing about the overall concept here is that (theoretically) large parts of it can be shipped relatively quickly.

Browse mode is a significant undertaking, but it’s not essential, the frame alone provides an important visual landmark between editing / managing. Mosaic template views are something we’ve explored in the past, and the work therein can hopefully be reused for the site overview feature. Individual block previews already exist (a block preview is displayed when hovered in the Inserter) so it doesn’t seem a huge leap to utilise this when editing a block style. Homepage and site identity settings can be added later as well.

The ideas are still formative, but with some pruning we can get things into a shippable state. My next step is to refine and prototype a more stripped-back version, and take that to github for wider thoughts and feedback.


Categories: , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: