Zoomed out view

[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.

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.
• Add shuffling for header and footer template parts when zoomed out #61105

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.

• Consolidate BlockSelectionButton toolbar #60124
• Add a keyboard shortcut to zoom in and out (ESC is used for select mode currently)

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 an entity #61044 (existing experiment) (Zoomed out view #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.

[richtabor]

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?

Missed this previously; just closing the loop here. Yes, per #60828

[kohheepeace]

Feature Request 🔧

Regarding this "Zoomed out view", it would be great if the core team could consider a user experience where patterns are explored via hover rather than click when looking for Patterns.

Please refer to the following issue for more details on this 👇

• Make pattern categories be selected by hover (onMouseEnter) instead of onClick. #57994

[scruffian]

Video demo of the current state and challenges:
https://videos.files.wordpress.com/C1p5Ef9n/screen-recording-2024-05-20-at-16.38.04.mov

Feedback and ideas welcome :)

[fabiankaegy]

Hey @scruffian 👋

The video currently resolves as a 403 Forbidden page for me 🤔 Is it maybe only visible to logged-in users of a certain site? Would love to dig in and watch it :)

[scruffian]

@fabiankaegy sorry about that, try this?

https://drive.google.com/file/d/1iSNg_j1vZ_0eBi0ZRPB2Zy7Pm7pQM-xs/view?usp=sharing

[fabiankaegy]

@scruffian that works 👍 Thanks :)

[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?