List View: Tweaks to improve usability, visual feedback, and keyboard behaviour

[andrewserong]

The list view frequently comes up as a feature that folks both love, and also find frustrating or challenging to use. There are already a number of issues that address aspects of the list view's usability. The purpose of this issue is to track some of these issues, and provide a list of related issues that, grouped together, should hopefully help improve the overall usability of the list view.

For prioritised tasks for WordPress 6.6, see #60099

---

Exhaustive list

Outstanding bugs to address

• Gutenberg List View has limits on the length it can display #41613
• Column blocks (e.g. 30) are not displayed correctly in a group block #42031
• List View: Fix performance issue when selecting all blocks #54900
• List View: Stale translate3d styles stick to row items leaving stray borders after dragging blocks #56409
• List View: Dragging a large number of blocks at once throws the windowing logic #56361
• List View: Stale windowing logic when switching between content and template in site editor when no content block is present #56360
• Block Settings Menu: Unintended horizontal scrollbar in FF on Windows 11 #60355

Improving drag-and-drop and related visual issues

• Come up with a solution for the issue where the drop indicator blends in with the color of selected blocks List View: Ensure visibility of drop indicator over selected items #52917
• Explore allowing dragging on a collapsed block to expand it: List view drag and drop: expand collapsed parent blocks when dragging over them #33684
• List View: Make drag chip resemble list item, and displace blocks when dragging #56539
• List View: Unfold whole container on (Right-/Double-) Click or new >> Icon #60242

Improving interactions using the keyboard

• Allow blocks in list view to be deselected by keyboard: List view: Impossible to deselect all blocks using the keyboard #48462
• Allow keyboard shortcut to duplicate blocks to work in the list view
• Allow CMD / CTRL + A to select all blocks
• Allow CMD / CTRL + C to copy blocks
• List View: Explore adding a keyboard shortcut to collapse other list view items #59936
• Allow keyboard shortcuts for inserting a block before or after the currently focused block in the list view
• Allow Page Up / Page Down to select blocks in addition to the existing Home / End support
• When shift-selecting blocks nested within a selected parent block, it should be possible to update the selection (currently no change occurs as the parent block being selected causes all children to be treated as though they're part of the selection)

Visual issues and tasks

• List View: Display image thumbnails #46015
• List view: Add image thumbnails to additional image attribute blocks #53684
• Deeply nested lists are difficult to work with (e.g. List view: Add and handle a max-width for deep nesting cases #44603). One potential solution could be to explore making the list view's width adjustable as described in Make it possible to adjust the width of the List View and/or Block Settings Sidebar #53096. (WIP PR)
• List View: Improve visual feedback on windowing logic (make it smoother) #55114
• List view: empty settings menus for non-editable items instead of a lock icon  #62352

Misc tasks related to usability

• Add right-click handling for exposing the block settings menu: Hijack the browser's right-click contextual menu when right-clicking on any part of the items in the FSE / Gutenberg post's blocks hierarchy list view sidebar #40287 — earlier exploratory PR: List View: Add right-click behaviour to open block settings dropdown, and add right click overrides editor setting #41041 — current WIP PR: List View: Allow right-click to open block settings dropdown, add editor setting #50273

[jameskoster]

When beginning to drag a block, it is immediately hidden from the list view, causing the area to jump. Explore whether greying out the currently dragged blocks would help with interacting with the list view.

I wasn't able to get it working for expanded parents (otherwise I'd open a PR), but I think this would be a win. It makes List View feel much less fragile imo.

drag.mp4

[andrewserong]

but I think this would be a win. It makes List View feel much less fragile imo.

Agreed, thanks for showing the quick demo! I'm happy to have a go at it once a couple of my WIP PRs have advanced a little further 👍

[richtabor]

but I think this would be a win. It makes List View feel much less fragile imo.

I think so too. The only bit I'd consider adapting is the grayed-out not maintain the accent color.