Description
openedon May 18, 2023
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
Sub-issues
Metadata
Assignees
Type
Projects
Status
In Progress
Status
In Dev
Status
📋 Iteration/Tracking Issues