@wordpress/e2e-tests 2.5.0 → 2.5.1

package/specs/editor/various/__snapshots__/copy-cut-paste-whole-blocks.test.js.snap

@@ -1,5 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Copy/cut/paste of whole blocks can copy group onto non textual element (image, spacer) 1`] = `""`;
+
+exports[`Copy/cut/paste of whole blocks can copy group onto non textual element (image, spacer) 2`] = `
+"<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:group -->
+<div class=\\"wp-block-group\\"><!-- wp:paragraph -->
+<p>P</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->"
+`;
+
 exports[`Copy/cut/paste of whole blocks should copy and paste individual blocks 1`] = `
 "<!-- wp:paragraph -->
 <p>Here is a unique string so we can test copying.</p>
@@ -56,6 +70,20 @@ exports[`Copy/cut/paste of whole blocks should cut and paste individual blocks 2
 <!-- /wp:paragraph -->"
 `;
 
+exports[`Copy/cut/paste of whole blocks should handle paste events once 1`] = `""`;
+
+exports[`Copy/cut/paste of whole blocks should handle paste events once 2`] = `
+"<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:group -->
+<div class=\\"wp-block-group\\"><!-- wp:paragraph -->
+<p>P</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->"
+`;
+
 exports[`Copy/cut/paste of whole blocks should respect inline copy in places like input fields and textareas 1`] = `
 "<!-- wp:shortcode -->
 [my-shortcode]

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

@@ -54,6 +54,18 @@ exports[`RichText should navigate arround emoji 1`] = `
 <!-- /wp:paragraph -->"
 `;
 
+exports[`RichText should navigate consecutive format boundaries 1`] = `
+"<!-- wp:paragraph -->
+<p><strong>1</strong><em>2</em></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`RichText should navigate consecutive format boundaries 2`] = `
+"<!-- wp:paragraph -->
+<p><strong>1</strong>-<em>2</em></p>
+<!-- /wp:paragraph -->"
+`;
+
 exports[`RichText should not format text after code backtick 1`] = `
 "<!-- wp:paragraph -->
 <p>A <code>backtick</code> and more.</p>
@@ -90,17 +102,17 @@ exports[`RichText should only mutate text data on input 1`] = `
 
 exports[`RichText should preserve internal formatting 1`] = `
 "<!-- wp:paragraph -->
-<p><span class=\\"has-inline-color has-cyan-bluish-gray-color\\">1</span></p>
+<p><mark style=\\"background-color:rgba(0, 0, 0, 0)\\" class=\\"has-inline-color has-cyan-bluish-gray-color\\">1</mark></p>
 <!-- /wp:paragraph -->"
 `;
 
 exports[`RichText should preserve internal formatting 2`] = `
 "<!-- wp:paragraph -->
-<p><span class=\\"has-inline-color has-cyan-bluish-gray-color\\">1</span></p>
+<p><mark style=\\"background-color:rgba(0, 0, 0, 0)\\" class=\\"has-inline-color has-cyan-bluish-gray-color\\">1</mark></p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p><span class=\\"has-inline-color has-cyan-bluish-gray-color\\">1</span></p>
+<p><mark style=\\"background-color:rgba(0, 0, 0, 0)\\" class=\\"has-inline-color has-cyan-bluish-gray-color\\">1</mark></p>
 <!-- /wp:paragraph -->"
 `;
 

package/specs/editor/various/block-grouping.test.js

@@ -163,7 +163,7 @@ describe( 'Block Grouping', () => {
 			await insertBlock( 'Image' );
 			await clickBlockToolbarButton( 'Align' );
 			const fullButton = await page.waitForXPath(
-				`//button[contains(@class,'components-dropdown-menu__menu-item') and contains(text(), 'Full width')]`
+				`//button[contains(@class,'components-dropdown-menu__menu-item')]//span[contains(text(), 'Full width')]`
 			);
 			await fullButton.evaluate( ( element ) =>
 				element.scrollIntoView()
@@ -174,7 +174,7 @@ describe( 'Block Grouping', () => {
 			await insertBlock( 'Image' );
 			await clickBlockToolbarButton( 'Align' );
 			const wideButton = await page.waitForXPath(
-				`//button[contains(@class,'components-dropdown-menu__menu-item') and contains(text(), 'Wide width')]`
+				`//button[contains(@class,'components-dropdown-menu__menu-item')]//span[contains(text(), 'Wide width')]`
 			);
 			await wideButton.evaluate( ( element ) =>
 				element.scrollIntoView()

package/specs/editor/various/copy-cut-paste-whole-blocks.test.js

@@ -92,4 +92,96 @@ describe( 'Copy/cut/paste of whole blocks', () => {
 		await pressKeyWithModifier( 'primary', 'v' );
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	it( 'should handle paste events once', async () => {
+		// Add group block with paragraph
+		await insertBlock( 'Group' );
+		await page.click( '.block-editor-button-block-appender' );
+		await page.click( '.editor-block-list-item-paragraph' );
+		await page.keyboard.type( 'P' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'ArrowLeft' );
+		// Cut group
+		await pressKeyWithModifier( 'primary', 'x' );
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		await page.keyboard.press( 'Enter' );
+
+		await page.evaluate( () => {
+			window.e2eTestPasteOnce = [];
+			let oldBlocks = wp.data.select( 'core/block-editor' ).getBlocks();
+			wp.data.subscribe( () => {
+				const blocks = wp.data
+					.select( 'core/block-editor' )
+					.getBlocks();
+				if ( blocks !== oldBlocks ) {
+					window.e2eTestPasteOnce.push(
+						blocks.map( ( { clientId, name } ) => ( {
+							clientId,
+							name,
+						} ) )
+					);
+				}
+				oldBlocks = blocks;
+			} );
+		} );
+
+		// Paste
+		await pressKeyWithModifier( 'primary', 'v' );
+
+		// Blocks should only be modified once, not twice with new clientIds on a single paste action
+		const blocksUpdated = await page.evaluate(
+			() => window.e2eTestPasteOnce
+		);
+
+		expect( blocksUpdated.length ).toEqual( 1 );
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'can copy group onto non textual element (image, spacer)', async () => {
+		// Add group block with paragraph
+		await insertBlock( 'Group' );
+		await page.click( '.block-editor-button-block-appender' );
+		await page.click( '.editor-block-list-item-paragraph' );
+		await page.keyboard.type( 'P' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'ArrowLeft' );
+		// Cut group
+		await pressKeyWithModifier( 'primary', 'x' );
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		await page.keyboard.press( 'Enter' );
+
+		// Insert a non textual element (a spacer)
+		await insertBlock( 'Spacer' );
+		// Spacer is focused
+		await page.evaluate( () => {
+			window.e2eTestPasteOnce = [];
+			let oldBlocks = wp.data.select( 'core/block-editor' ).getBlocks();
+			wp.data.subscribe( () => {
+				const blocks = wp.data
+					.select( 'core/block-editor' )
+					.getBlocks();
+				if ( blocks !== oldBlocks ) {
+					window.e2eTestPasteOnce.push(
+						blocks.map( ( { clientId, name } ) => ( {
+							clientId,
+							name,
+						} ) )
+					);
+				}
+				oldBlocks = blocks;
+			} );
+		} );
+
+		await pressKeyWithModifier( 'primary', 'v' );
+
+		// Paste should be handled on non-textual elements and only handled once.
+		const blocksUpdated = await page.evaluate(
+			() => window.e2eTestPasteOnce
+		);
+
+		expect( blocksUpdated.length ).toEqual( 1 );
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );

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

@@ -17,7 +17,7 @@ import {
 const MOCK_EMBED_WORDPRESS_SUCCESS_RESPONSE = {
 	url: 'https://wordpress.org/gutenberg/handbook/block-api/attributes/',
 	html:
-		'<div class="wp-embedded-content" data-secret="shhhh it is a secret">WordPress embed</div>',
+		'<div class="wp-embedded-content" data-secret="shhhh it is a secret"></div>',
 	type: 'rich',
 	provider_name: 'WordPress',
 	provider_url: 'https://wordpress.org',

package/specs/editor/various/inserting-blocks.test.js

@@ -11,6 +11,7 @@ import {
 	searchForBlock,
 	setBrowserViewport,
 	showBlockToolbar,
+	pressKeyWithModifier,
 } from '@wordpress/e2e-test-utils';
 
 /** @typedef {import('puppeteer').ElementHandle} ElementHandle */
@@ -354,6 +355,28 @@ describe( 'Inserting blocks', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
+	it( 'passes the search value in the main inserter when clicking `Browse all`', async () => {
+		const INSERTER_SEARCH_SELECTOR =
+			'.block-editor-inserter__search input,.block-editor-inserter__search-input,input.block-editor-inserter__search';
+		await insertBlock( 'Group' );
+		await insertBlock( 'Paragraph' );
+		await page.keyboard.type( 'Text' );
+		await page.click( '[data-type="core/group"] [aria-label="Add block"]' );
+		await page.waitForSelector( INSERTER_SEARCH_SELECTOR );
+		await page.focus( INSERTER_SEARCH_SELECTOR );
+		await pressKeyWithModifier( 'primary', 'a' );
+		const searchTerm = 'Heading';
+		await page.keyboard.type( searchTerm );
+		const browseAll = await page.waitForXPath(
+			'//button[text()="Browse all"]'
+		);
+		await browseAll.click();
+		const availableBlocks = await page.$$(
+			'.block-editor-block-types-list__list-item'
+		);
+		expect( availableBlocks ).toHaveLength( 1 );
+	} );
+
 	// Check for regression of https://github.com/WordPress/gutenberg/issues/27586
 	it( 'closes the main inserter after inserting a single-use block, like the More block', async () => {
 		await insertBlock( 'More' );

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/writing-flow.test.js

@@ -9,7 +9,6 @@ import {
 	pressKeyWithModifier,
 	insertBlock,
 	clickBlockToolbarButton,
-	clickButton,
 } from '@wordpress/e2e-test-utils';
 
 const getActiveBlockName = async () =>
@@ -556,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:navigation-link {\\"label\\":\\"My page\\",\\"type\\":\\"page\\",\\"id\\":1,\\"url\\":\\"https://example.com/1\\",\\"isTopLevelLink\\":true} /-->
+<!-- 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

@@ -4,35 +4,35 @@ exports[`Navigation Creating from existing Menus allows a navigation block to be
 "<!-- 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 -->"
 `;
 
@@ -40,7 +40,17 @@ exports[`Navigation Creating from existing Menus creates an empty navigation blo
 
 exports[`Navigation Creating from existing Pages allows a navigation block to be created using existing pages 1`] = `
 "<!-- wp:navigation -->
-<!-- wp:page-list {\\"isNavigationChild\\":true} /-->
+<!-- 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 -->"
 `;
 

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 () => {