List View: visual feedback and keyboard behaviour tasks for WordPress 6.6

[andrewserong]

Part of #49563, this issue highlights tasks that can be prioritised for inclusion in WordPress 6.6. It is intentionally not exhaustive. For any additions or nice-to-haves, #49563 is a good tracking issue to use 🙂

The List View referred to in this issue is in the left-hand sidebar (the one that is a list of all the blocks in the current document).

Prioritised List View tasks for WordPress 6.6

• List View: Explore adding a keyboard shortcut to collapse other list view items #59936
• Allow Page Up / Page Down to select blocks in addition to the existing Home / End support
• Allow keyboard shortcuts for inserting a block before or after the currently focused block in the list view
• Block Settings Menu: Unintended horizontal scrollbar in FF on Windows 11 #60355

Nice-to-haves

• List View: Unfold whole container on (Right-/Double-) Click or new >> Icon #60242
• List View: Make drag chip resemble list item, and displace blocks when dragging #56539

Deprioritised

Deprioritised issues are ones the were originally slated for 6.6 but have been punted from the release:

• Make it possible to adjust the width of the List View and/or Block Settings Sidebar #53096 (this is no longer a necessary feature thanks to the increased information density introduced in Update list view spacing #60713)

Pull requests

• List View: Add keyboard shortcut to collapse list view items other than the focused item #59978
• List View: Support insert before/after keyboard shortcuts when focus is within the list view #60651
• Update list view spacing #60713
• Block editor: add a keyboard shortcut to create group from the selected blocks #46972

[Marc-pi]

@andrewserong seems i've to put this there, since it's related
we also have a not very nice visually experience with the dotted menu in list view, when clicking on child elements that have themsleves child elements (columns, buttons, etc.)

the issue : since we have plenty of space, the horizontal scroll should not occur.

ex1 : within a group, i've a buttons block, i click on the options (either through the ellipsis 3 dots, or by right click)
ex2 : within a group, i've a columns block

context :

• screensize 15'
• when editing a page/article
• i dot not face this in the template editing as long as i tested

NB : seems ok with the Query Loop

[andrewserong]

Thanks for reporting @Marc-pi! Which operating system and browser are you using? On a Mac running Google Chrome with scrollbars set to display, I see a vertical scrollbar on the block settings menu, but no horizontal one. Ideally if a vertical scrollbar is needed, we wouldn't be displaying that horizontal one, so I'm wondering if there's something that's specific to the browser that's causing them to be displayed? If so, I'm wondering if there are any styling adjustments we can make so that only the vertical one is shown 🤔

[Marc-pi]

@andrewserong hello
you are right, i'm on FF / MS Windows
it is ok in Chrome, so the culprit is the way Firefox manages this
thx for the upcoming fix

[andrewserong]

Just a tiny update: I can reproduce that issue with the horizontal scrollbars in FF on Windows 11. I've opened a separate issue for that over in #60355 so we can track it separately. I've linked it in the prioritised tasks of this tracking issue.

[andrewserong]

Quick update: it turns out I'll have less bandwidth for contributing to this tracking issue for 6.6 than I originally anticipated. As it stands, I believe we'll likely get in all (or most) of the intended keyboard shortcuts improvements for 6.6. Also, the information density / spacing has been tightened for the list view in #60713 which results in a much more usable space for navigating deeply nested lists, with the horizontal scrollbar now seldom appearing. This means that the issue #53096 (make it possible to adjust the width of the list view) is likely no longer necessary.

So, what all this means is that the main "might not make it" feature in 6.6 is the continuing improvement of displacement in the list view by exploring a drag chip that resembles the list view item (#56539). As such, I have moved this to the "nice to have" section in the issue description.

CC: @annezazu for visibility on 6.6 intended features.

[fabiankaegy]

Hi all 👋

Reminder: The release candidate for Gutenberg Version 18.5 is scheduled for next Friday (May 31st). So anything that is supposed to make it into WordPress 6.6 must be merged by then.

Please raise any important issues that need additional attention :)

[andrewserong]

I'll close this issue out now as there were no additional PRs to make it in time for 6.6 Beta 1. I've copied those issues not addressed from this tracking issue over into the long-term issue in #49563 so that they're captured for future releases. The update from May 1 (and list of merged PRs in the issue description) still represent what made it in for 6.6. In brief:

• Keyboard shortcuts to insert before and after the current item (CMD+Option+T and CMD+Option+Y)
• Keyboard shortcut to collapse items other than the focused one (Option+L)
• Keyboard shortcut to group the current selection (CMD+G)
• Tightened spacing visually, so that users very rarely need to scroll the list view horizontally