Zoom out

[mtias]

This is a tracking issue for the zoomed out view that focuses on patterns rather than granular block editing. The idea behind a zoomed out view is to allow users to work with their content at a higher level, lighter touch than what individual blocks provide. This workflow is currently an experimental feature as the details of the interaction model are validated. Part of #39281.

Visuals

Pattern Insertion

The smoothest way forward is to integrate zoom out is to key in using pattern insertion. From opening the patterns tab, zooming out, inserting patterns, and getting back into block editing. To do this we need to identify what the top-level blocks are, considering pages and templates (#59249). Persist the inserter when inserting patterns in zoom out mode (#59741) and explore ways to zoom back into a page/template.

• Zoom out view when the "Patterns" in the Inserter is selected #44585
• Keep the inserter open when a pattern is inserted from zoom out mode #59741
• Close the Inspector when a pattern category is selected #59963
• View zoom out canvas while inserting patterns #59337
• Introduce section container selection when assembling patterns (zoom out mode) #59249
• Keep an inserted pattern within view when added to the page #59962
• Proposal: Keep the Inserter open #61051
• Remove the "Pattern inserted" snackbar, now that patterns remain in view on insertion.
• Try zooming out when selecting the patterns tab in the inserter #65749

Interactions while zoomed out

When inserting patterns to a page, we should be able to select any of the top-level patterns, move them via arrows or drag and drop, shuffle them between related patterns, assign colorways, or delete them. This higher-up page editing experience provides a way to quickly compose pages of patterns, while block editing is much more granular.

• I should be able to select top-level patterns with the Inserter remaining open.
• Enable shuffling of sections in zoomed out mode #45552
• Prevent reordering of header and footer template parts when zoomed out #60054
• Explore a vertical toolbar for zoom out mode #59737
• I should be able to drag patterns while in zoom out.
• Fix zoomed out drag chip position (existing experiment)
• I should be able to delete an inserted pattern from the toolbar.
• Only render zoom out inserters on block selection #65754

Quick inserter

• Try "Add Pattern" UI for zoom out quick inserter #59739
• If I engage elsewhere in the canvas, the insertion point is omitted and the indicator shrinks away.
• While hovering on the upper/lower half, render the quick inserter on the corresponding side.

Combining select and zoom out

An exploration into potentially evolving select mode as the zoomed out mode.

• Merge Zoom Out and "Edit" (Select) Modes #65736
• Remove the "Edit" control from the zoom out toolbar #65746
• Add a keyboard shortcut to zoom in and out (ESC is used for select mode currently) (Zoom out: Add keyboard shortcut in editor #66400)

Smaller bits

• Zoom-out mode issues on Safari #60601
• Explore a more condensed pattern inserter UI
• Try vertical displacement when dragging a pattern between existing patterns/sections (Zoom out: Try vertical displacement when dragging a pattern between existing patterns/sections #63896)
• Add support for using a pattern preview while dragging a pattern
• Add support for long-press to drag and reorder patterns/sections vertically
• Close pattern category sidebar when the Inspector is opened (existing experiment)
• Only engage zoom out mode if the editor is focused on certain entities #61044 (existing experiment) (Zoom out #50739 (comment))
• Move zoom out into PreviewDropdown #58202
• Opening a Media category in zoomed out mode should push the site canvas over #60082
• Close the Inspector when a pattern category is selected #59963
• Revert resized canvas and don't render resize handles when zoomed out #59389
• Add back Blocks and Media tabs within zoom out mode #59740
• Expand main content area to viewport when zoomed out #59512
• Refactor zoom-out iframe scale #59618
• Fix errant scrollbar when zoomed out mode is activated #56771
• Zoomed out mode: show content container children #56890

Related

• Section overview UI (exploded view) #40319
• Double clicking on a pattern in zoomed out view should go into focus mode #44710
• Zoomed Out Mode experiments #56806

[scruffian]

I updated the issue description with a more detailed task breakdown and some screenshots. We'll keep updating this list as the steps become clearer.

[draganescu]

@richtabor I didn't find a better place to ask this:

• how is zoom out, given it's section selection model. affect drag and drop? Currently one can drag blocks and patterns inside sections. Should we disable this possibility and only allow drop in between sections? For blocks and patterns, or only for patterns?

I'd say yes, but wanted to get additional input and maybe make some issue.

[colorful-tones]

I was just doing some testing while reviewing the latest video demonstration of this feature. I noticed an oddity when I select Browser Styles and it jumps to the bottom of the template and automatically selects the last pattern on the page, or at least that is what I'm assuming the logic is.

Here is a video using trunk e5d2a5a

zoom-out-view-testing.mp4

[krishnathakurwp]

While searching pattern, a block recommendation from directory may not be a good user experience.
Since user intention is to find a suitable pattern, this I found confusing.

Hence in my opinion this should be disabled while searching pattern.

[mtias]

@krishnathakurwp that's a good suggestion, I agree. Would you mind opening a specific issue about that so we can track it?