Add e2e test for converting markup inner blocks to a navigation post

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

@@ -43,3 +43,5 @@ exports[`Navigation placeholder allows a navigation block to be created from exi
 exports[`Navigation placeholder allows a navigation block to be created using existing pages 1`] = `"<!-- wp:page-list /-->"`;
 
 exports[`Navigation placeholder creates an empty navigation block when the selected existing menu is also empty 1`] = `""`;
+
+exports[`Navigation supports navigation blocks that have inner blocks within their markup and converts them to wp_navigation posts 1`] = `"<!-- wp:page-list /-->"`;

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

@@ -2,6 +2,8 @@
  * WordPress dependencies
  */
 import {
+	clickButton,
+	clickOnMoreMenuItem,
 	createJSONResponse,
 	createNewPost,
 	createMenu as createClassicMenu,
@@ -192,6 +194,10 @@ async function getNavigationMenuRawContent() {
 		return navigationBlock.attributes.ref;
 	} );
 
+	if ( ! menuRef ) {
+		throw 'getNavigationMenuRawContent was unable to find a ref attribute on the first navigation block';
+	}
+
 	const response = await rest( {
 		method: 'GET',
 		path: `/wp/v2/navigation/${ menuRef }?context=edit`,
@@ -564,6 +570,31 @@ describe( 'Navigation', () => {
 		expect( quickInserter ).toBeTruthy();
 	} );
 
+	it( 'supports navigation blocks that have inner blocks within their markup and converts them to wp_navigation posts', async () => {
+		// Insert 'old-school' inner blocks via the code editor.
+		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"]' );
+		await publishPost();
+
+		// Check that the wp_navigation post has the page list block.
+		expect( await getNavigationMenuRawContent() ).toMatchSnapshot();
+	} );
+
 	// The following tests are unstable, roughly around when https://github.com/WordPress/wordpress-develop/pull/1412
 	// landed. The block manually tests well, so let's skip to unblock other PRs and immediately follow up. cc @vcanales
 	it.skip( 'loads frontend code only if the block is present', async () => {