Enhancing select mode

[jameskoster]

In the Site Editor we've made a number of enhancements to the interactions around block selection. In particular indicating block outlines on hover / focus, aligning those styles with the new persistent list view, and indicating the parent container of the selected block on the canvas. We're also experimenting with click-through patterns (#30156 #31109) for containers like Reusable Blocks and Template Parts. So far these enhancements have been made to Edit mode in the Site Editor exclusively.

Some of these interactions already exist in one form or another in Select mode. So it may soon be time to think about aligning Edit mode in the Site editor with Select mode everywhere else. With alignment and consistent mode behaviour across editors we can then consider making Select the default mode in the Site Editor, where nested blocks and complex layouts are more common.

Here's what we can take from the work we've done so far in the Site Editor, and apply to Select mode holistically:

• Outline styles on block hover, selection, and focus (Align block hover and select styles across list view, site editor, select mode #31277)
• Indicate the selected blocks container, if it has one
• Click-through styling

And here are some other enhancement ideas to explore:

• Important: Implement an intuitive way to re-engage select mode from edit mode (the current esc pattern is not obvious)
• Reveal the block name on hover (Select mode: Display the block name on hover #31283)
• Allow the entire block to function as a drag-handle (Select mode: Allow the entire block to function as a drag-handle #31284)
• Reveal the full-height list view while dragging (if it is not already open), and reflect the position of the dragged block therein
• Consider making Inspector and other plugins mode dependent. It may not make sense to see the inspector in select mode.
• Try a blue toolbar on selection, to match the outline (Try blue block chip in select mode and when dragging #31278)

And some 🐛 to squash:

• Fix the click behaviour (Select mode: Click behaviour produces inconsistent results #31327)

Figma file to explore issues that need design here.

[mtias]

Indicate the selected blocks container, if it has one

I am not totally sure about this one, I've found it mostly confusing in the site editor and it starts to diminish the clarity of the currently selected item. I think it can make sense for template part containers, but given the work to have overlays and isolated views it might not be necessary anymore.

[jameskoster]

Yes, I think the parent outline style should be tied to the click-through UI.

That is to say: the parent outline should only be applied in situations where the click-through itself is utilised. And of course only if the click-through UI itself makes use of a parent outline style.

[mariohamann]

Hey @jameskoster , interesting to see your thoughts – I created very similar issues some months ago with analysis, examples and screenshots – maybe it is of any help for you:

#24751

• "Allow the entire block to function as a drag-handle"
• "Click-through styling"
• "Reveal the block name on hover" (together with Show outlines of all blocks in select mode #25133)

Feel free to ask (GitHub or DM) if I can help you in any way to bring things forward!

[mrfoxtalbot]

Important: Implement an intuitive way to re-engage select mode from edit mode (the current esc pattern is not obvious)

At the moment the esc button only works one way. It enables select mode but will not bring you back to edit mode if you click on it a second time.

Toggling between the two modes would be easier if we could just press esc to do so.

[jameskoster]

While a toggle could be a helpful secondary affordance, I wonder if the most intuitive heuristic would be to simply re-engage select mode whenever no block is actively selected.

We may also need to be careful about toggling modes on a single key, as it may be that there are more than two modes in the future. Dedicated shortcuts for each mode might be more scalable.

[jasmussen]

I wonder if the most intuitive heuristic would be to simply re-engage select mode whenever no block is actively selected.

This could work, and it would allow us to let an additional Escape deselect all blocks something that in many apps is tied to that key already.

[mtias]

Is this issue still useful for tracking improvements?

[jameskoster]

Probably not. Many things have changed since this issue was opened, which brings a few of the items into question.