Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make it easier to unselect blocks #36535

Closed
3 tasks done
kellychoffman opened this issue Nov 16, 2021 · 14 comments · Fixed by #36945
Closed
3 tasks done

Make it easier to unselect blocks #36535

kellychoffman opened this issue Nov 16, 2021 · 14 comments · Fixed by #36945
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... Needs Dev Ready for, and needs developer efforts

Comments

@kellychoffman
Copy link
Contributor

kellychoffman commented Nov 16, 2021

Make it easier to unselect blocks.

@kellychoffman kellychoffman added the Needs Design Needs design efforts. label Nov 16, 2021
@jasmussen
Copy link
Contributor

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
Copy link
Contributor

shaunandrews commented Nov 16, 2021

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:

image

@talldan
Copy link
Contributor

talldan commented Nov 17, 2021

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
Copy link
Member

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Member

What action is required here?

@jasmussen
Copy link
Contributor

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.

@noisysocks noisysocks added [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") and removed Needs Design Needs design efforts. [Status] In Progress Tracking issues with work in progress labels Dec 1, 2021
@mtias
Copy link
Member

mtias commented Dec 3, 2021

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

@annezazu
Copy link
Contributor

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
Copy link
Contributor

jasmussen commented Jan 16, 2023

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

@ellatrix ellatrix added the [Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... label Aug 16, 2023
@jordesign
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... Needs Dev Ready for, and needs developer efforts
Projects
None yet
Development

Successfully merging a pull request may close this issue.