Delivered
Blockera Site Builder
Block Features

Spotlight Feature Settings Popover Inside Block Settings Panel

Note 18 May: I changed my mind about adding spotlight as i did it and that was not a good experience! For fixing the overlay issue i added the option to moving the popovers by dragging them while grabbing their headers. It much easier and more unified experience right now. I am open for more feedbacks about it.

Problem

The problem is the feature setting popovers are opening on the main editor canvas that makes editing harder as we need to see the full canvas. Also, as there are many options keeping users in focus while editing is harder.

Solution

We can move the popover inside the inspector panel as a spotlight the current editing feature. By doing it the full canvas will be visible and user will be focused on current editing state. We can use this UX pattern for other features like Block States popover too.

I created a prototype for live demo. Use the playground demo link in this Github PR to check. This is beta prototype and and can have bugs also the design is not polished and it's only a prototype to show the idea.

2
15 replies