-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Multi select on shift+click #1965
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
One UX change to confirm is: When no blocks are selected, and I shift-click a block, nothing happens. Previous to these changes, the text in the block would still highlight (using default browser behavior, I assume).
Also generally don't feel that this addresses usability flows noted in #179. I can describe more there, but I expect to be able to extend partial selection between paragraphs and either backspace to collapse or start typing to replace. Multi-select doesn't allow for this, really only entire delete and rearrangement.
32ccbf8
to
7f96c8c
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This tests well for me, and the logic is clear. Nice. :)
@@ -213,6 +227,7 @@ class VisualEditorBlockList extends Component { | |||
uid={ uid } | |||
blockRef={ ( ref ) => this.setBlockRef( ref, uid ) } | |||
onSelectionStart={ () => this.onSelectionStart( uid ) } | |||
onSelectionExtension={ () => this.onSelectionExtension( uid ) } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's beside the object of this PR, but I'll share the note: we probably shouldn't be binding (and re-binding) these methods before passing them to VisualEditorBlock
instances — they're all grown up and can do that themselves in the constructor, or just pass their uid
explicitly. :)
editor/modes/visual-editor/block.js
Outdated
this.props.onSelect(); | ||
if ( event.shiftKey ) { | ||
if ( ! this.props.isSelected ) { | ||
this.props.onSelectionExtension(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would be nice to have a more descriptive name for onSelectionExtension
, but I don't know what that could be. :) I know they are controversial, but I like maybe
-prefixed names, like maybeMultiSelect
, but that clashes with the on
- framing. onShiftSelection
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hm, maybe
seems strange because something always happens. I don't mind onShiftSelection
.
7f96c8c
to
e2a6fa2
Compare
Codecov Report
@@ Coverage Diff @@
## master #1965 +/- ##
==========================================
+ Coverage 33.4% 33.85% +0.45%
==========================================
Files 197 197
Lines 5778 6037 +259
Branches 1023 1098 +75
==========================================
+ Hits 1930 2044 +114
- Misses 3247 3348 +101
- Partials 601 645 +44
Continue to review full report at Codecov.
|
That was fast, thanks for implementing this one 😄 Edit: I see now, it was opened for weeks :) |
Not to be confused with shift+arrow keys, which will be addressed in a different PR.
With this PR you can multi-select block by pressing shift and then clicking. At the moment you can only select by clicking and dragging while holding the click. See #2990.
To test: