Zoom Out Mode: Iteration issue: WordPress 6.7

[scruffian]

This issue tries to summarize the changes we'd like to make to Zoomed Out Mode in the WordPress 6.7 release:

Next:

• Zoom Out: Add manual zoom control to the preview dropdown #63861
• Improve zoom transition #64179
• Zoom Out: Update the insertion point when selecting a block. #63866
• Zoom out: Try vertical displacement when dragging a pattern between existing patterns/sections #63896
• Zoom Out: Prevent nested patterns when in zoom out #63862
• Zoom Out: Focus search when showing an insertion point #63867
• Zoom Out: Default the inserter to the patterns tab when in zoom out #64193

Later (WP 6.8 cycle)

• Zoom Out: Hold to drag and drop nested patterns. #63863

Bugs

Bugs can be viewed using Zoom Out and Bug labels.

The project board for WP 6.7 tracks the key bugs.

Later

• Zoom Out breaks sticky positioned elements #64117
• Tabbing to zoom out canvas retriggers scaling animation #63681
• Can't select zoom out section with keyboard #63680
• Only engage zoom out mode if the editor is focused on certain entities #61044
• Zoom out: wide blocks are shrunken #63519
• Zoom out: cover block resize handler is misplaced #63522
• Zoom Out: Canvas size incorrect in Post Editor #63848
• Browse Styles should always engage "Desktop" while zoomed out #64256
• Selectable blocks should still be available in List View when zoomed out #64260

[scruffian]

Here's a demo of the work we have done so far:
https://drive.google.com/file/d/1aJFhPpiHqr22IxKSJWQMf98fsv93bgGI/view?usp=sharing

[getdave]

Some thoughts on ways of exiting Zoom Out mode:

• Exit zoom out and enter edit mode on double click on pattern
• Add "Edit" button to toolbar to allow users to exit zoom out mode.

I'll create an Issue for these.

Also some other things:

• remove unwanted whitespace beneath final pattern
• handle inserting sync patterns (UI and UX Issues present)
• add prompts to improve UX when entering empty Page
• how do we re-enter Zoom Out mode once we've exist by choosing to edit a specific section?
• experimental PR to try adding "Zoom back out" button to block toolbar in normal "Edit" mode when.
• Pattern search exits Zoom Out mode. We need to fix that.

[getdave]

@youknowriad @mtias @richtabor I've been watching the advancement of the new "Edit" (previously "Select" and under the hood navigation) mode. Many of its affordances are remarkably similar to what we have in "Zoom Out" today.

There are some exceptions in Zoom Out:

• vertical toolbar
• only sections are selectable - content is all locked.

...there are probably more.

However, I'm wondering if there's scope to look to merge these two modes? After all, I expect that users will probably want to make basic edits whilst zoomed out (e.g. amend a heading).

Perhaps we'd have some kind of "click through" whereby once a section is selected in zoom out you could click again to "activate" contentOnly editing on that section.

I don't recall seeing an Issue capturing this so if it's something you think might be useful I can raise an Issue to track it.

[youknowriad]

Yes, I think it seems we can converge in terms of interaction model (selecting sections, potentially selecting content blocks as well) and we can leave the zoom-out mode about setting a zoom level instead.

We need to decide what to do with toolbar: should it switch to vertical toolbar when a zoom level is set or should it always stay consistent.

[getdave]

I think the UX for Zoomed Out is probably better as a vertical toolbar but I would defer to @WordPress/gutenberg-design on that one. Maybe @richtabor as he's been heavily involved in Zoom Out.

[getdave]

@youknowriad I proposed merging the two modes.

[getdave]

@draganescu @MaggieCabrera @jeryj @ajlende @youknowriad @talldan @richtabor

I've drafted the following dev note for Zoom Out in WP 6.7. Feel free to edit/amend as required.

Update: draft available on Make Blog.

---

Dev note for WordPress 6.7 (draft)

Zoom Out in WordPress 6.7, introduces a new way to easily create and edit content using Patterns rather than lower-level, individual blocks.

Accessible via a toggle in the editor toolbar, when activated the canvas will "zoom out" providing users with a high level view of the content currently being edited. The inserter also automatically enables this new feature when the patterns tab is activated, allowing users to quickly and easily build and/or edit their Page or Template using pre-configured Patterns.

Note that whilst in this mode, blocks outside the "main content" of the current post will be non-editable. This allows users to focus on easily dealing with larger areas of content.

Theme Compatibility

To facilitate this feature, the Editor will attempt to detect the block which is acting as the "main content" of the current post type. This is achieved via a simple algorithm which optimises for detecting the Post Content (core/post-content) block, falling back to a Group with a tagName of main (i.e. the <main> HTML element).

gutenberg/packages/editor/src/components/provider/use-block-editor-settings.js

Lines 149 to 160 in 7d60169

	function getSectionRootBlock() {
	if ( renderingMode === 'template-locked' ) {
	return getBlocksByName( 'core/post-content' )?.[ 0 ] ?? '';
	}
	return (
	getBlocksByName( 'core/group' ).find(
	( clientId ) =>
	getBlockAttributes( clientId )?.tagName === 'main'
	) ?? ''
	);
	}

To maximise compatibility with this mode, Theme authors should update their templates to ensure their "main content" is wrapped with a Group block whose tagName attribute is configured as main. This can be found in the block's sidebar controls under Advanced. We recommend using a core/group as it is the most generic and flexible "sectioning element" in the editor.

Decoupling of Zoom Out mode from "zooming" the canvas

As part of this effort, contributors have also elected to decouple the scaling of the Editor canvas from the "Zoom Out" editor mode. This is largely in anticipation of future efforts around simplifying the editing experience. As a result, invoking zoom-out editor mode will not longer automatically scale the Editor canvas.

Further reading:

• Zoom out #50739
• Merge Zoom Out and "Edit" (Select) Modes #65736

[fabiankaegy]

@getdave The dev note is looking great to me!

Feel free to publish it on the make blog and I will then reference it in the field guide :) This can be an independant dev note as far as I am concerned 👍

In an ideal world I would love to include a quick video / screenshot similar to the ones we have in the Gutenberg Release posts that showcases the feature.

Looking at the Gutenberg posts this image here has been used:

[draganescu]

I added a few edits @getdave

[getdave]

Update for WordPress 6.7

I posted an update on Friday in WP Slack with my top of mind for the Zoom Out feature in 6.7:

• Zooming In doesn't maintain scroll position
• Wide blocks shrink
• Vertical Toolbar Placement
  • could be fixed by Make zoom out vertical toolbar consistent #65627.
  • suggestion to remove the vertical toolbar entirely.
• Zoom Out not persisting on template switch or Visual to Code Editor - should be fixed by Fix zoom out not persisting while switching between editor and code editor #65932 once it's been revised. Simple fix.
• Drag and Drop zones inconsistency - this is a particular problem on Safari.
• No Patterns UX Issue - more complex Issue. Some research but no PR.
• Scaling Issues - PRs in progress to resolve.
• Grid Block doesn't adapt to Zoom Out - issue for TT5 Theme

I'll update these as and when they are resolved.

[getdave]

@fabiankaegy Dev note draft created on Make Blog.

[fabiankaegy]

@getdave How do you feel about my suggestion the other day of including an image / video showcasing what it actually looks like in 6.7?

Besides that this is good to go from my perspective 👍

[colorful-tones]

@getdave small edit from your Dev Note preview:

editor mode will not longer automatically scale the Editor canvas.

should be:

editor mode will no longer automatically scale the Editor canvas.

[youknowriad]

Hey folks, just noting that the vertical toolbar has been removed in trunk in #66039 as it suffers a few issues: doesn't scale well to other buttons like "change design", doesn't support text only buttons, feels disconnected from blocks when centered.

We can consider back-porting this change to 6.7 (it's several bug fixes at once). here's the corresponding manual cherry-pick #66200

[getdave]

Update for WordPress 6.7

In general Zoom Out feels like it's in a good place. That said here are my top of mind items that we need to land prior to RC2:

• Restore ability to delete blocks in Zoom Out - there is a PR but it still needs work.
• Drag and Drop zones inconsistency - we have a PR which I believe fixes the Issue. Could do with a confidence check.
• Flex related layout bugs - this has spun out quite a bit but Revise zoom layout shift fix #66390 looks like it could be the right bug fix to fully resolve. We really need to nail this down as there is too much flux here for this late in the cycle.
• Sidebar width Issue on small screens - minor debate about the proper solution but should be on track to be fixed.
• Zooming In doesn't maintain scroll position - I believe @ajlende is exploring solutions.

Note that RC2 is on Tuesday October 29th, so we should look to release packages on Monday October 28th. Therefore all PRs should aim to land by Friday (or early Monday) latest.

cc @ndiego @ellatrix @colorful-tones @cbravobernal @kevin940726