Widgets editor refinement

[noisysocks]

Follows #24687. This is an overview of smaller Widgets editor enhancements to look into after WordPress 5.8.

Smooth out rough edges in the UX

• Better support for implementing a traditional Title + Widget layout (Context) (Potentially solved by Block Patterns)
• Add block patterns to the Widgets editors #26170
• Add the persistent List View to the Widgets screen #32311
• Display wide widgets as modals in Customizer #32210
• Enable Site, Post, Query, Navigation, and Reusable Blocks in the Widgets Editor #32952
• Expand/collapse widget areas based on whether they have content #32278
• Try stickier block toolbars in Customize Widgets #32490
• Add Preferences modal to the Widgets screen #32711
• Resolve background styling issue with legacy widgets in Customizer #33264
• 'Browse All' button in Social Icons Block in Widget Editor does not display social icons #33372
• Legacy widget: reorder the widgets alphabetically #35328

Improve performance and stability

• Improve page load time and keypress responsiveness in both screens
• Ensure both screens have comprehensive E2E tests
• Refactor Widgets editor to use entities. Each widget area should be an EntityProvider. The sidebar entity should have a .blocks attribute (Context)
• Deprecate old single (non-multi) widgets
• Investigate alternatives to using an iframe in Legacy Widget block
• Investigate using shadow DOM to harden Legacy Widget block against CSS bleed issues
• Widget area discussion - should widget areas be blocks? #33254
• Block moves to "Inactive widgets" after saving #33335

Improve extensibility

• Allow themes to remove <div class="widget"> container markup around blocks (Context)
• Provide an API to prevent certain blocks being shown in Widget Areas #28517
• Widgets screen: getBlocks() doesn't return innerBlocks #32607
• Add a filter to replace the welcome modal in the Widgets editor #33194
• Provide an API to conditionally style the Legacy Widget preview iframe #32805
• HTML tags in the description of the widget area are escaped #33106
• Improve widgets documentation #33584
• Provide the widget preview iframe with a sidebar ID #33638

[talldan]

I've made an issue about widget areas, which might be worth adding - #33254

[critterverse]

The list of UX enhancements looks really good to me! A few notes:

After giving some thought to the first item (issues with trying to achieve a traditional title + widget layout), I think that ideally this could be combined with the second item (issue #26170). Introducing patterns into the widget editors would be a great addition to the user experience overall, and would help smooth out some of the hiccups with trying to create a traditional widget layout.

Customizer Widgets top chrome: scroll away and return on reverse scroll #32061
We’ve run into a lot of complications while previously exploring this one, so I would lean towards a more straightforward solution like the one that was landed on in #32490

Highlight the whole Widget Area when it is selected #26465
Agree with this comment — I don’t think this is needed.

Resolve background styling issue with legacy widgets in Customizer — opened a new issue in #33264
It would be great if we could remove the theme background color that appears only on legacy widgets. There has been some discussion about this previously but I opened a new issue to see if we can continue to explore solutions!

[noisysocks]

Thanks @critterverse! I updated the list with your suggestions.

[critterverse]

Opened another List view issue in addition to #32311 for the Customizer screen: Add List View in the Customizer Widgets screen #33716