Gutenberg: ContextPopover: Component to manage controls within Sidebar

[ItsJonQ]

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!!

[MichaelArestad]

I love the idea of focusing the controls so I only have to see the controls relevant to what I'm trying to change. That will be a big win.

One added benefit is that it greatly reduces the complexity in the block sidebar -- perhaps so much that we could remove the need for most of the accordions. It can be tedious to constantly open and close the accordions.

As for the design, I think it would be good to try a few iterations.

On these items:

I wonder if it would be good to make the colors/gradients circles, images as a cropped rectangle, and maybe even a text preview somehow (particularly useful when we get into typefaces). Those are likely separate issues, but definitely worth exploring.

Looking at the modal:

I wonder if styles similar to the inserter (heavier borders) could help. And maybe make it edge to edge over the sidebar?

[ItsJonQ]

I wonder if it would be good to make the colors/gradients circles, images as a cropped rectangle, and maybe even a text preview somehow (particularly useful when we get into typefaces). Those are likely separate issues, but definitely worth exploring.

I didn't change any other design 😊 . I left the current Color components alone.

I had a brief chat with @levinmedia and Figma was brought up.
Another way to render the Popover may be similar to how Figma handles it:

Where it's rendered off to one side. There's some benefits to this.
The biggest benefit is that the Popover's width isn't limited to the Sidebar.

It looks like Figma takes it one step further... allowing you to drag the Modal/Popover

😊

[shaunandrews]

Another way to render the Popover may be similar to how Figma handles it:

This is exactly what I was going to suggest. It feels like similar to the way block previews work in the sidebar Inserter.

[ItsJonQ]

@shaunandrews Yiiisss!! I feel like we're onto something :D

[MichaelArestad]

That's a great idea. Would love that.

[ItsJonQ]

How's this :D

I had to change how the Custom color interaction works. Showing it as a collapsible disclosure underneath (rather than another popover).

The popover body should be scrollable if overflow happens:

[ItsJonQ]

I've created a deploy preview for my experiments!

https://itsjonq.xyz/iframe.html?id=components-contextpopover--default

Have a play ✌️

[ItsJonQ]

Haiii! I haven't forgotten about this.

I attempted to code this today. Unfortunately, I ran into some limitations with our current Popover component.
https://github.com/WordPress/gutenberg/issues/21275#issuecomment-664511197

In my prototypes, I used Reakit/Popover (a brilliant piece of code) to handle the rendering and positioning.

If we want to move forward, we'd have to either...

• Refactor Popover to support more rendering options (hard)
• Use Reakit/Popver for this instance (easy). But then, we'd be using 2 popover solutions within @wordpress/components, which isn't ideal.