Experiment - try adding a shortcut for hiding the block toolbar and outline #49564
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
talldan
added
[Type] Enhancement
talldan
requested review from
youknowriad,
jameskoster,
jasmussen,
glendaviesnz,
ellatrix,
kevin940726 and
aaronrobertshaw
|
Size Change: +253 B (0%) Total Size: 1.34 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in e243a1a. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4603670141
|
There was a problem hiding this comment.
Nice work @talldan 👍
This would be a very welcome feature for those that encounter the need to hide the floating toolbar often.
I'm not sure if 'alt' is the perfect shortcut, but it's easy to test
This isn't the sort of feature I generally use across other apps so no better alternatives to alt came to mind. I'll defer to others that might have more relevant experience here.
This PR implements a new shortcut I called 'peek'.
The new shortcut generally tests well for me. There were some minor edge cases that felt a little unexpected when I hit them. I'm unsure how or if we'd like to address them.
While holding down alt to hide the toolbar you can still change block selection by clicking with the mouse. So when you release the block toolbar is suddenly not where it was. This was more noticeable as I initially had the block inspector sidebar hidden. If you are deliberately changing block selection it's not an issue, if you did it accidentally it might be disorientating.
My fat fingers on the laptop keyboard led me to another edge case where I went to hold down alt but clipped another key. That accidental touch of the key triggered the key up event meaning continuing to hold alt down wasn't hiding the toolbar. Not a major issue but maybe it could be a problem for users with varied motor skills.
Comment on lines
+101
to
+111
| useShortcut( 'core/edit-site/toggle-block-settings-sidebar', ( event ) => { | ||
| // This shortcut has no known clashes, but use preventDefault to prevent any | ||
| // obscure shortcuts from triggering. | ||
| event.preventDefault(); | ||
|
|
||
| if ( isBlockInspectorOpen ) { | ||
| disableComplementaryArea( STORE_NAME ); | ||
| } else { | ||
| enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK ); | ||
| } | ||
| } ); |
There was a problem hiding this comment.
Looks like this was accidentally copied from above and could be removed?
| } | ||
|
|
||
| function onKeyUp( event ) { | ||
| if ( props.onKeyUp ) props.onKeyUp( event ); |
There was a problem hiding this comment.
Suggested change
| if ( props.onKeyUp ) props.onKeyUp( event ); | |
| props.onKeyUp?.( event ); |
Maybe we could use optional chaining here?
|
This seems quite useful! I'm not sure if it's intentional, but when I toggle peek I cannot see the block outlines when I hover them. If this is to serve as a selection aid should they remain visible? |
|
That sounds very useful! Thanks Dan! |
|
Just connecting a few dots with @glendaviesnz who was exploring a feature to hide all block UI while interacting with items in the inspector, in case there's overlap. I.e. imagine you're dragging a padding slider, while you're doing that it's useful for UI to fade out. |
Thanks, will take a look and see what the overlap is with this. |
|
Was there any outcome from this exploration to summarize? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Helps with #40382, #38409
Related - #46192
What? Why?
A lot of users generally prefer using the floating toolbar, but a long standing issue is that it can get in the way. It can make it harder to select the previous block, and also obscure your view when you're trying to make a design perfect.
This PR implements a new shortcut I called 'peek'. Hold down the 'alt' ('option' on a mac) key to briefly hide the block toolbar, and release again to bring it back.
I'm not sure if 'alt' is the perfect shortcut, but it's easy to test. Does using such an obvious key like this have any implications? While typing, the toolbar is already hidden, so I don't think that's an issue but maybe there are other things I haven't considered.
At the moment I'm looking for feedback on this - is it something that might be useful?
How?
It required some work, but nothing too major:
keyUpevents inuseShortcuthideBlockInterfacealso hide the block outline (this was more difficult than expected!)hideBlockInterfaceaction (theuseVisualizerhook was immediately callingshowBlockInterfacewheneverhideBlockInterfacewas called)Testing Instructions
altoroptionon a macObserve that the block toolbar and outline are hidden
Screenshots or screencast
Here's an example of using the feature to select two adjacent blocks that would otherwise be obscured by the toolbar:
Kapture.2023-04-04.at.11.25.14.mp4