@wordpress/e2e-tests 2.4.1-next.253d9b6e21.0 → 2.5.1

package/specs/editor/various/keyboard-navigable-blocks.test.js

@@ -116,7 +116,7 @@ describe( 'Order of block keyboard navigation', () => {
 		await page.keyboard.press( 'Tab' );
 		await expect(
 			await page.evaluate( () => {
-				return document.activeElement.placeholder;
+				return document.activeElement.getAttribute( 'aria-label' );
 			} )
 		).toBe( 'Add title' );
 
@@ -168,7 +168,7 @@ describe( 'Order of block keyboard navigation', () => {
 		await pressKeyWithModifier( 'shift', 'Tab' );
 		await expect(
 			await page.evaluate( () => {
-				return document.activeElement.placeholder;
+				return document.activeElement.getAttribute( 'aria-label' );
 			} )
 		).toBe( 'Add title' );
 	} );

package/specs/editor/various/multi-block-selection.test.js

@@ -10,6 +10,7 @@ import {
 	clickBlockToolbarButton,
 	clickButton,
 	clickMenuItem,
+	saveDraft,
 } from '@wordpress/e2e-test-utils';
 
 async function getSelectedFlatIndices() {
@@ -288,6 +289,28 @@ describe( 'Multi-block selection', () => {
 		expect( await getSelectedFlatIndices() ).toEqual( [ 2, 3 ] );
 	} );
 
+	// @see https://github.com/WordPress/gutenberg/issues/34118
+	it( 'should properly select a single block even if `shift` was held for the selection', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( 'test' );
+
+		await saveDraft();
+		await page.reload();
+		await page.waitForSelector( '.edit-post-layout' );
+
+		await page.keyboard.down( 'Shift' );
+		await page.click( '[data-type="core/paragraph"]', { visible: true } );
+		await page.keyboard.up( 'Shift' );
+
+		await pressKeyWithModifier( 'primary', 'a' );
+		await page.keyboard.type( 'new content' );
+		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>new content</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
+
 	it( 'should select by dragging', async () => {
 		await clickBlockAppender();
 		await page.keyboard.type( '1' );

package/specs/editor/various/new-post.test.js

@@ -25,9 +25,12 @@ describe( 'new editor state', () => {
 			expect.stringContaining( 'post-new.php' )
 		);
 		// Should display the blank title.
-		const title = await page.$( '[placeholder="Add title"]' );
+		const title = await page.$( '[aria-label="Add title"]' );
 		expect( title ).not.toBeNull();
-		expect( title.innerHTML ).toBeFalsy();
+		// Trim padding non-breaking space
+		expect(
+			await title.evaluate( ( el ) => el.textContent.trim() )
+		).toBeFalsy();
 		// Should display the Preview button.
 		const postPreviewButton = await page.$(
 			'.editor-post-preview.components-button'
@@ -59,7 +62,7 @@ describe( 'new editor state', () => {
 		} );
 
 		expect( activeElementClasses ).toContain( 'editor-post-title__input' );
-		expect( activeElementTagName ).toEqual( 'textarea' );
+		expect( activeElementTagName ).toEqual( 'h1' );
 	} );
 
 	it( 'should not focus the title if the title exists', async () => {

package/specs/editor/various/preview.test.js

@@ -11,6 +11,7 @@ import {
 	publishPost,
 	saveDraft,
 	openPreviewPage,
+	pressKeyWithModifier,
 } from '@wordpress/e2e-test-utils';
 
 /** @typedef {import('puppeteer').Page} Page */
@@ -216,7 +217,10 @@ describe( 'Preview', () => {
 		await editorPage.bringToFront();
 
 		// Append bbbbb to the title, and tab away from the title so blur event is triggered.
-		await editorPage.type( '.editor-post-title__input', 'bbbbb' );
+		await editorPage.focus( '.editor-post-title__input' );
+		await pressKeyWithModifier( 'primary', 'a' );
+		await editorPage.keyboard.press( 'ArrowRight' );
+		await editorPage.keyboard.type( 'bbbbb' );
 		await editorPage.keyboard.press( 'Tab' );
 
 		// Save draft and open the preview page right after.

package/specs/editor/various/rich-text.test.js

@@ -385,12 +385,16 @@ describe( 'RichText', () => {
 		await clickBlockToolbarButton( 'More' );
 
 		const button = await page.waitForXPath(
-			`//button[contains(text(), 'Text color')]`
+			`//button[text()='Highlight']`
 		);
 		// Clicks may fail if the button is out of view. Assure it is before click.
 		await button.evaluate( ( element ) => element.scrollIntoView() );
 		await button.click();
 
+		// Tab to the "Text" tab.
+		await page.keyboard.press( 'Tab' );
+		// Tab to black.
+		await page.keyboard.press( 'Tab' );
 		// Select color other than black.
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Enter' );
@@ -470,4 +474,28 @@ describe( 'RichText', () => {
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	it( 'should navigate consecutive format boundaries', async () => {
+		await clickBlockAppender();
+		await pressKeyWithModifier( 'primary', 'b' );
+		await page.keyboard.type( '1' );
+		await pressKeyWithModifier( 'primary', 'b' );
+		await pressKeyWithModifier( 'primary', 'i' );
+		await page.keyboard.type( '2' );
+		await pressKeyWithModifier( 'primary', 'i' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		// Should move into the second format.
+		await page.keyboard.press( 'ArrowLeft' );
+		// Should move to the start of the second format.
+		await page.keyboard.press( 'ArrowLeft' );
+		// Should move between the first and second format.
+		await page.keyboard.press( 'ArrowLeft' );
+
+		await page.keyboard.type( '-' );
+
+		// Expect: <strong>1</strong>-<em>2</em>
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );

package/specs/editor/various/splitting-merging.test.js

@@ -193,10 +193,10 @@ describe( 'splitting and merging blocks', () => {
 		await insertBlock( 'Paragraph' );
 		await page.keyboard.press( 'Backspace' );
 
-		// There is a default block:
+		// There is a default block and post title:
 		expect(
 			await page.$$( '.block-editor-block-list__block' )
-		).toHaveLength( 1 );
+		).toHaveLength( 2 );
 
 		// But the effective saved content is still empty:
 		expect( await getEditedPostContent() ).toBe( '' );
@@ -226,4 +226,50 @@ describe( 'splitting and merging blocks', () => {
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	describe( 'test restore selection when merge produces more than one block', () => {
+		it( 'on forward delete', async () => {
+			await insertBlock( 'Paragraph' );
+			await page.keyboard.type( 'hi' );
+			await insertBlock( 'List' );
+			await page.keyboard.type( 'item 1' );
+			await page.keyboard.press( 'Enter' );
+			await page.keyboard.type( 'item 2' );
+			await pressKeyTimes( 'ArrowUp', 2 );
+			await page.keyboard.press( 'Delete' );
+			// Carret should be in the first block and at the proper position.
+			await page.keyboard.type( '-' );
+			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
+			"<!-- wp:paragraph -->
+			<p>hi-item 1</p>
+			<!-- /wp:paragraph -->
+
+			<!-- wp:paragraph -->
+			<p>item 2</p>
+			<!-- /wp:paragraph -->"
+		` );
+		} );
+		it( 'on backspace', async () => {
+			await insertBlock( 'Paragraph' );
+			await page.keyboard.type( 'hi' );
+			await insertBlock( 'List' );
+			await page.keyboard.type( 'item 1' );
+			await page.keyboard.press( 'Enter' );
+			await page.keyboard.type( 'item 2' );
+			await page.keyboard.press( 'ArrowUp' );
+			await pressKeyTimes( 'ArrowLeft', 6 );
+			await page.keyboard.press( 'Backspace' );
+			// Carret should be in the first block and at the proper position.
+			await page.keyboard.type( '-' );
+			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
+			"<!-- wp:paragraph -->
+			<p>hi-item 1</p>
+			<!-- /wp:paragraph -->
+
+			<!-- wp:paragraph -->
+			<p>item 2</p>
+			<!-- /wp:paragraph -->"
+		` );
+		} );
+	} );
 } );

package/specs/editor/various/writing-flow.test.js

@@ -9,7 +9,6 @@ import {
 	pressKeyWithModifier,
 	insertBlock,
 	clickBlockToolbarButton,
-	clickButton,
 } from '@wordpress/e2e-test-utils';
 
 const getActiveBlockName = async () =>
@@ -289,29 +288,28 @@ describe( 'Writing Flow', () => {
 	it( 'should navigate native inputs vertically, not horizontally', async () => {
 		// See: https://github.com/WordPress/gutenberg/issues/9626
 
-		// Title is within the editor's writing flow, and is a <textarea>
-		await page.click( '.editor-post-title' );
+		await insertBlock( 'Shortcode' );
 
 		// Should remain in title upon ArrowRight:
 		await page.keyboard.press( 'ArrowRight' );
-		let isInTitle = await page.evaluate(
-			() => !! document.activeElement.closest( '.editor-post-title' )
+		let isInShortcodeBlock = await page.evaluate(
+			() => !! document.activeElement.closest( '.wp-block-shortcode' )
 		);
-		expect( isInTitle ).toBe( true );
+		expect( isInShortcodeBlock ).toBe( true );
 
 		// Should remain in title upon modifier + ArrowDown:
 		await pressKeyWithModifier( 'primary', 'ArrowDown' );
-		isInTitle = await page.evaluate(
-			() => !! document.activeElement.closest( '.editor-post-title' )
+		isInShortcodeBlock = await page.evaluate(
+			() => !! document.activeElement.closest( '.wp-block-shortcode' )
 		);
-		expect( isInTitle ).toBe( true );
+		expect( isInShortcodeBlock ).toBe( true );
 
 		// Should navigate into blocks list upon ArrowDown:
 		await page.keyboard.press( 'ArrowDown' );
-		const isInBlock = await page.evaluate(
-			() => !! document.activeElement.closest( '[data-type]' )
+		const isInParagraphBlock = await page.evaluate(
+			() => !! document.activeElement.closest( '.wp-block-paragraph' )
 		);
-		expect( isInBlock ).toBe( true );
+		expect( isInParagraphBlock ).toBe( true );
 	} );
 
 	it( 'should not delete surrounding space when deleting a word with Backspace', async () => {
@@ -557,7 +555,10 @@ describe( 'Writing Flow', () => {
 		await page.keyboard.type( '/image' );
 		await page.keyboard.press( 'Enter' );
 		await clickBlockToolbarButton( 'Align' );
-		await clickButton( 'Wide width' );
+		const wideButton = await page.waitForXPath(
+			`//button[contains(@class,'components-dropdown-menu__menu-item')]//span[contains(text(), 'Wide width')]`
+		);
+		await wideButton.click();
 
 		// Select the previous block.
 		await page.keyboard.press( 'ArrowUp' );

package/specs/experiments/__snapshots__/navigation-editor.test.js.snap

@@ -4,42 +4,36 @@ exports[`Navigation editor allows creation of a menu when there are existing men
 
 exports[`Navigation editor allows creation of a menu when there are no current menu items 1`] = `
 "<!-- wp:navigation {\\"orientation\\":\\"vertical\\"} -->
-<!-- wp:page-list /-->
+<!-- wp:navigation-link {\\"label\\":\\"My page\\",\\"type\\":\\"page\\",\\"id\\":\\"number\\",\\"url\\":\\"string\\",\\"isTopLevelLink\\":true} /-->
 <!-- /wp:navigation -->"
 `;
 
-exports[`Navigation editor displays the first menu from the REST response when at least one menu exists 1`] = `
+exports[`Navigation editor displays the first created menu when at least one menu exists 1`] = `
 "<!-- wp:navigation {\\"orientation\\":\\"vertical\\"} -->
-<!-- wp:navigation-link {\\"label\\":\\"Home\\",\\"type\\":\\"custom\\",\\"url\\":\\"http://localhost:8889/\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":true} /-->
-
-<!-- wp:navigation-link {\\"label\\":\\"Accusamus quo repellat illum magnam quas\\",\\"type\\":\\"page\\",\\"id\\":41,\\"url\\":\\"http://localhost:8889/?page_id=41\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} -->
-<!-- wp:navigation-link {\\"label\\":\\"Debitis cum consequatur sit doloremque\\",\\"type\\":\\"page\\",\\"id\\":51,\\"url\\":\\"http://localhost:8889/?page_id=51\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} /-->
-<!-- /wp:navigation-link -->
-
-<!-- wp:navigation-link {\\"label\\":\\"Est ea vero non nihil officiis in\\",\\"type\\":\\"page\\",\\"id\\":53,\\"url\\":\\"http://localhost:8889/?page_id=53\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} -->
-<!-- wp:navigation-link {\\"label\\":\\"Fuga odio quis tempora\\",\\"type\\":\\"page\\",\\"id\\":56,\\"url\\":\\"http://localhost:8889/?page_id=56\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} -->
-<!-- wp:navigation-link {\\"label\\":\\"In consectetur repellendus eveniet maiores aperiam\\",\\"type\\":\\"page\\",\\"id\\":15,\\"url\\":\\"http://localhost:8889/?page_id=15\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} -->
-<!-- wp:navigation-link {\\"label\\":\\"Mollitia maiores consequatur ea dolorem blanditiis\\",\\"type\\":\\"page\\",\\"id\\":45,\\"url\\":\\"http://localhost:8889/?page_id=45\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} -->
-<!-- wp:navigation-link {\\"label\\":\\"Necessitatibus nisi qui qui necessitatibus quaerat possimus\\",\\"type\\":\\"page\\",\\"id\\":27,\\"url\\":\\"http://localhost:8889/?page_id=27\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} /-->
-<!-- /wp:navigation-link -->
-<!-- /wp:navigation-link -->
-<!-- /wp:navigation-link -->
-<!-- /wp:navigation-link -->
-
-<!-- wp:navigation-link {\\"label\\":\\"Nulla omnis autem dolores eligendi\\",\\"type\\":\\"page\\",\\"id\\":43,\\"url\\":\\"http://localhost:8889/?page_id=43\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} /-->
-
-<!-- wp:navigation-link {\\"label\\":\\"Sample Page\\",\\"type\\":\\"page\\",\\"id\\":2,\\"url\\":\\"http://localhost:8889/?page_id=2\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} /-->
-
-<!-- wp:navigation-link {\\"label\\":\\"Beatae qui labore voluptas eveniet officia quia voluptas qui porro sequi et aut est\\",\\"type\\":\\"category\\",\\"description\\":\\"Ratione nemo ut aut ullam sed assumenda quis est exercitationem\\",\\"id\\":7,\\"url\\":\\"http://localhost:8889/?cat=7\\",\\"kind\\":\\"taxonomy\\",\\"isTopLevelLink\\":true} -->
-<!-- wp:navigation-link {\\"label\\":\\"Et minus itaque velit tempore hic quisquam saepe quas asperiores\\",\\"type\\":\\"category\\",\\"description\\":\\"Vel fuga enim rerum perspiciatis sapiente mollitia magni ut molestiae labore quae quia quia libero perspiciatis voluptatem quidem deleniti eveniet laboriosam doloribus dolor laborum accusantium modi ducimus itaque rerum cum nostrum\\",\\"id\\":19,\\"url\\":\\"http://localhost:8889/?cat=19\\",\\"kind\\":\\"taxonomy\\",\\"isTopLevelLink\\":false} -->
-<!-- wp:navigation-link {\\"label\\":\\"Et quas a et mollitia et voluptas optio voluptate quia quo unde aut in nostrum iste impedit quisquam id aut\\",\\"type\\":\\"category\\",\\"description\\":\\"Quas sit labore earum omnis eos sint iste est possimus harum aut soluta sint optio quos distinctio inventore voluptate non ut aliquam ad ut voluptates fugiat numquam magnam modi repellendus modi laudantium et debitis officia est voluptatum quidem unde molestiae animi vero fuga accusamus nam\\",\\"id\\":6,\\"url\\":\\"http://localhost:8889/?cat=6\\",\\"kind\\":\\"taxonomy\\",\\"isTopLevelLink\\":false} -->
-<!-- wp:navigation-link {\\"label\\":\\"Illo quis sit impedit itaque expedita earum deserunt magni doloremque velit eum id error\\",\\"type\\":\\"category\\",\\"description\\":\\"Doloremque vero sunt officiis iste voluptatibus voluptas molestiae sint asperiores recusandae amet praesentium et explicabo nesciunt similique voluptatum laudantium amet officiis quas distinctio quis enim nihil tempora\\",\\"id\\":16,\\"url\\":\\"http://localhost:8889/?cat=16\\",\\"kind\\":\\"taxonomy\\",\\"isTopLevelLink\\":false} /-->
-<!-- /wp:navigation-link -->
-<!-- /wp:navigation-link -->
-<!-- /wp:navigation-link -->
-
-<!-- wp:navigation-link {\\"label\\":\\"WordPress.org\\",\\"type\\":\\"custom\\",\\"url\\":\\"https://wordpress.org\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":true} -->
-<!-- wp:navigation-link {\\"label\\":\\"Google\\",\\"type\\":\\"custom\\",\\"url\\":\\"https://google.com\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":false} /-->
-<!-- /wp:navigation-link -->
+<!-- wp:navigation-link {\\"label\\":\\"Home\\",\\"type\\":\\"custom\\",\\"url\\":\\"string\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":true} /-->
+
+<!-- wp:navigation-submenu {\\"label\\":\\"About\\",\\"type\\":\\"page\\",\\"id\\":\\"number\\",\\"url\\":\\"string\\",\\"kind\\":\\"post-type\\",\\"isTopLevelItem\\":true} -->
+<!-- wp:navigation-link {\\"label\\":\\"Our team\\",\\"type\\":\\"page\\",\\"id\\":\\"number\\",\\"url\\":\\"string\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} /-->
+<!-- /wp:navigation-submenu -->
+
+<!-- wp:navigation-submenu {\\"label\\":\\"Shop\\",\\"type\\":\\"page\\",\\"id\\":\\"number\\",\\"url\\":\\"string\\",\\"kind\\":\\"post-type\\",\\"isTopLevelItem\\":true} -->
+<!-- wp:navigation-submenu {\\"label\\":\\"Winter apparel\\",\\"type\\":\\"page\\",\\"id\\":\\"number\\",\\"url\\":\\"string\\",\\"kind\\":\\"post-type\\",\\"isTopLevelItem\\":false} -->
+<!-- wp:navigation-link {\\"label\\":\\"Chunky socks\\",\\"type\\":\\"page\\",\\"id\\":\\"number\\",\\"url\\":\\"string\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} /-->
+
+<!-- wp:navigation-link {\\"label\\":\\"Hideous hats\\",\\"type\\":\\"page\\",\\"id\\":\\"number\\",\\"url\\":\\"string\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} /-->
+
+<!-- wp:navigation-link {\\"label\\":\\"Glorious gloves\\",\\"type\\":\\"page\\",\\"id\\":\\"number\\",\\"url\\":\\"string\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} /-->
+
+<!-- wp:navigation-link {\\"label\\":\\"Jazzy Jumpers\\",\\"type\\":\\"page\\",\\"id\\":\\"number\\",\\"url\\":\\"string\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} /-->
+<!-- /wp:navigation-submenu -->
+<!-- /wp:navigation-submenu -->
+
+<!-- wp:navigation-link {\\"label\\":\\"Shipping\\",\\"type\\":\\"page\\",\\"id\\":\\"number\\",\\"url\\":\\"string\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} /-->
+
+<!-- wp:navigation-link {\\"label\\":\\"Contact Us\\",\\"type\\":\\"page\\",\\"id\\":\\"number\\",\\"url\\":\\"string\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} /-->
+
+<!-- wp:navigation-submenu {\\"label\\":\\"WordPress.org\\",\\"type\\":\\"custom\\",\\"url\\":\\"string\\",\\"kind\\":\\"custom\\",\\"isTopLevelItem\\":true} -->
+<!-- wp:navigation-link {\\"label\\":\\"Google\\",\\"type\\":\\"custom\\",\\"url\\":\\"string\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":false} /-->
+<!-- /wp:navigation-submenu -->
 <!-- /wp:navigation -->"
 `;

package/specs/experiments/blocks/__snapshots__/navigation.test.js.snap

@@ -1,51 +1,61 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Navigation Creating from existing Menus allows a navigation block to be created from existing menus 1`] = `
-"<!-- wp:navigation {\\"orientation\\":\\"horizontal\\"} -->
+"<!-- wp:navigation -->
 <!-- wp:navigation-link {\\"label\\":\\"Home\\",\\"type\\":\\"custom\\",\\"url\\":\\"http://localhost:8889/\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":true} /-->
 
-<!-- wp:navigation-link {\\"label\\":\\"Accusamus quo repellat illum magnam quas\\",\\"type\\":\\"page\\",\\"id\\":41,\\"url\\":\\"http://localhost:8889/?page_id=41\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} -->
+<!-- wp:navigation-submenu {\\"label\\":\\"Accusamus quo repellat illum magnam quas\\",\\"type\\":\\"page\\",\\"id\\":41,\\"url\\":\\"http://localhost:8889/?page_id=41\\",\\"kind\\":\\"post-type\\",\\"isTopLevelItem\\":true} -->
 <!-- wp:navigation-link {\\"label\\":\\"Debitis cum consequatur sit doloremque\\",\\"type\\":\\"page\\",\\"id\\":51,\\"url\\":\\"http://localhost:8889/?page_id=51\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} /-->
-<!-- /wp:navigation-link -->
+<!-- /wp:navigation-submenu -->
 
-<!-- wp:navigation-link {\\"label\\":\\"Est ea vero non nihil officiis in\\",\\"type\\":\\"page\\",\\"id\\":53,\\"url\\":\\"http://localhost:8889/?page_id=53\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} -->
-<!-- wp:navigation-link {\\"label\\":\\"Fuga odio quis tempora\\",\\"type\\":\\"page\\",\\"id\\":56,\\"url\\":\\"http://localhost:8889/?page_id=56\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} -->
-<!-- wp:navigation-link {\\"label\\":\\"In consectetur repellendus eveniet maiores aperiam\\",\\"type\\":\\"page\\",\\"id\\":15,\\"url\\":\\"http://localhost:8889/?page_id=15\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} -->
-<!-- wp:navigation-link {\\"label\\":\\"Mollitia maiores consequatur ea dolorem blanditiis\\",\\"type\\":\\"page\\",\\"id\\":45,\\"url\\":\\"http://localhost:8889/?page_id=45\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} -->
+<!-- wp:navigation-submenu {\\"label\\":\\"Est ea vero non nihil officiis in\\",\\"type\\":\\"page\\",\\"id\\":53,\\"url\\":\\"http://localhost:8889/?page_id=53\\",\\"kind\\":\\"post-type\\",\\"isTopLevelItem\\":true} -->
+<!-- wp:navigation-submenu {\\"label\\":\\"Fuga odio quis tempora\\",\\"type\\":\\"page\\",\\"id\\":56,\\"url\\":\\"http://localhost:8889/?page_id=56\\",\\"kind\\":\\"post-type\\",\\"isTopLevelItem\\":false} -->
+<!-- wp:navigation-submenu {\\"label\\":\\"In consectetur repellendus eveniet maiores aperiam\\",\\"type\\":\\"page\\",\\"id\\":15,\\"url\\":\\"http://localhost:8889/?page_id=15\\",\\"kind\\":\\"post-type\\",\\"isTopLevelItem\\":false} -->
+<!-- wp:navigation-submenu {\\"label\\":\\"Mollitia maiores consequatur ea dolorem blanditiis\\",\\"type\\":\\"page\\",\\"id\\":45,\\"url\\":\\"http://localhost:8889/?page_id=45\\",\\"kind\\":\\"post-type\\",\\"isTopLevelItem\\":false} -->
 <!-- wp:navigation-link {\\"label\\":\\"Necessitatibus nisi qui qui necessitatibus quaerat possimus\\",\\"type\\":\\"page\\",\\"id\\":27,\\"url\\":\\"http://localhost:8889/?page_id=27\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} /-->
-<!-- /wp:navigation-link -->
-<!-- /wp:navigation-link -->
-<!-- /wp:navigation-link -->
-<!-- /wp:navigation-link -->
+<!-- /wp:navigation-submenu -->
+<!-- /wp:navigation-submenu -->
+<!-- /wp:navigation-submenu -->
+<!-- /wp:navigation-submenu -->
 
 <!-- wp:navigation-link {\\"label\\":\\"Nulla omnis autem dolores eligendi\\",\\"type\\":\\"page\\",\\"id\\":43,\\"url\\":\\"http://localhost:8889/?page_id=43\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} /-->
 
 <!-- wp:navigation-link {\\"label\\":\\"Sample Page\\",\\"type\\":\\"page\\",\\"id\\":2,\\"url\\":\\"http://localhost:8889/?page_id=2\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} /-->
 
-<!-- wp:navigation-link {\\"label\\":\\"Beatae qui labore voluptas eveniet officia quia voluptas qui porro sequi et aut est\\",\\"type\\":\\"category\\",\\"description\\":\\"Ratione nemo ut aut ullam sed assumenda quis est exercitationem\\",\\"id\\":7,\\"url\\":\\"http://localhost:8889/?cat=7\\",\\"kind\\":\\"taxonomy\\",\\"isTopLevelLink\\":true} -->
-<!-- wp:navigation-link {\\"label\\":\\"Et minus itaque velit tempore hic quisquam saepe quas asperiores\\",\\"type\\":\\"category\\",\\"description\\":\\"Vel fuga enim rerum perspiciatis sapiente mollitia magni ut molestiae labore quae quia quia libero perspiciatis voluptatem quidem deleniti eveniet laboriosam doloribus dolor laborum accusantium modi ducimus itaque rerum cum nostrum\\",\\"id\\":19,\\"url\\":\\"http://localhost:8889/?cat=19\\",\\"kind\\":\\"taxonomy\\",\\"isTopLevelLink\\":false} -->
-<!-- wp:navigation-link {\\"label\\":\\"Et quas a et mollitia et voluptas optio voluptate quia quo unde aut in nostrum iste impedit quisquam id aut\\",\\"type\\":\\"category\\",\\"description\\":\\"Quas sit labore earum omnis eos sint iste est possimus harum aut soluta sint optio quos distinctio inventore voluptate non ut aliquam ad ut voluptates fugiat numquam magnam modi repellendus modi laudantium et debitis officia est voluptatum quidem unde molestiae animi vero fuga accusamus nam\\",\\"id\\":6,\\"url\\":\\"http://localhost:8889/?cat=6\\",\\"kind\\":\\"taxonomy\\",\\"isTopLevelLink\\":false} -->
+<!-- wp:navigation-submenu {\\"label\\":\\"Beatae qui labore voluptas eveniet officia quia voluptas qui porro sequi et aut est\\",\\"type\\":\\"category\\",\\"description\\":\\"Ratione nemo ut aut ullam sed assumenda quis est exercitationem\\",\\"id\\":7,\\"url\\":\\"http://localhost:8889/?cat=7\\",\\"kind\\":\\"taxonomy\\",\\"isTopLevelItem\\":true} -->
+<!-- wp:navigation-submenu {\\"label\\":\\"Et minus itaque velit tempore hic quisquam saepe quas asperiores\\",\\"type\\":\\"category\\",\\"description\\":\\"Vel fuga enim rerum perspiciatis sapiente mollitia magni ut molestiae labore quae quia quia libero perspiciatis voluptatem quidem deleniti eveniet laboriosam doloribus dolor laborum accusantium modi ducimus itaque rerum cum nostrum\\",\\"id\\":19,\\"url\\":\\"http://localhost:8889/?cat=19\\",\\"kind\\":\\"taxonomy\\",\\"isTopLevelItem\\":false} -->
+<!-- wp:navigation-submenu {\\"label\\":\\"Et quas a et mollitia et voluptas optio voluptate quia quo unde aut in nostrum iste impedit quisquam id aut\\",\\"type\\":\\"category\\",\\"description\\":\\"Quas sit labore earum omnis eos sint iste est possimus harum aut soluta sint optio quos distinctio inventore voluptate non ut aliquam ad ut voluptates fugiat numquam magnam modi repellendus modi laudantium et debitis officia est voluptatum quidem unde molestiae animi vero fuga accusamus nam\\",\\"id\\":6,\\"url\\":\\"http://localhost:8889/?cat=6\\",\\"kind\\":\\"taxonomy\\",\\"isTopLevelItem\\":false} -->
 <!-- wp:navigation-link {\\"label\\":\\"Illo quis sit impedit itaque expedita earum deserunt magni doloremque velit eum id error\\",\\"type\\":\\"category\\",\\"description\\":\\"Doloremque vero sunt officiis iste voluptatibus voluptas molestiae sint asperiores recusandae amet praesentium et explicabo nesciunt similique voluptatum laudantium amet officiis quas distinctio quis enim nihil tempora\\",\\"id\\":16,\\"url\\":\\"http://localhost:8889/?cat=16\\",\\"kind\\":\\"taxonomy\\",\\"isTopLevelLink\\":false} /-->
-<!-- /wp:navigation-link -->
-<!-- /wp:navigation-link -->
-<!-- /wp:navigation-link -->
+<!-- /wp:navigation-submenu -->
+<!-- /wp:navigation-submenu -->
+<!-- /wp:navigation-submenu -->
 
-<!-- wp:navigation-link {\\"label\\":\\"WordPress.org\\",\\"type\\":\\"custom\\",\\"url\\":\\"https://wordpress.org\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":true} -->
+<!-- wp:navigation-submenu {\\"label\\":\\"WordPress.org\\",\\"type\\":\\"custom\\",\\"url\\":\\"https://wordpress.org\\",\\"kind\\":\\"custom\\",\\"isTopLevelItem\\":true} -->
 <!-- wp:navigation-link {\\"label\\":\\"Google\\",\\"type\\":\\"custom\\",\\"url\\":\\"https://google.com\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":false} /-->
-<!-- /wp:navigation-link -->
+<!-- /wp:navigation-submenu -->
 <!-- /wp:navigation -->"
 `;
 
-exports[`Navigation Creating from existing Menus creates an empty navigation block when the selected existing menu is also empty 1`] = `"<!-- wp:navigation {\\"orientation\\":\\"horizontal\\"} /-->"`;
+exports[`Navigation Creating from existing Menus creates an empty navigation block when the selected existing menu is also empty 1`] = `"<!-- wp:navigation /-->"`;
 
 exports[`Navigation Creating from existing Pages allows a navigation block to be created using existing pages 1`] = `
-"<!-- wp:navigation {\\"orientation\\":\\"horizontal\\"} -->
-<!-- wp:page-list /-->
+"<!-- wp:navigation -->
+<!-- wp:page-list {\\"isNavigationChild\\":true,\\"showSubmenuIcon\\":true,\\"openSubmenusOnClick\\":false} /-->
+<!-- /wp:navigation -->"
+`;
+
+exports[`Navigation Shows the quick inserter when the block contains non-navigation specific blocks 1`] = `
+"<!-- wp:navigation -->
+<!-- wp:navigation-link {\\"label\\":\\"WP\\",\\"url\\":\\"https://wordpress.org\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":true} /-->
+
+<!-- wp:site-title /-->
+
+<!-- wp:navigation-link {\\"label\\":\\"WP News\\",\\"url\\":\\"https://wordpress.org/news/\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":true} /-->
 <!-- /wp:navigation -->"
 `;
 
 exports[`Navigation allows an empty navigation block to be created and manually populated using a mixture of internal and external links 1`] = `
-"<!-- wp:navigation {\\"orientation\\":\\"horizontal\\"} -->
+"<!-- wp:navigation -->
 <!-- wp:navigation-link {\\"label\\":\\"WP\\",\\"url\\":\\"https://wordpress.org\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":true} /-->
 
 <!-- wp:navigation-link {\\"label\\":\\"Contact\\",\\"type\\":\\"page\\",\\"id\\":1,\\"url\\":\\"https://this/is/a/test/search/get-in-touch\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} /-->
@@ -53,13 +63,13 @@ exports[`Navigation allows an empty navigation block to be created and manually
 `;
 
 exports[`Navigation allows pages to be created from the navigation block and their links added to menu 1`] = `
-"<!-- wp:navigation {\\"orientation\\":\\"horizontal\\"} -->
+"<!-- wp:navigation -->
 <!-- wp:navigation-link {\\"label\\":\\"A really long page name that will not exist\\",\\"type\\":\\"page\\",\\"id\\":1,\\"url\\":\\"https://this/is/a/test/create/page/my-new-page\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} /-->
 <!-- /wp:navigation -->"
 `;
 
 exports[`Navigation encodes URL when create block if needed 1`] = `
-"<!-- wp:navigation {\\"orientation\\":\\"horizontal\\"} -->
+"<!-- wp:navigation -->
 <!-- wp:navigation-link {\\"label\\":\\"wordpress.org/шеллы\\",\\"url\\":\\"https://wordpress.org/%D1%88%D0%B5%D0%BB%D0%BB%D1%8B\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":true} /-->
 
 <!-- wp:navigation-link {\\"label\\":\\"お問い合わせ\\",\\"type\\":\\"page\\",\\"id\\":1,\\"url\\":\\"https://this/is/a/test/search/%E3%81%8A%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} /-->

package/specs/experiments/blocks/navigation.test.js

@@ -246,17 +246,6 @@ async function createEmptyNavBlock() {
 	await startEmptyButton.click();
 }
 
-async function addLinkBlock() {
-	// Using 'click' here checks for regressions of https://github.com/WordPress/gutenberg/issues/18329,
-	// an issue where the block appender requires two clicks.
-	await page.click( '.wp-block-navigation .block-list-appender' );
-
-	const [ linkButton ] = await page.$x(
-		"//*[contains(@class, 'block-editor-inserter__quick-inserter')]//*[text()='Custom Link']"
-	);
-	await linkButton.click();
-}
-
 async function toggleSidebar() {
 	await page.click(
 		'.edit-post-header__settings button[aria-label="Settings"]'
@@ -346,7 +335,7 @@ describe( 'Navigation', () => {
 			// Scope element selector to the Editor's "Content" region as otherwise it picks up on
 			// block previews.
 			const navLinkSelector =
-				'[aria-label="Editor content"][role="region"] div[aria-label="Block: Custom Link"]';
+				'[aria-label="Editor content"][role="region"] .wp-block-navigation-item';
 
 			await page.waitForSelector( navLinkSelector );
 
@@ -414,7 +403,7 @@ describe( 'Navigation', () => {
 
 		await createEmptyNavBlock();
 
-		await addLinkBlock();
+		await page.click( '.wp-block-navigation .block-list-appender' );
 
 		// Add a link to the Link block.
 		await updateActiveNavigationLink( {
@@ -425,7 +414,7 @@ describe( 'Navigation', () => {
 
 		await showBlockToolbar();
 
-		await addLinkBlock();
+		await page.click( '.wp-block-navigation .block-list-appender' );
 
 		// After adding a new block, search input should be shown immediately.
 		// Verify that Escape would close the popover.
@@ -477,7 +466,7 @@ describe( 'Navigation', () => {
 
 		await createEmptyNavBlock();
 
-		await addLinkBlock();
+		await page.click( '.wp-block-navigation .block-list-appender' );
 
 		// Add a link to the Link block.
 		await updateActiveNavigationLink( {
@@ -487,7 +476,7 @@ describe( 'Navigation', () => {
 
 		await showBlockToolbar();
 
-		await addLinkBlock();
+		await page.click( '.wp-block-navigation .block-list-appender' );
 
 		// Wait for URL input to be focused
 		await page.waitForSelector(
@@ -548,7 +537,7 @@ describe( 'Navigation', () => {
 		// Create an empty nav block.
 		await createEmptyNavBlock();
 
-		await addLinkBlock();
+		await page.click( '.wp-block-navigation .block-list-appender' );
 
 		// Wait for URL input to be focused
 		await page.waitForSelector(
@@ -595,6 +584,93 @@ describe( 'Navigation', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
+	it( 'allows navigation submenus to open on click instead of hover', async () => {
+		await mockAllMenusResponses();
+
+		// Add the navigation block.
+		await insertBlock( 'Navigation' );
+
+		await selectDropDownOption( 'Test Menu 2' );
+
+		// 	const blocks = await getAllBlocks();
+		// await selectBlockByClientId( blocks[ 0 ].clientId );
+
+		await toggleSidebar();
+
+		const [ openOnClickButton ] = await page.$x(
+			'//label[contains(text(),"Open submenus on click")]'
+		);
+
+		await openOnClickButton.click();
+
+		await saveDraft();
+
+		// Scope element selector to the Editor's "Content" region as otherwise it picks up on
+		// block previews.
+		const navSubmenuSelector =
+			'[aria-label="Editor content"][role="region"] [aria-label="Block: Submenu"]';
+
+		await page.waitForSelector( navSubmenuSelector );
+
+		const navSubmenusLength = await page.$$eval(
+			navSubmenuSelector,
+			( els ) => els.length
+		);
+
+		const navButtonTogglesSelector =
+			'[aria-label="Editor content"][role="region"] [aria-label="Block: Submenu"] button.wp-block-navigation-item__content';
+
+		await page.waitForSelector( navButtonTogglesSelector );
+
+		const navButtonTogglesLength = await page.$$eval(
+			navButtonTogglesSelector,
+			( els ) => els.length
+		);
+
+		// Assert the correct number of button toggles are present.
+		expect( navSubmenusLength ).toEqual( navButtonTogglesLength );
+	} );
+
+	it( 'Shows the quick inserter when the block contains non-navigation specific blocks', async () => {
+		// Add the navigation block.
+		await insertBlock( 'Navigation' );
+
+		// Create an empty nav block.
+		await page.waitForSelector( '.wp-block-navigation-placeholder' );
+
+		await createEmptyNavBlock();
+
+		// Add a Link block first.
+		await page.click( '.wp-block-navigation .block-list-appender' );
+
+		// Add a link to the Link block.
+		await updateActiveNavigationLink( {
+			url: 'https://wordpress.org',
+			label: 'WP',
+			type: 'url',
+		} );
+
+		// Now add a different block type.
+		await insertBlock( 'Site Title' );
+
+		// Now try inserting another Link block via the quick inserter.
+		await page.click( '.wp-block-navigation .block-list-appender' );
+
+		const linkButton = await page.waitForSelector(
+			'.block-editor-inserter__quick-inserter .editor-block-list-item-navigation-link'
+		);
+		await linkButton.click();
+
+		await updateActiveNavigationLink( {
+			url: 'https://wordpress.org/news/',
+			label: 'WP News',
+			type: 'url',
+		} );
+
+		// Expect a Navigation block with two links and a Site Title.
+		expect( await getEditedPostContent() ).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 () => {