Add List View in the Customizer Widgets screen

[critterverse]

Complimenting issue to #32311

List view is such a huge usability improvement in the block editor — it would be great to add this feature to the Customizer Widgets screen. Ideally, we could add a "persistent" List view like the latest in the post editor but it will need some design exploration to see what can work best with the limited space available.

[critterverse]

Here’s a preliminary pass at how persistent List View might work in the Customizer. Since space is limited, I wonder if the sidebar area could be segmented vertically, with the top section featuring the List View and the bottom section containing the editor.

Note that in order to accommodate the List View icon, the editor top bar has been reorganized to be more similar to the way the top bar appears in other editors, with the inserter icon all the way to the left. See also: #34398 (comment)

List View would be an especially great usability improvement if it could allow users to move widgets between Widget Areas more easily with drag and drop. While not currently possible, it would be nice if the user could drag a block into a collapsed section (e.g. another Widget Area):

switch-widget-areas.mov

[draganescu]

My fear is that in situations with tens of widgets the experience could be a lot different compared to the mockup (scroll, scroll, scroll).

[critterverse]

Good point @draganescu! Here's another variation that treats the List view as a drawer that slides out from the left like the Inserter. This version feels a bit more aligned with how the List view / Inserter work in the post editor (i.e. sharing the same sidebar area):

We could update the "Add a block" text shown at the top of the inserter to match the type size of the "List view" label as shown above.

[noisysocks]

Noting for future devs that #34398, #33716, and #34087 could be good to tackle together as they all involve reconfiguring the toolbar.