Contextual editing clarity

One of the most challenging elements to get right in the site editing UX is where and how we draw lines between the different editing contexts.

Until now, no lines have been drawn at all. In both the Site Editor and the Template Editor, if you’re able to see content, you can edit it directly, free of any friction whatsoever. Of course there are benefits to this – direct manipulation is a compelling argument. But as documents become more complex, and template editing more prevalent, drawbacks emerge.

In the go/no go discussion (re FSE in 5.8) last month the Query block came under scrutiny:

I think, also, to be honest, this is a bit too powerful right now. You can essentially modify any of your post’s actual content, feature images, and so on. This should probably not be the default. It should probably be something that you have, like, one more step to get there.

Matías Ventura

The same argument can be made in regards to template editing. Being able to edit the content of a post while also editing the post template blurs the lines between these two very different exercises, and undermines the very existence of separate content and template editors in the first place.

The issue is compounded when you consider the query block. Imagine inserting a Query in a page, then navigating to edit the Page template. Suddenly it’s possible not only to edit the content of every single post on your site in the context of a template editing session, but also to mistakenly drop that query in to the page template itself and potentially break the appearance of your whole site. Similar problems will surface when it becomes possible to edit templates for archives and search results.

You may argue that an experienced user would not make these kind of mistakes, and for the most part I agree. But with the template editing UI coming to 5.8 it will not only be experienced users who have access to this powerful feature.

It is my opinion that we should test some prototypes that add friction to content editing exercises that are outside the context of the current exercise. That is to say: if I open a page and engage the template editor, I should not be able to directly manipulate the content of that page. Likewise, when I insert a query in a post, I should not be able to directly manipulate the content therein.

You can probably guess what is coming at this point… 🙂 Yesterday I opened a draft pull request that serves as a proof of concept. It is very rough, but with some css hackery I was able to spoof making post block content un-editable in the template editor. Here’s a video:

Blocks like the Post Title, Post Content, Post Date etc can be selected, and their attributes can be modified. But their actual content is gated by an overlay UI similar to the one we’re exploring for template parts and reusable blocks.

It doesn’t feature in the PR, but it is quite easy to imagine some simple interactions that “unlock” edit-ability of the content. It might be a double-click, a keyboard modifier, a lock icon in the block toolbar, or a combination thereof.

The objective here is primarily to establish clear definition between content editing and template editing. I’m increasingly of the opinion that this will be a critical pillar of the UX if we’re to pursue dedicated views for these different editing contexts.

Migrating document attributes from the Inspector to the Top Bar

With Full Site Editing approaching, we’re exploring ways to better prepare the post editor for this richer editing experience. One enhancement being considered is moving the post title off the canvas, and into the Top Bar.

The reasoning for this change is that not all templates actually display the post title. So if you’re editing a post and viewing its template concurrently, it is consequently impossible to update the title.

We make use of the Top Bar in the Site Editor to display template details and actions, so this feels like a natural evolution.

This got me thinking about the editor iA, and whether we should move all document attributes to the top bar. There are a number of potential benefits to doing this:

  1. It reduces reliance on the heavy / noisy Inspector, and reduces its scope to tertiary block controls only.
  2. Creates a discrete, centralised location to manage document attributes, with increased real estate for more elaborate interfaces.
  3. Increases portability of document settings. If these attributes are presented in a popover / modal, they can be accessed from any location.
  4. Creates a more scalable environment for plugins to provide interaction with non-visual data. This is going to be vital for complex post types like those added by WooCommerce.

I think there is further justification in that one does not need to see the canvas while working with document attributes, and that design tools for blocks are a UI that users need more frequent access to.

Here’s a rough mockup to illustrate the idea:

The portability I referred to above can be useful in the mosaic view of content we may implement in the future.

This kind of quick-editing is a feature of the wp-admin list screens, and something we’ll need to create parity with in full site editing. The modal could even provide a bulk-editing environment too.

Another concept for contextual block pattern insertion

This one is proving rather tricky to get right! Feedback on previous iterations from the Full Site Editing Go / No Go discussion that took place this week indicates that seeing the pattern carousel on the canvas can be problematic.

It’s beginning to feel like one of those situations where a little friction in the UX can actually be quite helpful in helping the user to pause for a moment, and take in what is happening.

For linear end-to-end flows like this I often find that modals work well as they help establish the focus that is necessary to complete the task. So here’s a take on the pattern selection UI built in to a modal:

Inserting something complex like the Query block will trigger the pattern selector and give users a head start

This modal would be triggered on mouse-up to account for blocks being dragged from the inserter on to the canvas.

A nice thing about encapsulating this flow in a modal is that it can be entirely consistent regardless of entry point. This virtue could be valuable since there are many circumstances in which a user might find themselves inserting a block pattern; creating a template from scratch, transforming a block, editing a template part, and so on.

Zooming out to re-order root level blocks and discover contextual block patterns

An idea Joen and I have discussed a lot recently is providing users with a way to zoom out a level from the thing they’re editing in order to make more sweeping changes to the composition of their document.

This affordance can be a very useful tool when working with something like a template, where you might want to move a block over longer distances.

The notion of zooming out and revealing more of the “canvas” also creates an opportunity to introduce other features that perhaps do not fit in (or work so well) in the regular view. Pattern suggestion springs to mind as an obvious candidate.

A new Mode?

One way to add this feature to the Site Editor would be through a new Mode. Accessible through the menu in the top bar, or via an individual block’s toolbar, it would put these powerful features at a users fingertips in a variety of common flows.

Here’s a quick video mockup to demonstrate.

As the new Mode is engaged a number of changes occur:

  1. Root level blocks are reduced in size, spaced out, and their Toolbars are hidden.
  2. These blocks can be clicked to return to edit mode, or – if dragged – easily moved around the document.
  3. When a block is selected in this mode, any contextual block patterns are exposed via a carousel.
  4. Children of root level blocks are locked and cannot be manipulated.

Clearly there is a lot of work still to do here, but I think it’s an exciting concept because despite being such a powerful feature, it could be relatively straight-forward to implement in a piecemeal fashion.

Perhaps the initial iteration is only accessible while editing templates. Subsequent iterations can include pattern discovery for template parts, and then other block types. Finally the Mode can be introduced to the post editor as well.