Developer Notes for Zoom Out in WordPress 6.7

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 blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. 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> HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. element).

 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 sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. 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

Props to @onemaggie, @andraganescu and @fabiankaegy for reviews.

#6-7, #dev-notes, #dev-notes-6-7