Avoid dirtying related navigation entities during passive render

packages/block-library/src/navigation/edit/index.js

@@ -288,16 +288,6 @@ function Navigation( {
 		[ setAttributes ]
 	);
 
-	// Reset submenuVisibility to default if orientation changes to horizontal while "always" is selected
-	useEffect( () => {
-		if ( orientation === 'horizontal' && submenuVisibility === 'always' ) {
-			setAttributes( {
-				submenuVisibility: 'hover',
-				showSubmenuIcon: true,
-			} );
-		}
-	}, [ orientation, submenuVisibility, setAttributes ] );
-
 	const recursionId = `navigationMenu/${ ref }`;
 
 	// Skip recursion check when in preview mode.
@@ -372,6 +362,29 @@ function Navigation( {
 		innerBlocks,
 	} = useInnerBlocks( clientId );
 
+	// Reset submenuVisibility to default if orientation changes to horizontal
+	// while "always" is selected, but only when the Navigation block or one
+	// of its inner blocks is being edited. Rendering related template parts
+	// should not mark them dirty.
+	useEffect( () => {
+		if (
+			( isSelected || isInnerBlockSelected ) &&
+			orientation === 'horizontal' &&
+			submenuVisibility === 'always'
+		) {
+			setAttributes( {
+				submenuVisibility: 'hover',
+				showSubmenuIcon: true,
+			} );
+		}
+	}, [
+		isSelected,
+		isInnerBlockSelected,
+		orientation,
+		submenuVisibility,
+		setAttributes,
+	] );
+
 	// Use a ref to store whether we've confirmed a page-list has submenus.
 	// Once confirmed, we don't need to keep checking the page-list blocks.
 	const hasPageListWithSubmenuRef = useRef( false );

test/e2e/specs/editor/blocks/navigation-passive-rendering.spec.js

@@ -0,0 +1,130 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+async function getDirtyEntityRecords( page ) {
+	return page.evaluate( () =>
+		window.wp.data
+			.select( 'core' )
+			.__experimentalGetDirtyEntityRecords()
+			.map( ( { kind, name, key } ) => ( { kind, name, key } ) )
+	);
+}
+
+async function enableShowTemplate( page, editor ) {
+	await page.evaluate( () => {
+		window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock();
+	} );
+	await editor.openDocumentSettingsSidebar();
+
+	await page
+		.getByRole( 'region', { name: 'Editor settings' } )
+		.getByRole( 'button', { name: 'Template options' } )
+		.click();
+
+	const showTemplateButton = page.getByRole( 'menuitemcheckbox', {
+		name: 'Show template',
+	} );
+	const isChecked = await showTemplateButton.getAttribute( 'aria-checked' );
+	if ( isChecked !== 'true' ) {
+		await showTemplateButton.click();
+	} else {
+		await page.keyboard.press( 'Escape' );
+	}
+}
+
+test.describe( 'Navigation passive rendering', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+	} );
+
+	test.beforeEach( async ( { requestUtils } ) => {
+		await requestUtils.resetPreferences();
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.deleteAllPosts(),
+			requestUtils.deleteAllPages(),
+			requestUtils.deleteAllMenus(),
+			requestUtils.deleteAllTemplates( 'wp_template' ),
+			requestUtils.deleteAllTemplates( 'wp_template_part' ),
+			requestUtils.resetPreferences(),
+		] );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test( 'does not dirty related template parts or navigation menus when rendered in the post editor', async ( {
+		admin,
+		editor,
+		page,
+		requestUtils,
+	} ) => {
+		const parentPage = await requestUtils.createPage( {
+			title: 'Products',
+			status: 'publish',
+		} );
+		await requestUtils.createPage( {
+			title: 'Laptops',
+			status: 'publish',
+			parent: parentPage.id,
+		} );
+
+		const menu = await requestUtils.createNavigationMenu( {
+			title: 'Related menu',
+			content: '<!-- wp:page-list {"isNested":true} /-->',
+		} );
+
+		await requestUtils.createTemplate( 'wp_template_part', {
+			slug: 'header',
+			title: 'Header',
+			content: `<!-- wp:navigation {"ref":${ menu.id },"overlayMenu":"off","submenuVisibility":"always"} /-->`,
+		} );
+
+		await requestUtils.createTemplate( 'wp_template', {
+			slug: 'singular',
+			title: 'Singular',
+			content: [
+				'<!-- wp:template-part {"slug":"header","tagName":"header","theme":"emptytheme"} /-->',
+				'<!-- wp:post-content {"layout":{"inherit":true}} /-->',
+			].join( '\n' ),
+		} );
+
+		const post = await requestUtils.createPost( {
+			title: 'Passive render test',
+			content:
+				'<!-- wp:paragraph --><p>Original content.</p><!-- /wp:paragraph -->',
+			status: 'draft',
+		} );
+
+		await admin.editPost( post.id );
+		await enableShowTemplate( page, editor );
+
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: Navigation',
+			} )
+		).toBeVisible();
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: Page List',
+			} )
+		).toBeVisible();
+
+		await expect.poll( () => getDirtyEntityRecords( page ) ).toEqual( [] );
+
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.click();
+		await page.keyboard.press( 'End' );
+		await page.keyboard.type( ' Edited.' );
+
+		await expect
+			.poll( () => getDirtyEntityRecords( page ) )
+			.toEqual( [ { kind: 'postType', name: 'post', key: post.id } ] );
+	} );
+} );