Disable Zoom Out if no section root to allow for Theme opt in (#67232)

* Disable toolbar and auto inserter behaviour if no section root

* Remove useless coercion

Co-authored-by: Ramon <[email protected]>

* Remove more coercion copy/paste

Co-authored-by: Ramon <[email protected]>

* Add section root to Zoom Out e2e test

* Add test coverage

* Add some test coverage

* Try e2e test fix by reverting all template part changes in Theme

* Remove need to exit Zoom Out

* Ensure a main tag

* Update tests to expect the click-through behavior

* Simplify selection

---------

Co-authored-by: getdave <[email protected]>
Co-authored-by: talldan <[email protected]>
Co-authored-by: jeryj <[email protected]>
Co-authored-by: ramonjd <[email protected]>
Co-authored-by: draganescu <[email protected]>

Author: 5 people

packages/block-editor/src/components/inserter/menu.js

@@ -58,6 +58,11 @@ function InserterMenu(
 		( select ) => unlock( select( blockEditorStore ) ).isZoomOut(),
 		[]
 	);
+	const hasSectionRootClientId = useSelect(
+		( select ) =>
+			!! unlock( select( blockEditorStore ) ).getSectionRootClientId(),
+		[]
+	);
 	const [ filterValue, setFilterValue, delayedFilterValue ] =
 		useDebouncedInput( __experimentalFilterValue );
 	const [ hoveredItem, setHoveredItem ] = useState( null );
@@ -81,7 +86,9 @@ function InserterMenu(
 	const [ selectedTab, setSelectedTab ] = useState( getInitialTab() );
 
 	const shouldUseZoomOut =
-		selectedTab === 'patterns' || selectedTab === 'media';
+		hasSectionRootClientId &&
+		( selectedTab === 'patterns' || selectedTab === 'media' );
+
 	useZoomOut( shouldUseZoomOut && isLargeViewport );
 
 	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =

packages/editor/src/components/header/index.js

@@ -30,6 +30,7 @@ import {
 	PATTERN_POST_TYPE,
 	NAVIGATION_POST_TYPE,
 } from '../../store/constants';
+import { unlock } from '../../lock-unlock';
 
 const toolbarVariations = {
 	distractionFreeDisabled: { y: '-50px' },
@@ -100,6 +101,13 @@ function Header( {
 		( ! hasBlockSelection || isBlockToolsCollapsed ) &&
 		! isTooNarrowForDocumentBar;
 	const hasBackButton = useHasBackButton();
+
+	const hasSectionRootClientId = useSelect(
+		( select ) =>
+			!! unlock( select( blockEditorStore ) ).getSectionRootClientId(),
+		[]
+	);
+
 	/*
 	 * The edit-post-header classname is only kept for backward compatability
 	 * as some plugins might be relying on its presence.
@@ -167,9 +175,11 @@ function Header( {
 					forceIsAutosaveable={ forceIsDirty }
 				/>
 
-				{ canBeZoomedOut && isWideViewport && (
-					<ZoomOutToggle disabled={ forceDisableBlockTools } />
-				) }
+				{ canBeZoomedOut &&
+					isWideViewport &&
+					hasSectionRootClientId && (
+						<ZoomOutToggle disabled={ forceDisableBlockTools } />
+					) }
 
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<PinnedItems.Slot scope="core" />

test/e2e/specs/editor/various/parsing-patterns.spec.js

@@ -37,9 +37,8 @@ test.describe( 'Parsing patterns', () => {
 			} );
 		} );
 
-		// Exit zoom out mode and select the inner buttons block to ensure
+		// Select the inner buttons block to ensure
 		// the correct insertion point is selected.
-		await page.getByRole( 'button', { name: 'Zoom Out' } ).click();
 		await editor.selectBlocks(
 			editor.canvas.locator( 'role=document[name="Block: Button"i]' )
 		);

test/e2e/specs/site-editor/zoom-out.spec.js

@@ -4,7 +4,8 @@
 const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 
 const EDITOR_ZOOM_OUT_CONTENT = `
-<!-- wp:group {"style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}},"dimensions":{"minHeight":"100vh"}},"backgroundColor":"base-2","layout":{"type":"flex","orientation":"vertical","verticalAlignment":"space-between"}} -->
+<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
+<main class="wp-block-group"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}},"dimensions":{"minHeight":"100vh"}},"backgroundColor":"base-2","layout":{"type":"flex","orientation":"vertical","verticalAlignment":"space-between"}} -->
 <div class="wp-block-group has-base-2-background-color has-background" style="min-height:100vh;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:paragraph -->
 <p>First Section Start</p>
 <!-- /wp:paragraph -->
@@ -58,6 +59,21 @@ const EDITOR_ZOOM_OUT_CONTENT = `
 <!-- wp:paragraph -->
 <p>Fourth Section End</p>
 <!-- /wp:paragraph --></div>
+<!-- /wp:group --></main>
+<!-- /wp:group -->`;
+
+const EDITOR_ZOOM_OUT_CONTENT_NO_SECTION_ROOT = `<!-- wp:group {"style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}},"dimensions":{"minHeight":"100vh"}},"backgroundColor":"base-2","layout":{"type":"flex","orientation":"vertical","verticalAlignment":"space-between"}} -->
+<div class="wp-block-group has-base-2-background-color has-background" style="min-height:100vh;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:paragraph -->
+<p>First Section Start</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"style":{"layout":{"selfStretch":"fit","flexSize":null}}} -->
+<p>First Section Center</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>First Section End</p>
+<!-- /wp:paragraph --></div>
 <!-- /wp:group -->`;
 
 test.describe( 'Zoom Out', () => {
@@ -67,6 +83,8 @@ test.describe( 'Zoom Out', () => {
 
 	test.afterAll( async ( { requestUtils } ) => {
 		await requestUtils.activateTheme( 'twentytwentyone' );
+		await requestUtils.deleteAllTemplates( 'wp_template' );
+		await requestUtils.deleteAllTemplates( 'wp_template_part' );
 	} );
 
 	test.beforeEach( async ( { admin } ) => {
@@ -215,4 +233,29 @@ test.describe( 'Zoom Out', () => {
 		await expect( thirdSectionEnd ).toBeInViewport();
 		await expect( fourthSectionStart ).not.toBeInViewport();
 	} );
+
+	test( 'Zoom Out cannot be activated when the section root is missing', async ( {
+		page,
+		editor,
+	} ) => {
+		await editor.setContent( EDITOR_ZOOM_OUT_CONTENT_NO_SECTION_ROOT );
+
+		// Check that the Zoom Out toggle button is not visible.
+		await expect(
+			page.getByRole( 'button', { name: 'Zoom Out' } )
+		).toBeHidden();
+
+		// Check that activating the Patterns tab in the Inserter does not activate
+		// Zoom Out.
+		await page
+			.getByRole( 'button', {
+				name: 'Block Inserter',
+				exact: true,
+			} )
+			.click();
+
+		await page.getByRole( 'tab', { name: 'Patterns' } ).click();
+
+		await expect( page.locator( '.is-zoomed-out' ) ).toBeHidden();
+	} );
 } );