Feat : double-click to open/close block in List View

[nirav7707]

What?

resolve #64625

Why?

To enhance accessibility

How?

Registering the doubleClick event listener to ListViewBlock component

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: nirav7707 <[email protected]>
Co-authored-by: andrewserong <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: richtabor <[email protected]>
Co-authored-by: paaljoachim <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: Drivingralle <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[andrewserong]

Thanks for putting up a PR @nirav7707! For folks who might not be familiar with the feature it can be helpful to add some testing instructions or a screengrab to the PR description to help anyone looking at the PR to know what to look for or test. Even a simple PR can sometimes be a bit tricky to review given the complexity of Gutenberg.

In practice this is testing well for me in the editor, here's a quick video:

2024-08-22.09.58.17.mp4

I've added the "Needs Design Feedback" label as it'd be good to get feedback from designers on the desired behaviour of double clicking a list view item. I remember a while back there was some discussion surrounding using a double click to trigger renaming a block, and once we pick a particular behaviour for double click, it might be hard to change it after the fact as folks will have come to expect whichever direction we go with.

One other thing to consider is that when you first click a block in the list view, it will select the block and redirect focus to the editor canvas. Clicking the block again will then shift focus to the list view. However, with double click behaviour added, it's possible that sometimes folks might be attempting to direct focus to the list view and could (potentially) find it unexpected if a list item is expanded or collapsed?

That might not be an issues at all in practice, though, just a thought.

Let's see what some designers think!

[jasmussen]

Thanks for the PR! I could go either way on this one. My only reservation is that once we apply double-click to open/close, we won't be able to apply doubleclick for anything else, such as scroll to the block in question or even open the rename block modal. If we're sure open/close is the best use of this gesture, can work.

[jameskoster]

Personally I would expect a double-click to invoke renaming.

[t-hamano]

This is just one idea, but considering that double-clicking might be used for other functions such as renaming in the future, what do you think about the approach of "expanding if the selected block is single-clicked"?

diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
index f4dcf8caef..ea047ba308 100644
--- a/packages/block-editor/src/components/list-view/block.js
+++ b/packages/block-editor/src/components/list-view/block.js
@@ -546,7 +546,13 @@ function ListViewBlock( {
                                        <div className="block-editor-list-view-block__contents-container">
                                                <ListViewBlockContents
                                                        block={ block }
-                                                       onClick={ selectEditorBlock }
+                                                       onClick={ ( event ) => {
+                                                               if ( isSelected ) {
+                                                                       toggleExpanded( event );
+                                                               } else {
+                                                                       selectEditorBlock( event );
+                                                               }
+                                                       } }
                                                        onContextMenu={ onContextMenu }

a694f85e8abae2a4e554f6847280b889.mp4

[jasmussen]

what do you think about the approach of "expanding if the selected block is single-clicked"?

That could potentially interfere with multiselecting. I.e. maybe you'll select a group, hold shift, and then select another block farther down the list.

[nirav7707]

That could potentially interfere with multiselecting. I.e. maybe you'll select a group, hold shift, and then select another block farther down the list.

@jasmussen Right, it's prevent deselection of block once we have selected multiple blocks by holding shift. we have to click somewhere inside the block previewer.

multiselect.mov

[nirav7707]

By adding bool variable isMultipleBlocksSelected we can prevent the conflict with multiselection issue

	const selectedBlockCount = useSelect((select) => {
		const { getSelectedBlockClientIds } = select(blockEditorStore);
		return getSelectedBlockClientIds().length;
		}, []);
	
	const isMultipleBlocksSelected = selectedBlockCount > 1;

<ListViewBlockContents
	block={ block }
	onClick={ ( event ) => {
			if ( isSelected && ! isMultipleBlocksSelected ) {
					toggleExpanded( event );
			} else {
					selectEditorBlock( event );
			}
	} }
	onContextMenu={ onContextMenu }

Screen.Recording.2024-08-22.at.3.58.57.PM.mov

[richtabor]

but considering that double-clicking might be used for other functions such as renaming in the future

I'd rather double-click to rename, as that's a much more difficult task to complete than to open/close a block. Does this effort block that potential in the future?

[t-hamano]

By the way, I think there are three actions to rename a directory in Mac OS, Am I right?

• Select a directory and hit Enter
• Select a directory and open the context menu
• (Models with pressure-sensitive trackpads only) Click with force

In Windows OS, there are three actions for renaming:

• Select a directory and press F2 key
• Select a directory and single-click on it with the mouse
• Select a directory and open the context menu

The reason I want to confirm this is because adding a shortcut for renaming is requested in #62152, and if we can implement a shortcut for renaming, we might be able to proceed with this PR.

[richtabor]

By the way, I think there are three actions to rename a directory in Mac OS, Am I right?

You can also double-click.

[paaljoachim]

I have myself gone a bit forth and back on this feature.
Should double clicking open or rename.....?
Because of the uncertainty around this feature I would likely hold off on this.
As I do believe additional features will be added to List view that might also impact renaming and opening of inner blocks.

It would likely be useful to check into other software that would do something similar and compare. (Besides OSX that is.)

[t-hamano]

Should double clicking open or rename.....?
It would likely be useful to check into other software that would do something similar and compare. (Besides OSX that is.)

It might be good to research and discuss this point first.

I believe the unintended behavior when multiple blocks are selected can be addressed by checking whether a modifier key is pressed, or by checking the value of isMultiBlocksSelected.