Widgets editor refinement

[noisysocks]

Follows https://github.com/WordPress/gutenberg/issues/24687. This is an overview of smaller Widgets editor enhancements to look into after WordPress 5.8.

Smooth out rough edges in the UX

• [x] Better support for implementing a traditional Title + Widget layout (Context) (Potentially solved by Block Patterns)
• [ ] https://github.com/WordPress/gutenberg/issues/26170
• [x] https://github.com/WordPress/gutenberg/issues/32311
• [ ] https://github.com/WordPress/gutenberg/issues/32210
• [ ] https://github.com/WordPress/gutenberg/issues/32952
• [ ] https://github.com/WordPress/gutenberg/issues/32278
• [ ] https://github.com/WordPress/gutenberg/pull/32490
• [ ] https://github.com/WordPress/gutenberg/issues/32711
• [ ] https://github.com/WordPress/gutenberg/issues/33264
• [x] https://github.com/WordPress/gutenberg/issues/33372
• [ ] https://github.com/WordPress/gutenberg/issues/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
• [ ] https://github.com/WordPress/gutenberg/issues/33254
• [x] https://github.com/WordPress/gutenberg/issues/33335

Improve extensibility

• [ ] Allow themes to remove <div class="widget"> container markup around blocks (Context)
• [x] https://github.com/WordPress/gutenberg/issues/28517
• [x] https://github.com/WordPress/gutenberg/issues/32607
• [ ] https://github.com/WordPress/gutenberg/issues/33194
• [ ] https://github.com/WordPress/gutenberg/issues/32805
• [x] https://github.com/WordPress/gutenberg/issues/33106
• [ ] https://github.com/WordPress/gutenberg/issues/33584
• [ ] https://github.com/WordPress/gutenberg/issues/33638

[talldan]

I've made an issue about widget areas, which might be worth adding - https://github.com/WordPress/gutenberg/issues/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 https://github.com/WordPress/gutenberg/pull/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 https://github.com/WordPress/gutenberg/issues/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 https://github.com/WordPress/gutenberg/issues/32311 for the Customizer screen: Add List View in the Customizer Widgets screen #33716