@wordpress/e2e-tests 3.0.7 → 3.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "3.0.7",
+	"version": "3.0.8",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,10 +23,10 @@
 		"node": ">=12"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "^6.0.1",
+		"@wordpress/e2e-test-utils": "^6.0.2",
 		"@wordpress/jest-console": "^5.0.1",
 		"@wordpress/jest-puppeteer-axe": "^4.0.1",
-		"@wordpress/scripts": "^22.0.0",
+		"@wordpress/scripts": "^22.0.1",
 		"@wordpress/url": "^3.4.1",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
@@ -44,5 +44,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "f73c50580cc209814ec1a2ab8c85b69bd4220d3f"
+	"gitHead": "4566ac290359553d04de4eb574545309343f790b"
 }

package/specs/editor/blocks/__snapshots__/heading.test.js.snap

@@ -2,25 +2,25 @@
 
 exports[`Heading can be created by prefixing existing content with number signs and a space 1`] = `
 "<!-- wp:heading {\\"level\\":4} -->
-<h4 id=\\"4\\">4</h4>
+<h4>4</h4>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading can be created by prefixing number sign and a space 1`] = `
 "<!-- wp:heading {\\"level\\":3} -->
-<h3 id=\\"3\\">3</h3>
+<h3>3</h3>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading should correctly apply custom colors 1`] = `
 "<!-- wp:heading {\\"level\\":3,\\"style\\":{\\"color\\":{\\"text\\":\\"#0782f6\\"}}} -->
-<h3 class=\\"has-text-color\\" id=\\"heading\\" style=\\"color:#0782f6\\">Heading</h3>
+<h3 class=\\"has-text-color\\" style=\\"color:#0782f6\\">Heading</h3>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading should correctly apply named colors 1`] = `
 "<!-- wp:heading {\\"textColor\\":\\"luminous-vivid-orange\\"} -->
-<h2 class=\\"has-luminous-vivid-orange-color has-text-color\\" id=\\"heading\\">Heading</h2>
+<h2 class=\\"has-luminous-vivid-orange-color has-text-color\\">Heading</h2>
 <!-- /wp:heading -->"
 `;
 
@@ -30,13 +30,13 @@ exports[`Heading should create a paragraph block above when pressing enter at th
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2 id=\\"a\\">a</h2>
+<h2>a</h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading should create a paragraph block below when pressing enter at the end 1`] = `
 "<!-- wp:heading -->
-<h2 id=\\"a\\">a</h2>
+<h2>a</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -46,12 +46,12 @@ exports[`Heading should create a paragraph block below when pressing enter at th
 
 exports[`Heading should not work with the list input rule 1`] = `
 "<!-- wp:heading -->
-<h2 id=\\"1-h\\">1. H</h2>
+<h2>1. H</h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading should work with the format input rules 1`] = `
 "<!-- wp:heading -->
-<h2 id=\\"code\\"><code>code</code></h2>
+<h2><code>code</code></h2>
 <!-- /wp:heading -->"
 `;

package/specs/editor/blocks/__snapshots__/quote.test.js.snap

@@ -40,7 +40,7 @@ exports[`Quote can be converted to paragraphs and renders only one paragraph for
 
 exports[`Quote can be created by converting a heading 1`] = `
 "<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\" id=\\"test\\"><p>test</p></blockquote>
+<blockquote class=\\"wp-block-quote\\"><p>test</p></blockquote>
 <!-- /wp:quote -->"
 `;
 
@@ -144,7 +144,7 @@ exports[`Quote can be split in the middle and merged back 4`] = `
 
 exports[`Quote is transformed to a heading and a quote if the quote contains a citation 1`] = `
 "<!-- wp:heading -->
-<h2 id=\\"one\\">one</h2>
+<h2>one</h2>
 <!-- /wp:heading -->
 
 <!-- wp:quote -->
@@ -154,7 +154,7 @@ exports[`Quote is transformed to a heading and a quote if the quote contains a c
 
 exports[`Quote is transformed to a heading and a quote if the quote contains multiple paragraphs 1`] = `
 "<!-- wp:heading -->
-<h2 id=\\"one\\">one</h2>
+<h2>one</h2>
 <!-- /wp:heading -->
 
 <!-- wp:quote -->
@@ -164,7 +164,7 @@ exports[`Quote is transformed to a heading and a quote if the quote contains mul
 
 exports[`Quote is transformed to a heading if the quote just contains one paragraph 1`] = `
 "<!-- wp:heading -->
-<h2 id=\\"one\\">one</h2>
+<h2>one</h2>
 <!-- /wp:heading -->"
 `;
 
@@ -176,7 +176,7 @@ exports[`Quote is transformed to an empty heading if the quote is empty 1`] = `
 
 exports[`Quote the resuling quote after transforming to a heading can be transformed again 1`] = `
 "<!-- wp:heading -->
-<h2 id=\\"one\\">one</h2>
+<h2>one</h2>
 <!-- /wp:heading -->
 
 <!-- wp:quote -->
@@ -186,11 +186,11 @@ exports[`Quote the resuling quote after transforming to a heading can be transfo
 
 exports[`Quote the resuling quote after transforming to a heading can be transformed again 2`] = `
 "<!-- wp:heading -->
-<h2 id=\\"one\\">one</h2>
+<h2>one</h2>
 <!-- /wp:heading -->
 
 <!-- wp:heading -->
-<h2 id=\\"two\\">two</h2>
+<h2>two</h2>
 <!-- /wp:heading -->
 
 <!-- wp:quote -->
@@ -200,14 +200,14 @@ exports[`Quote the resuling quote after transforming to a heading can be transfo
 
 exports[`Quote the resuling quote after transforming to a heading can be transformed again 3`] = `
 "<!-- wp:heading -->
-<h2 id=\\"one\\">one</h2>
+<h2>one</h2>
 <!-- /wp:heading -->
 
 <!-- wp:heading -->
-<h2 id=\\"two\\">two</h2>
+<h2>two</h2>
 <!-- /wp:heading -->
 
 <!-- wp:heading -->
-<h2 id=\\"cite\\">cite</h2>
+<h2>cite</h2>
 <!-- /wp:heading -->"
 `;

package/specs/editor/blocks/image.test.js

@@ -103,9 +103,10 @@ describe( 'Image', () => {
 			`<!-- wp:image {"id":\\d+,"sizeSlug":"full","linkDestination":"none"} -->\\s*<figure class="wp-block-image size-full"><img src="[^"]+\\/${ filename2 }\\.png" alt="" class="wp-image-\\d+"/></figure>\\s*<!-- \\/wp:image -->`
 		);
 		expect( await getEditedPostContent() ).toMatch( regex3 );
-		// For some reason just clicking the block wrapper causes figcaption to get focus
-		// in puppeteer but not in live browser, so clicking on the image wrapper div here instead.
-		await page.click( '.wp-block-image > div' );
+		// Focus outside the block to avoid the image caption being selected
+		// It can happen on CI specially.
+		await page.click( '.wp-block-post-title' );
+		await page.click( '.wp-block-image img' );
 		await page.keyboard.press( 'Backspace' );
 
 		expect( await getEditedPostContent() ).toBe( '' );

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

@@ -26,6 +26,7 @@ import {
 	loginUser,
 	deleteUser,
 	switchUserToAdmin,
+	clickBlockToolbarButton,
 } from '@wordpress/e2e-test-utils';
 import { addQueryArgs } from '@wordpress/url';
 
@@ -119,6 +120,25 @@ async function selectClassicMenu( optionText ) {
 		`//*[contains(@class, 'components-menu-item__item')][ text()="${ optionText }" ]`
 	);
 	await theOption.click();
+
+	await page.waitForResponse(
+		( response ) =>
+			response.url().includes( 'menu-items' ) && response.status() === 200
+	);
+}
+
+async function populateNavWithOneItem() {
+	// Add a Link block first.
+	const appender = await page.waitForSelector(
+		'.wp-block-navigation .block-list-appender'
+	);
+	await appender.click();
+	// Add a link to the Link block.
+	await updateActiveNavigationLink( {
+		url: 'https://wordpress.org',
+		label: 'WP',
+		type: 'url',
+	} );
 }
 
 const PLACEHOLDER_ACTIONS_CLASS = 'wp-block-navigation-placeholder__actions';
@@ -194,6 +214,13 @@ async function getNavigationMenuRawContent() {
 	return stripPageIds( response.content.raw );
 }
 
+async function waitForBlock( blockName ) {
+	const blockSelector = `[aria-label="Editor content"][role="region"] [aria-label="Block: ${ blockName }"]`;
+
+	// Wait for a Submenu block before making assertion.
+	return page.waitForSelector( blockSelector );
+}
+
 // Disable reason - these tests are to be re-written.
 // eslint-disable-next-line jest/no-disabled-tests
 describe( 'Navigation', () => {
@@ -575,20 +602,6 @@ describe( 'Navigation', () => {
 		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(
-				'.wp-block-navigation .block-list-appender'
-			);
-			await appender.click();
-			// Add a link to the Link block.
-			await updateActiveNavigationLink( {
-				url: 'https://wordpress.org',
-				label: 'WP',
-				type: 'url',
-			} );
-		}
-
 		async function resetNavBlockToInitialState() {
 			const selectMenuDropdown = await page.waitForSelector(
 				'[aria-label="Select Menu"]'
@@ -731,6 +744,113 @@ describe( 'Navigation', () => {
 		expect( tagCount ).toBe( 1 );
 	} );
 
+	describe( 'Submenus', () => {
+		it( 'shows button which converts submenu to link when submenu is not-populated (empty)', async () => {
+			const navSubmenuSelector = `[aria-label="Editor content"][role="region"] [aria-label="Block: Submenu"]`;
+
+			await createNewPost();
+			await insertBlock( 'Navigation' );
+
+			const startEmptyButton = await page.waitForXPath(
+				START_EMPTY_XPATH
+			);
+
+			await startEmptyButton.click();
+
+			await populateNavWithOneItem();
+
+			await clickBlockToolbarButton( 'Add submenu' );
+
+			await waitForBlock( 'Submenu' );
+
+			// Revert the Submenu back to a Navigation Link block.
+			await clickBlockToolbarButton( 'Convert to Link' );
+
+			// Check the Submenu block is no longer present.
+			const submenuBlock = await page.$( navSubmenuSelector );
+
+			expect( submenuBlock ).toBeFalsy();
+		} );
+
+		it( 'shows button to convert submenu to link in disabled state when submenu is populated', async () => {
+			await createNewPost();
+			await insertBlock( 'Navigation' );
+
+			const startEmptyButton = await page.waitForXPath(
+				START_EMPTY_XPATH
+			);
+
+			await startEmptyButton.click();
+
+			await populateNavWithOneItem();
+
+			await clickBlockToolbarButton( 'Add submenu' );
+
+			await waitForBlock( 'Submenu' );
+
+			// Add a Link block first.
+			const appender = await page.waitForSelector(
+				'[aria-label="Block: Submenu"] [aria-label="Add block"]'
+			);
+
+			await appender.click();
+
+			await updateActiveNavigationLink( {
+				url: 'https://make.wordpress.org/core/',
+				label: 'Submenu item #1',
+				type: 'url',
+			} );
+
+			await clickBlockToolbarButton( 'Select Submenu' );
+
+			// Check button exists but is in disabled state.
+			const disabledConvertToLinkButton = await page.$(
+				'[aria-label="Block tools"] [aria-label="Convert to Link"][disabled]'
+			);
+
+			expect( disabledConvertToLinkButton ).toBeTruthy();
+		} );
+
+		it( 'shows button to convert submenu to link when submenu is populated with a single incomplete link item', async () => {
+			// For context on why this test is required please see:
+			// https://github.com/WordPress/gutenberg/pull/38203#issuecomment-1027672948.
+
+			await createNewPost();
+			await insertBlock( 'Navigation' );
+
+			const startEmptyButton = await page.waitForXPath(
+				START_EMPTY_XPATH
+			);
+
+			await startEmptyButton.click();
+
+			await populateNavWithOneItem();
+
+			await clickBlockToolbarButton( 'Add submenu' );
+
+			await waitForBlock( 'Submenu' );
+
+			// Add a Link block first.
+			const appender = await page.waitForSelector(
+				'[aria-label="Block: Submenu"] [aria-label="Add block"]'
+			);
+
+			await appender.click();
+
+			// Here we intentionally do not populate the inserted Navigation Link block.
+			// Rather we immediaely click away leaving the link in a state where it has
+			// no URL of label and can be considered unpopulated.
+			await clickBlockToolbarButton( 'Select Submenu' );
+
+			// Check for non-disabled Convert to Link button
+			const convertToLinkButton = await page.$(
+				'[aria-label="Block tools"] [aria-label="Convert to Link"]:not([disabled])'
+			);
+
+			expect( convertToLinkButton ).toBeTruthy();
+		} );
+	} );
+
 	describe( 'Permission based restrictions', () => {
 		afterEach( async () => {
 			await switchUserToAdmin();

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

@@ -3,7 +3,7 @@
 exports[`Block Grouping Group creation creates a group from multiple blocks of different types via block transforms 1`] = `
 "<!-- wp:group -->
 <div class=\\"wp-block-group\\"><!-- wp:heading -->
-<h2 id=\\"group-heading\\">Group Heading</h2>
+<h2>Group Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:image -->
@@ -51,7 +51,7 @@ exports[`Block Grouping Group creation creates a group from multiple blocks of t
 exports[`Block Grouping Group creation groups and ungroups multiple blocks of different types via options toolbar 1`] = `
 "<!-- wp:group -->
 <div class=\\"wp-block-group\\"><!-- wp:heading -->
-<h2 id=\\"group-heading\\">Group Heading</h2>
+<h2>Group Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:image -->
@@ -66,7 +66,7 @@ exports[`Block Grouping Group creation groups and ungroups multiple blocks of di
 
 exports[`Block Grouping Group creation groups and ungroups multiple blocks of different types via options toolbar 2`] = `
 "<!-- wp:heading -->
-<h2 id=\\"group-heading\\">Group Heading</h2>
+<h2>Group Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:image -->
@@ -81,7 +81,7 @@ exports[`Block Grouping Group creation groups and ungroups multiple blocks of di
 exports[`Block Grouping Preserving selected blocks attributes preserves width alignment settings of selected blocks 1`] = `
 "<!-- wp:group {\\"align\\":\\"full\\"} -->
 <div class=\\"wp-block-group alignfull\\"><!-- wp:heading -->
-<h2 id=\\"group-heading\\">Group Heading</h2>
+<h2>Group Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:image {\\"align\\":\\"full\\"} -->

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

@@ -71,7 +71,7 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2 id=\\"heading\\">Heading</h2>
+<h2>Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -93,7 +93,7 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
 <!-- /wp:cover -->
 
 <!-- wp:heading -->
-<h2 id=\\"heading\\">Heading</h2>
+<h2>Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->

package/specs/editor/various/__snapshots__/keep-styles-on-block-transforms.test.js.snap

@@ -14,15 +14,15 @@ exports[`Keep styles on block transforms Should keep the font size during a tran
 
 exports[`Keep styles on block transforms Should keep the font size during a transform from multiple blocks into multiple blocks 1`] = `
 "<!-- wp:heading {\\"fontSize\\":\\"large\\"} -->
-<h2 class=\\"has-large-font-size\\" id=\\"line-1-to-be-made-large\\">Line 1 to be made large</h2>
+<h2 class=\\"has-large-font-size\\">Line 1 to be made large</h2>
 <!-- /wp:heading -->
 
 <!-- wp:heading {\\"fontSize\\":\\"large\\"} -->
-<h2 class=\\"has-large-font-size\\" id=\\"line-2-to-be-made-large\\">Line 2 to be made large</h2>
+<h2 class=\\"has-large-font-size\\">Line 2 to be made large</h2>
 <!-- /wp:heading -->
 
 <!-- wp:heading {\\"fontSize\\":\\"large\\"} -->
-<h2 class=\\"has-large-font-size\\" id=\\"line-3-to-be-made-large\\">Line 3 to be made large</h2>
+<h2 class=\\"has-large-font-size\\">Line 3 to be made large</h2>
 <!-- /wp:heading -->"
 `;
 

package/specs/editor/various/list-view.test.js

@@ -5,7 +5,9 @@ import {
 	createNewPost,
 	insertBlock,
 	getEditedPostContent,
+	openListView,
 	pressKeyWithModifier,
+	pressKeyTimes,
 } from '@wordpress/e2e-test-utils';
 
 async function dragAndDrop( draggableElement, targetElement, offsetY ) {
@@ -19,6 +21,10 @@ async function dragAndDrop( draggableElement, targetElement, offsetY ) {
 	return await page.mouse.dragAndDrop( draggablePoint, targetPoint );
 }
 
+async function getBlockListLeafNodes() {
+	return await page.$$( '.block-editor-list-view-leaf' );
+}
+
 describe( 'List view', () => {
 	beforeAll( async () => {
 		await page.setDragInterception( true );
@@ -54,4 +60,93 @@ describe( 'List view', () => {
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	// Check for regressions of https://github.com/WordPress/gutenberg/issues/38763.
+	it( 'shows the correct amount of blocks after a block is removed in the canvas', async () => {
+		// Insert some blocks of different types.
+		await insertBlock( 'Image' );
+		await insertBlock( 'Heading' );
+		await insertBlock( 'Paragraph' );
+
+		// Open list view.
+		await pressKeyWithModifier( 'access', 'o' );
+
+		// The last inserted paragraph block should be selected in List View.
+		await page.waitForXPath(
+			'//a[contains(., "Paragraph(selected block)")]'
+		);
+
+		// Go to the image block in list view.
+		await pressKeyTimes( 'ArrowUp', 2 );
+		const listViewImageBlock = await page.waitForXPath(
+			'//a[contains(., "Image")]'
+		);
+		expect( listViewImageBlock ).toHaveFocus();
+
+		// Select the image block in the canvas.
+		await page.keyboard.press( 'Enter' );
+
+		const canvasImageBlock = await page.waitForSelector(
+			'figure[aria-label="Block: Image"]'
+		);
+		expect( canvasImageBlock ).toHaveFocus();
+
+		// Delete the image block in the canvas.
+		await page.keyboard.press( 'Backspace' );
+
+		// List view should have two rows.
+		const listViewRows = await page.$$( 'tr.block-editor-list-view-leaf' );
+		expect( listViewRows ).toHaveLength( 2 );
+
+		// The console didn't throw an error as reported in
+		// https://github.com/WordPress/gutenberg/issues/38763.
+		expect( console ).not.toHaveErrored();
+	} );
+
+	it( 'should expand nested list items', async () => {
+		// Insert some blocks of different types.
+		await insertBlock( 'Cover' );
+
+		// Click first color option from the block placeholder's color picker to make the inner blocks appear.
+		const colorPickerButton = await page.waitForSelector(
+			'.wp-block-cover__placeholder-background-options .components-circular-option-picker__option-wrapper:first-child button'
+		);
+		await colorPickerButton.click();
+
+		// Open list view.
+		await openListView();
+
+		// Things start off expanded.
+		expect( await getBlockListLeafNodes() ).toHaveLength( 2 );
+
+		const blockListExpanders = await page.$$(
+			'.block-editor-list-view__expander'
+		);
+
+		// Collapse the first block
+		await blockListExpanders[ 0 ].click();
+
+		// Check that we're collapsed
+		expect( await getBlockListLeafNodes() ).toHaveLength( 1 );
+
+		// Focus the cover block. The paragraph is not focussed by default.
+		const coverBlock = await page.waitForSelector( '.wp-block-cover' );
+
+		await coverBlock.focus();
+
+		// Click the cover title placeholder.
+		const coverTitle = await page.waitForSelector(
+			'.wp-block-cover .wp-block-paragraph'
+		);
+
+		await coverTitle.click();
+
+		// The block list should contain two leafs and the second should be selected (and be a paragraph).
+		const selectedElementText = await page.$eval(
+			'.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents',
+			( element ) => element.innerText
+		);
+
+		expect( selectedElementText ).toContain( 'Paragraph' );
+	} );
 } );

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

@@ -10,6 +10,7 @@ import {
 	clickBlockToolbarButton,
 	clickButton,
 	clickMenuItem,
+	openListView,
 	saveDraft,
 	transformBlockTo,
 } from '@wordpress/e2e-test-utils';
@@ -747,4 +748,87 @@ describe( 'Multi-block selection', () => {
 		} );
 		expect( selectedText ).toEqual( 'Post title' );
 	} );
+
+	it( 'should multi-select in the ListView component with shift + click', async () => {
+		// Create four blocks.
+		await clickBlockAppender();
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '2' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '3' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '4' );
+
+		// Open up the list view, and get a reference to each of the list items.
+		await openListView();
+		const navButtons = await page.$$(
+			'.block-editor-list-view-block-select-button'
+		);
+
+		// Clicking on the second list item should result in the second block being selected.
+		await navButtons[ 1 ].click();
+		expect( await getSelectedFlatIndices() ).toEqual( 2 );
+
+		// Shift clicking the fourth list item should result in blocks 2 through 4 being selected.
+		await page.keyboard.down( 'Shift' );
+		await navButtons[ 3 ].click();
+		expect( await getSelectedFlatIndices() ).toEqual( [ 2, 3, 4 ] );
+
+		// With the shift key still held down, clicking the first block should result in
+		// the first two blocks being selected.
+		await navButtons[ 0 ].click();
+		expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2 ] );
+
+		// With the shift key up, clicking the fourth block should result in only that block
+		// being selected.
+		await page.keyboard.up( 'Shift' );
+		await navButtons[ 3 ].click();
+		expect( await getSelectedFlatIndices() ).toEqual( 4 );
+	} );
+
+	it( 'should multi-select in the ListView component with shift + up and down keys', async () => {
+		// Create four blocks.
+		await clickBlockAppender();
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '2' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '3' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '4' );
+
+		// Open up the list view. The fourth block button will be focused.
+		await openListView();
+
+		// Press Up twice to focus over the second block.
+		await pressKeyTimes( 'ArrowUp', 2 );
+
+		// Shift + press Down to select the 2nd and 3rd blocks.
+		await page.keyboard.down( 'Shift' );
+		await page.keyboard.press( 'ArrowDown' );
+		expect( await getSelectedFlatIndices() ).toEqual( [ 2, 3 ] );
+
+		// Press Down once more to also select the 4th block.
+		await page.keyboard.press( 'ArrowDown' );
+		expect( await getSelectedFlatIndices() ).toEqual( [ 2, 3, 4 ] );
+
+		// Press Up three times to adjust the selection to only include the first two blocks.
+		await pressKeyTimes( 'ArrowUp', 3 );
+		expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2 ] );
+
+		// Raise the shift key
+		await page.keyboard.up( 'Shift' );
+
+		// Navigate to the bottom of the list of blocks.
+		await pressKeyTimes( 'ArrowDown', 3 );
+
+		// Shift + press UP to select the 3rd and 4th blocks.
+		// This tests that shift selecting blocks by keyboard that are not adjacent
+		// to an existing selection resets the selection.
+		await page.keyboard.down( 'Shift' );
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.up( 'Shift' );
+		expect( await getSelectedFlatIndices() ).toEqual( [ 3, 4 ] );
+	} );
 } );