change shortcuts, improve tests, and show empty navigator when no blo…

…cks exist

packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js

@@ -45,7 +45,7 @@ const globalShortcuts = {
 			ariaLabel: shortcutAriaLabel.primaryShift( ',' ),
 		},
 		{
-			keyCombination: access( 'b' ),
+			keyCombination: access( 'l' ),
 			description: __( 'Open the block navigation menu.' ),
 		},
 		{

packages/editor/src/components/block-navigation/dropdown.js

@@ -25,7 +25,7 @@ function BlockNavigationDropdown() {
 					<KeyboardShortcuts
 						bindGlobal
 						shortcuts={ {
-							[ rawShortcut.access( 'b' ) ]: onToggle,
+							[ rawShortcut.access( 'l' ) ]: onToggle,
 						} }
 					/>
 					<IconButton

packages/editor/src/components/block-navigation/index.js

@@ -82,6 +82,13 @@ function BlockNavigation( { rootBlock, rootBlocks, selectedBlockClientId, select
 					selectBlock={ selectBlock }
 				/>
 			) }
+			{ ( ! rootBlocks || rootBlocks.length === 0 ) && (
+				// If there are no blocks in this document, don't render a list of blocks.
+				// Instead: inform the user no blocks exist yet.
+				<p className="editor-block-navigation__paragraph">
+					{ __( 'No blocks created yet.' ) }
+				</p>
+			) }
 		</MenuGroup>
 	);
 }

packages/editor/src/components/block-navigation/style.scss

@@ -1,7 +1,8 @@
 $tree-border-width: 2px;
 $tree-item-height: 36px;
 
-.editor-block-navigation__list {
+.editor-block-navigation__list,
+.editor-block-navigation__paragraph {
 	padding: 0;
 	margin: 0;
 }

test/e2e/specs/__snapshots__/block-hierarchy-navigation.test.js.snap

@@ -1,6 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Navigating the block hierarchy Should navigate using the block hierarchy dropdown menu 1`] = `
+exports[`Navigating the block hierarchy should appear and function even without nested blocks 1`] = `
+"<!-- wp:paragraph -->
+<p>and I say hello</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:image -->
+<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Navigating the block hierarchy should navigate block hierarchy using only the keyboard 1`] = `
+"<!-- wp:columns {\\"columns\\":3} -->
+<div class=\\"wp-block-columns has-3-columns\\"><!-- wp:column -->
+<div class=\\"wp-block-column\\"><!-- wp:paragraph -->
+<p>First column</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class=\\"wp-block-column\\"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class=\\"wp-block-column\\"><!-- wp:paragraph -->
+<p>Third column</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Navigating the block hierarchy should navigate using the block hierarchy dropdown menu 1`] = `
 "<!-- wp:columns {\\"columns\\":3} -->
 <div class=\\"wp-block-columns has-3-columns\\"><!-- wp:column -->
 <div class=\\"wp-block-column\\"><!-- wp:paragraph -->

test/e2e/specs/block-hierarchy-navigation.test.js

@@ -2,44 +2,113 @@
  * Internal dependencies
  */
 import {
+	ACCESS_MODIFIER_KEYS,
+	META_KEY,
 	newPost,
 	insertBlock,
 	getEditedPostContent,
 	pressTimes,
+	pressWithModifier,
 } from '../support/utils';
 
 describe( 'Navigating the block hierarchy', () => {
-	beforeAll( async () => {
+	beforeEach( async () => {
 		await newPost();
 	} );
 
-	it( 'Should navigate using the block hierarchy dropdown menu', async () => {
+	it( 'should navigate using the block hierarchy dropdown menu', async () => {
 		await insertBlock( 'Columns (beta)' );
 
-		// Add a paragraph in the first column
+		// Add a paragraph in the first column.
 		await page.keyboard.type( 'First column' );
 
-		// Navigate to the columns blocks
+		// Navigate to the columns blocks.
 		await page.click( '[aria-label="Block Navigation"]' );
 		const columnsBlockMenuItem = ( await page.$x( "//button[contains(@class,'editor-block-navigation__item') and contains(text(), 'Columns (beta)')]" ) )[ 0 ];
 		await columnsBlockMenuItem.click();
 
-		// Tweak the columns count
+		// Tweak the columns count.
 		await page.focus( '.edit-post-block-sidebar__panel .components-range-control__number[aria-label="Columns"]' );
 		page.keyboard.down( 'Shift' );
 		page.keyboard.press( 'ArrowLeft' );
 		page.keyboard.up( 'Shift' );
 		page.keyboard.type( '3' );
 
-		// Navigate to the last column blosck
+		// Navigate to the last column block.
 		await page.click( '[aria-label="Block Navigation"]' );
-		const lastColumnsBlockMenuItem = ( await page.$x( "//button[contains(@class,'editor-block-navigation__item') and contains(text(), 'Column')]" ) )[ 3 ];
+		const lastColumnsBlockMenuItem = ( await page.$x(
+			"//button[contains(@class,'editor-block-navigation__item') and contains(text(), 'Column')]"
+		) )[ 3 ];
 		await lastColumnsBlockMenuItem.click();
 
+		// Insert text in the last column block.
+		await pressTimes( 'Tab', 2 ); // Navigate to the appender.
+		await page.keyboard.type( 'Third column' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'should navigate block hierarchy using only the keyboard', async () => {
+		await insertBlock( 'Columns (beta)' );
+
+		// Add a paragraph in the first column.
+		await page.keyboard.type( 'First column' );
+
+		// Navigate to the columns blocks using the keyboard.
+		await pressWithModifier( ACCESS_MODIFIER_KEYS, 'l' );
+		await page.keyboard.press( 'Enter' );
+
+		// Move focus to the sidebar area.
+		await pressWithModifier( 'Control', '`' );
+		await pressWithModifier( 'Control', '`' );
+		await pressWithModifier( 'Control', '`' );
+		await pressWithModifier( 'Control', '`' );
+		await pressTimes( 'Tab', 4 );
+
+		// Tweak the columns count by increasing it by one.
+		page.keyboard.press( 'ArrowRight' );
+
+		// Navigate to the last column in the columns block.
+		await pressWithModifier( ACCESS_MODIFIER_KEYS, 'l' );
+		await pressTimes( 'Tab', 4 );
+		await page.keyboard.press( 'Enter' );
+
 		// Insert text in the last column block
-		await pressTimes( 'Tab', 2 ); // Navigate to the appender
+		await pressTimes( 'Tab', 2 ); // Navigate to the appender.
 		await page.keyboard.type( 'Third column' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	it( 'should appear and function even without nested blocks', async () => {
+		await insertBlock( 'Paragraph' );
+
+		// Add content so there is a block in the hierachy.
+		await page.keyboard.type( 'You say goodbye' );
+
+		// Create an image block too.
+		await page.keyboard.press( 'Enter' );
+		await insertBlock( 'Image' );
+
+		// Return to first block.
+		await pressWithModifier( ACCESS_MODIFIER_KEYS, 'l' );
+		await page.keyboard.press( 'Space' );
+
+		// Replace its content.
+		await pressWithModifier( META_KEY, 'A' );
+		await page.keyboard.type( 'and I say hello' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'should report "No blocks created yet." when post is empty', async () => {
+		await pressWithModifier( ACCESS_MODIFIER_KEYS, 'l' );
+
+		const blockNavigationText = await page.$eval(
+			'.editor-block-navigation__paragraph',
+			( navigationParagraph ) => navigationParagraph.textContent
+		);
+
+		expect( blockNavigationText ).toEqual( 'No blocks created yet.' );
+	} );
 } );