Components: add sortable, multi-selectable list

[ciampo]

As discussed in https://github.com/WordPress/gutenberg/pull/64686#pullrequestreview-2340841771, we'd like to add a new component to the @wordpress/components package to render a "sortable, multi-selectable list".

So far

https://github.com/WordPress/gutenberg/pull/64686 showcases the first need for such a component, although we should consider visual and API design first before getting to build it.

In terms of visual design, this is what exists in #64686 👍

And in technical terms we'd likely want to

use Composite for the listbox and arrow key navigation. The other interactions will likely need to be custom.

This may be a chance to consider abstracting some of the listbox work into its own separate component (see https://github.com/WordPress/gutenberg/issues/65801).

Next steps

At a very high level

• [ ] Agree on design and UX (cc @WordPress/gutenberg-design )
• [ ] Agree on functionality and API design (cc @WordPress/gutenberg-components )
• [ ] Implement the component as private, iterate until we feel good to stabilize it

cc @swissspidy

[jameskoster]

Could this be a use case for ItemGroup?

Here's a rough mockup based on the designs in https://github.com/WordPress/gutenberg/issues/64445:

[ciampo]

@swissspidy what do you think?

I will note that, in any case, this would be:

• ItemGroup for the sorting
• combobox for the "search + select a language from a list" part

For the combobox part, we'd need to establish if the current ComboboxControl component checks all requirements. If it doesn't, we could go with a custom Ariakit implementation and then replace it with ComboboxControlV2 when ready?

[swissspidy]

Interesting, thanks for sharing!

It's quite the deviation from the current battle-tested solution, which is based on the listbox pattern. At first glance it seems to cover the functionality for mouse users, but it misses things like a visual indication of the currently selected element, so that you can easily move and remove items using keyboard shortcuts. But I'll have to defer a detailed analysis to the accessibility team :)

Design-wise we'd have to see how well it could be integrated into the wp-admin/options-general.php page

[jameskoster]

but it misses things like a visual indication of the currently selected element, so that you can easily move and remove items using keyboard shortcuts

In terms of keyboard navigation I would expect something similar to the List layout in Data Views:

https://github.com/user-attachments/assets/2337c5ac-81db-404e-b434-792019409d3e

I suggest this design mainly because compared to the version in wp-admin it has a lot of potential for reuse, particularly in the editor where similar ad hoc creations exist already (see custom shadow style creation).

[mtias]

I like the idea of itemgroup being a good candidate for systematizing these views. I believe I saw a few similar cases on Woo and other plugin options where a short list of items with built in drag and drop / reorder would be a solid addition. Folks were lookign at data views for it, but that seems way overboard for these simpler use cases that don't need flexible columns, data type, and various sorting options.

[jasmussen]

Related to the ItemGroup, there are some mockups later in the thread based on this exact conversation.