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.

• [x] https://github.com/WordPress/gutenberg/issues/44585
• [x] #59741
• [x] https://github.com/WordPress/gutenberg/issues/59963
• [x] https://github.com/WordPress/gutenberg/pull/59337
• [x] https://github.com/WordPress/gutenberg/pull/59249
• [x] #59962
• [x] https://github.com/WordPress/gutenberg/issues/61051
• [ ] Remove the "Pattern inserted" snackbar, now that patterns remain in view on insertion.
• [x] https://github.com/WordPress/gutenberg/issues/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.

• [x] I should be able to select top-level patterns with the Inserter remaining open.
• [x] #45552
• [x] https://github.com/WordPress/gutenberg/pull/60054
• [x] https://github.com/WordPress/gutenberg/issues/59737
• [x] I should be able to drag patterns while in zoom out.
• [x] Fix zoomed out drag chip position (existing experiment)
• [x] I should be able to delete an inserted pattern from the toolbar.
• [x] https://github.com/WordPress/gutenberg/issues/65754

Quick inserter

• [ ] https://github.com/WordPress/gutenberg/issues/59739
• [x] 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.

• [ ] https://github.com/WordPress/gutenberg/issues/65736
• [x] https://github.com/WordPress/gutenberg/issues/65746
• [x] Add a keyboard shortcut to zoom in and out (ESC is used for select mode currently) (https://github.com/WordPress/gutenberg/pull/66400)

Smaller bits

• [x] https://github.com/WordPress/gutenberg/issues/60601
• [ ] Explore a more condensed pattern inserter UI
• [x] Try vertical displacement when dragging a pattern between existing patterns/sections (https://github.com/WordPress/gutenberg/pull/63896)
• [ ] Add support for using a pattern preview while dragging a pattern
• [ ] Add support for long-press to drag and reorder patterns/sections vertically
• [x] Close pattern category sidebar when the Inspector is opened (existing experiment)
• [x] #61044 (existing experiment) (https://github.com/WordPress/gutenberg/issues/50739#top)
• [x] #58202
• [x] https://github.com/WordPress/gutenberg/issues/60082
• [x] #59963
• [x] https://github.com/WordPress/gutenberg/issues/59389
• [x] https://github.com/WordPress/gutenberg/issues/59740
• [x] #59512
• [x] https://github.com/WordPress/gutenberg/pull/59618
• [x] #56771
• [x] https://github.com/WordPress/gutenberg/pull/56890

Related

• [x] #40319
• [x] #44710
• [x] https://github.com/WordPress/gutenberg/pull/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 https://github.com/WordPress/gutenberg/pull/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 👇

• https://github.com/WordPress/gutenberg/issues/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 e5d2a5ab47d8985b2d4a3439c2dcc8836c4c60bb

https://github.com/WordPress/gutenberg/assets/405912/0e9232ba-7c4a-4de1-801b-585173e4bbc2

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