Hi there! 👋

Hope you all are doing well! I'm submitting a feature request for a new component (ContextPopover) to help simplify and improve the experience with Block (inspector) controls that appear in the sidebar.

Overflow

(Above: Screenshot of Paragraph blocks color settings)

Certain block settings may render a lot of control UI. These controls often grow over time, whether it's from core enhancements or from theme settings (e.g. color palette).

Controlling Overflow

(Above: Screenshot of color settings simplified with ContextPopover)

My idea is to hide some of that visual complexity in a popover/modal like experience with a new <ContextPopover /> component.

When collapsed, it only shows the most important information. In the above example, a preview of the color value and the attribute it is assigned to.

If we need to modify one of the values, the item can be clicked, which renders a Popover card positioned relatively to the original item. Other things in the sidebar fade away into the background. This brings focus to the settings we're currently editing.

Here is an initial comparison between the current sidebar controls, and one simplified with ContextPopover:

In practice, it may look and feel something like this:

(Above: GIF demoing the interaction experience of ContextPopover)

Screencast Demo/Walkthrough

I recorded a quick screencast sharing my thoughts:

https://www.loom.com/share/68b587b57bc64c2f8b06ad6dc61691c9

Implementation + A11Y

I suggest we leverage Popover from Reakit (shoutouts to @diegohaz ) to a lot of the heavy lifting in regards to interaction and a11y. From a UI perspective, we have some pieces already, such as a <Card /> component from @wordpress/components.

We'll need to work out a nice component API that can seamlessly manage the "Trigger" (the element the user clicks) and the Content (the stuff that renders within the popover).

Feedback

I'd love to hear your thoughts! ❤️

Thank you!!