Assembler: add zoom-out preview

[autumnfjeld]

Description

• pbxlJb-4yn-p2#comment-3019
• Part of Assembler Walkthrough Sept 2023 Tasks pbxlJb-4AT-p2

Design

Here is a mockup. Please check with @lucasmendes-design for additional design details as needed.

Dev Tasks

ToDo by Lego Devs

• Implement zoom UI control (probably for 50% and 100%)
• ....

@Automattic/lego

[lucasmendes-design]

The component for this feature:

Screen.Recording.2023-09-28.at.16.40.38.mov

[lucasmendes-design]

I also thought of something more fun as well, like a slider.

[lucasmendes-design]

Double-checking if you need something more here ?

[autumnfjeld]

@lucasmendes-design @Automattic/lego Devs haven't started on this, but there is enough for them to assess your ideas, and ask further questions and give you feedback on which design is best.

[arthur791004]

Proposed #83034 to add the zoom-out preview, and here is a quick demo:

assembler-zoom-out.mov

@lucasmendes-design Does the behavior of the zoom-out look good?

[lucasmendes-design]

Amazing @arthur791004, I didn't know you would follow this direction. The behavior looks great. I'll share some suggestions to make this component amazing :)

Figma link: Tv3pYqA3EcRfiXC31IxrXE-fi-2469:33385#585639702

Guidelines:

Hover

Hover.effect.mov

Focus

Screen.Recording.2023-10-16.at.10.58.57.mov

[lucasmendes-design]

Not sure how difficult would be if the gray border followed the zoom action. For example, when the drawer is visible we reduce the size of the site preview. We would follow the same behaviour for the zoom component. Like the video below:

Screen.Recording.2023-10-16.at.11.25.08.mov

[miksansegundo]

@lucasmendes-design A use case for the zoom-out view, that was shared on the walkthrough call, is to show all patterns when selecting styles on the assembler.

This zoom-out could be done programmatically as in the editor when browsing styles:

What do you think? I'm not aware if this case has been discussed. Here is a Gutenberg issue for tracking the Zoomed Out View.

Here is an example of the use case in the assembler:

[arthur791004]

I think these two have their own pros and cons. The current one provides more flexibility and people can control when to zoom out and the ratio they want. But they might not be aware of this functionality. Whereas, the programmatical zoom-out makes people easier to preview styles on the whole page.

I'm unsure whether to combine these two. Maybe we can set the zoom-out ratio to 0.45 when people proceed to the styles step for the first time and never touch the slider of the zoom-out 🤔

[lucasmendes-design]

A use case for the zoom-out view, that was shared on the walkthrough call, is to show all patterns when selecting styles on the assembler.

Not sure if this solution will work nicely with all screen sizes and different numbers of patterns. So, the one we're working on here is way more flexible. There is one detail that we need to check. When we zoom out the action bar should not reduce (or just a little). Otherwise, the component will be very small and confusing. See the Wix example below.

I'm unsure whether to combine these two.

We may, by default, set an automatic zoom-out when users reach the style step but I won't bother with this right now. We can develop the component and check if users are interacting with this and then, we can see how to improve the component or add some additional logic to it.

Wix example

50% zoom out when adding sections. This zoom doesn't work pretty well for small screens and users will not see the whole page.

Screen.Recording.2023-10-18.at.09.26.42.mov

Canva example

Here it works fine for everyone.

Screen.Recording.2023-10-18.at.09.32.15.mov

[arthur791004]

Closing it as it's completed.