Skip to content

List View: Add multi-select behaviour for blocks when shift key is selected #38314

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.

Sign up for GitHub

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

Merged
andrewserong merged 24 commits into from
Feb 18, 2022
Merged

List View: Add multi-select behaviour for blocks when shift key is selected #38314

Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
8749179
List View: Add multi-select behaviour when shift key is selected
andrewserong Jan 28, 2022
4e75817
Ensure shift clicking a block when no blocks are selected selects tha…
andrewserong Jan 31, 2022
cfba501
Add support for dragging multiple selected blocks
andrewserong Jan 31, 2022
51376c5
Remove duplication by moving multi-select behaviour to the ListView c…
andrewserong Feb 1, 2022
d2fd70d
Add inline comments
andrewserong Feb 1, 2022
b6bb2db
Update documentation, add changelog entry
andrewserong Feb 1, 2022
06c731c
Add e2e test for multi-select in the list view
andrewserong Feb 2, 2022
edcff8b
Remove stray line from changelog
andrewserong Feb 2, 2022
1362dba
Ensure that clicked on blocks that aren't a part of a selection can s…
andrewserong Feb 3, 2022
74602ca
Try a naive approach to keyboard handling for shift + up/down to sele…
andrewserong Feb 3, 2022
62f32e4
Move block selection to its own useBlockSelection hook
andrewserong Feb 7, 2022
8fbb905
Refactor start and end id calculation to its own function, add unit t…
andrewserong Feb 7, 2022
999568e
Move utility function to utils file, add doc comment, update usage
andrewserong Feb 8, 2022
d884e0e
Update multiSelect behavior to support keeping focus within the ListV…
andrewserong Feb 11, 2022
27d63bc
Update unit tests, add additional e2e test for keyboard behaviour
andrewserong Feb 11, 2022
c5853bc
Revert change to focus for when shift key is not held
andrewserong Feb 11, 2022
6cb4fb3
Defer calculation of the next/prev clientId to the TreeGrid component…
andrewserong Feb 14, 2022
38b0e5b
Update initialPosition param to be experimental
andrewserong Feb 15, 2022
025087f
Update TreeGrid readme with documentation for the three callback func…
andrewserong Feb 15, 2022
c3b6a1e
Add changelog entry
andrewserong Feb 15, 2022
b321851
Pass in selectedClientIds to dropdown
andrewserong Feb 16, 2022
db31ffd
Prevent shift+click on expand toggle from opening a new window
andrewserong Feb 16, 2022
4f0e0bb
Try announcing deselected blocks
andrewserong Feb 16, 2022
5511896
Rename onChangeRow to onFocusRow, update changelog entry
andrewserong Feb 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Try announcing deselected blocks
  • Loading branch information
@andrewserong
andrewserong committed Feb 16, 2022
commit 4f0e0bb25692cf11f85952b722481d885fb1f8d2
47 changes: 46 additions & 1 deletion packages/block-editor/src/components/list-view/use-block-selection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,17 @@
/**
* External dependencies
*/
import { difference } from 'lodash';

/**
* WordPress dependencies
*/
import { speak } from '@wordpress/a11y';
import { __, sprintf } from '@wordpress/i18n';
import { useDispatch, useSelect } from '@wordpress/data';
import { useCallback } from '@wordpress/element';
import { UP, DOWN } from '@wordpress/keycodes';
import { store as blocksStore } from '@wordpress/blocks';

/**
* Internal dependencies
Expand All @@ -16,6 +24,7 @@ export default function useBlockSelection() {
blockEditorStore
);
const {
getBlockName,
getBlockParents,
getBlockSelectionStart,
getBlockSelectionEnd,
Expand All @@ -24,6 +33,8 @@ export default function useBlockSelection() {
hasSelectedBlock,
} = useSelect( blockEditorStore );

const { getBlockType } = useSelect( blocksStore );

const updateBlockSelection = useCallback(
async ( event, clientId, destinationClientId ) => {
if ( ! event?.shiftKey ) {
Expand Down Expand Up @@ -97,10 +108,44 @@ export default function useBlockSelection() {
startParents,
endParents
);
multiSelect( start, end, null );
await multiSelect( start, end, null );

// Announce deselected block, or number of deselected blocks if
// the total number of blocks deselected is greater than one.
const updatedSelectedBlocks = getSelectedBlockClientIds();

const selectionDiff = difference(
selectedBlocks,
updatedSelectedBlocks
);

let label;
if ( selectionDiff.length === 1 ) {
const title = getBlockType( getBlockName( selectionDiff[ 0 ] ) )
?.title;
if ( title ) {
label = sprintf(
/* translators: %s: block name */
__( '%s deselected.' ),
title
);
}
} else if ( selectionDiff.length > 1 ) {
label = sprintf(
/* translators: %s: number of deselected blocks */
__( '%s blocks deselected.' ),
selectionDiff.length
);
}

if ( label ) {
speak( label );
Copy link
Copy Markdown
Contributor

@talldan talldan Feb 17, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This message works pretty well in testing.

In terms of code, it could be an option to try moving this announcement to the multiSelect action which already has a call to speak.

It should hopefully be possible to combine it with the existing message. Something like '2 blocks selected (Paragraph deselected)'. I'll defer to Alex's call on what the best text would be.

I think it'd be ok to try this out in a separate PR.

Copy link
Copy Markdown
Contributor Author

@andrewserong andrewserong Feb 17, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for confirming, Dan! I agree, this PR has already gotten fairly big, so it'd probably be a good thing to explore separately as a follow-up.

}
},
[
clearSelectedBlock,
getBlockName,
getBlockType,
getBlockParents,
getBlockSelectionStart,
getBlockSelectionEnd,
Expand Down