James Koster

Site editor tasks typically vary from post editor tasks. Instead of the freeform writing that occurs when one is drafting a post, it more likely to find yourself traversing different areas and different layers of the document when making adjustments to a template.

Over the last few weeks we’ve been experimenting with ways to make those site editing exercises feel more intuitive. In large part this has been founded on the idea of displaying various outline states as you hover and select blocks on the canvas. These combine to instill confidence when selecting and working with more complex nesting, and container blocks like Template Parts.

It’s not perfect yet, but I think the outline effects are a net positive as demonstrated in the gif above.

Moving forwards

The enhancements we’ve added to Edit mode in the site editor have effectively resulted in it consuming several of the characteristics of the pre-existing Select mode. This is problematic because it brings the very existence of a dedicated Select mode in to question, and creates inconsistent UX between the post editor and the site editor. How can we address this?

The most sensible way is to holistically transplant the outlines we added to Edit mode in the site editor, to Select mode. This will result in a consistent experience as folks switch between modes in both post and site editors. An added benefit is that we inherit the click-through behaviour we’ve been wanting to explore for template parts and reusable blocks for free, since that is already built in to Select mode.

As discussed above, site editing is a less linear exercise than post editing, so it also makes sense for Select mode to be the default mode for the site editor. This works well in rudimentary terms, but Select mode is still missing some key features, namely:

• Upon block selection Edit mode is engaged instantly, and there is no way back to Select mode without actively initiating it via the icon in the top bar.

This essentially means that after you’ve selected and begun editing a block, selecting the next block to edit becomes a tedious task, aimlessly clicking around the visible space the block occupies hoping against the odds that you are able to select it. We need an elegant way back to Select mode.

Intuitive selection of an object to edit is one of the most crucial interactions to get right in the site editor. I don’t believe we should be relying on people manually switching modes. We can do better!

A prototype

In the last couple of days I’ve been playing with a prototype (it’s rough – don’t try it on mobile and under no circumstances look at the code 🙈) that addresses the issues in Select mode, and makes the transition between Select/Edit modes feel more seamless. The following heuristics are implemented:

1. Select is the default mode.
2. Hovering a block displays a strong outline – this is helpful for container blocks like the Header in the prototype.
3. Clicking a block will select it, revealing the block name.
4. Clicking a child block (like the Site Title in the prototype) will select the parent first.
5. When a parent block is selected, its immediate descendants become interactive.
6. Clicking a selected block engages edit mode. If the selected block has a parent, it is indicated with a dotted outline.
7. With edit mode engaged, clicking anywhere outside the selected block deselects it and returns you to Select mode, unless…
8. You click on a block of related context – in this case edit mode is retained. This is demonstrated in the prototype by moving directly between editing the Site Title (a text block) and the Paragraph (also a text block).

The video below illustrates each of these behaviours in turn:

In addition to the icon in the top bar, the outlines (or lack-thereof, mode depending) help indicate which mode you are currently in. Edit mode is clean and simple, with less visual noise. Select mode adds the necessary UI to enable block selection and manipulation.

You’ll also notice that the block movers are only visible in Select mode. I think it might be interesting to make this mode about selection and layout primarily, and let Edit mode focus on the block contents and attributes. But that is a discussion for another day.

We have a PR open here to set Select as the default mode in the site editor. If this idea gains traction development will likely take place there.