Make it easier to unselect blocks

[kellychoffman]

Make it easier to unselect blocks.

• Pressing escape in Select mode unselects blocks (Writing Flow: Double escape unselects all blocks #36945)
• Clicking on anything that is not a block or UI element unselects blocks
• Consider adding the frame from template part focus mode (Site Editor: Add the dark frame #36995)

[jasmussen]

Clicking the top-level breadcrumb deselects. Two other ideas for improvement:

1. Address Clicking below bottom text block does not defocus it, which can be confusing #5803 and let clicking below the blocks deselect, instead of create a new paragraph block. Could potentially be easy as it mostly disables code that intercepts it. Downside, it's mainly benefitting the post editor.
2. Escape enters select mode. We could make it so pressing Escape again deselects all blocks.

[shaunandrews]

Escape enters select mode.

I suggest we rethink this shortcut; It doesn't really work when you have nested blocks, as you can't go into or out-of a container block. To me, it makes much more sense for esc to deselect all blocks, and to find a different shortcut for (and generally improve) Select mode.

Outside of that, I also think that if you click anywhere that isn't a block or a UI element that it should deselect all blocks. For example, if I click on the blank space (highlighted in yellow) in the top bar I expect that it would unselect all blocks:

[talldan]

I suggest we rethink this shortcut; It doesn't really work when you have nested blocks, as you can't go into or out-of a container block. To me, it makes much more sense for esc to deselect all blocks, and to find a different shortcut for (and generally improve) Select mode.

It does work using arrow keys. I think the click-through overlay that template parts have is interfering with being able to select children. Maybe that shouldn't be active in select mode.

I understand the point though, escape does feel a lot more natural as a key for deselecting things, and I hear that a lot more computers have escape keys these days 😄

[noisysocks]

Escape enters select mode. We could make it so pressing Escape again deselects all blocks.

I'm very fond of how Craft handles this. If you're typing, Esc enters select mode. If you're in select mode, Esc deselects all blocks.

Kapture.2021-11-17.at.15.52.57.mp4

When you combine this with Enter to edit a block and Shift+Space for Insert Before and Space for Insert After it's all quite powerful.

Kapture.2021-11-17.at.15.55.25.mp4

Outside of that, I also think that if you click anywhere that isn't a block or a UI element that it should deselect all blocks. For example, if I click on the blank space (highlighted in yellow) in the top bar I expect that it would unselect all blocks:

Agree. This trips me up a lot. It should work when you click on whitespace in the sidebar, too.

[jameskoster]

While keyboard shortcuts can help make it easier to deselect blocks, they are not very discoverable. I'm not convinced that folks should be forced to rely on this, shouldn't there should be a more ergonomic mechanic?

It many software deselection is facilitated by clicking empty space. The problem in the Site Editor of course is that blocks at the root level generally span the full width of the layout meaning there is no empty space to click.

We circumvented this in template part focus mode by making clicks in the dark grey area deselect blocks which (imo) feels natural:

deselect.mp4

Perhaps there's a case to be made for introducing this frame to the site editor as well?

[shaunandrews]

I think the click-through overlay that template parts have is interfering with being able to select children. Maybe that shouldn't be active in select mode.

Ah, maybe that's a bug then, because in the site editor select mode with arrows feels broken.

I'm very fond of how Craft handles this.

We can definitely learn a lot from Craft. The way it handles edit/select modes is intuitive and also more abstract from a UI perspective; There are no buttons or anything for triggering modes, just a natural feeling combination of key commands.

It should work when you click on whitespace in the sidebar, too.

I considered it at first, but I don't think its a good idea for the whitespace in the sidebar to unselect a block. It would likely be too easy to unselect a block while you're actively editing it's settings in the sidebar.

Perhaps there's a case to be made for introducing this frame to the site editor as well?

I believe the frame really only makes sense at larger viewport sizes; If we do add the frame we should be sure its not the only way to unselect all blocks. I don't think the frame makes much sense in the context of the post editor.

--

As I see it, next steps here are to open PR's that do the following:

• Unselect all blocks when clicking whitespace in the top bar.
• Add the frame around the canvas in the site editor.
• Map esc to unselecting blocks in select mode.
• Map esc to unselecting blocks in edit mode, and map a new key to select mode.

Then from those PR's we can see what works and what doesn't.

[jasmussen]

Good list, Shaun.

Map esc to unselecting blocks in edit mode, and map a new key to select mode.

If Escape deselects blocks, we can use any key without modifiers, such as v which in many apps is used for the Arrow/select tool.

That said, this could be a big change, and so if we need an interim step, we could just start with just this one:

Map esc to unselecting blocks in select mode.

With this in, you'd press Esc Esc (twice) to deselect.

[jameskoster]

I don't think the frame makes much sense in the context of the post editor.

Agreed. It's worth noting that this issue is much less prevalent in that context as there is generally plenty of empty space to click:

deselect.mp4

[noisysocks]

What action is required here?

[jasmussen]

Seems like the remaining piece is being able to click empty spots, for example in the header, to deselect blocks, a la Shaun outlined here.

[mtias]

@noisysocks I don't think what is pending is a must-have for 5.9, feel free to punt

[annezazu]

Looping back here as it wasn't clear where we left off. Using GB 14.4 on 6.0.3 shows the following:

• Unselect all blocks when clicking whitespace in the top bar.
• Add the frame around the canvas in the site editor > I don't see this happening based on current designs
• Map esc to unselecting blocks in select mode > this seems to work.
• Map esc to unselecting blocks in edit mode, and map a new key to select mode

Here's a quick video of mapping escape to select mode in case I'm misunderstanding:

escape.in.select.mode.mov

[jasmussen]

Created #47172 which would also affect this issue: press Escape twice to deselect and remain in edit mode.

[jordesign]

All these cases are now resolved in my testing - so will mark this issue as closed.