Add e2e test for lingering uncontrolled blocks issue

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

@@ -423,12 +423,13 @@ function Navigation( {
 							hasSavedUnsavedInnerBlocks
 						}
 						onSave={ ( post ) => {
+							// Set some state used as a guard to prevent the creation of multiple posts.
+							setHasSavedUnsavedInnerBlocks( true );
 							// replaceInnerBlocks is required to ensure the block editor store is sync'd
 							// to be aware that there are now no inner blocks (as blocks moved to entity).
 							// This should probably happen automatically with useBlockSync
 							// but there appears to be a bug.
 							replaceInnerBlocks( clientId, [] );
-							setHasSavedUnsavedInnerBlocks( true );
 							// Switch to using the wp_navigation entity.
 							setRef( post.id );
 						} }

packages/e2e-tests/specs/editor/blocks/navigation.test.js

@@ -616,6 +616,9 @@ describe( 'Navigation', () => {
 	} );
 
 	describe( 'Creating and restarting', () => {
+		const NAV_ENTITY_SELECTOR =
+			'//div[@class="entities-saved-states__panel"]//label//strong[contains(text(), "Navigation")]';
+
 		async function populateNavWithOneItem() {
 			// Add a Link block first.
 			const appender = await page.waitForSelector(
@@ -641,6 +644,44 @@ describe( 'Navigation', () => {
 			newMenuButton.click();
 		}
 
+		it( 'does not retain uncontrolled inner blocks when creating a new entity', async () => {
+			await createNewPost();
+			await clickOnMoreMenuItem( 'Code editor' );
+			const codeEditorInput = await page.waitForSelector(
+				'.editor-post-text-editor'
+			);
+			await codeEditorInput.click();
+			const markup =
+				'<!-- wp:navigation --><!-- wp:page-list /--><!-- /wp:navigation -->';
+			await page.keyboard.type( markup );
+			await clickButton( 'Exit code editor' );
+			const navBlock = await page.waitForSelector(
+				'nav[aria-label="Block: Navigation"]'
+			);
+
+			// Select the block to convert to a wp_navigation and publish.
+			// The select menu button shows up when saving is complete.
+			await navBlock.click();
+			await page.waitForSelector( 'button[aria-label="Select Menu"]' );
+
+			// Reset the nav block to create a new entity.
+			await resetNavBlockToInitialState();
+			const startEmptyButton = await page.waitForXPath(
+				START_EMPTY_XPATH
+			);
+			await startEmptyButton.click();
+			await populateNavWithOneItem();
+
+			// Confirm that only the last menu entity was updated.
+			const publishPanelButton2 = await page.waitForSelector(
+				'.editor-post-publish-button__button:not([aria-disabled="true"])'
+			);
+			await publishPanelButton2.click();
+
+			await page.waitForXPath( NAV_ENTITY_SELECTOR );
+			expect( await page.$x( NAV_ENTITY_SELECTOR ) ).toHaveLength( 1 );
+		} );
+
 		it( 'only update a single entity currently linked with the block', async () => {
 			await createNewPost();
 			await insertBlock( 'Navigation' );
@@ -657,8 +698,6 @@ describe( 'Navigation', () => {
 			);
 			await publishPanelButton.click();
 
-			const NAV_ENTITY_SELECTOR =
-				'//div[@class="entities-saved-states__panel"]//label//strong[contains(text(), "Navigation")]';
 			await page.waitForXPath( NAV_ENTITY_SELECTOR );
 			expect( await page.$x( NAV_ENTITY_SELECTOR ) ).toHaveLength( 1 );