Improve top bar tools interaction consistency.

WordPress · Nov 22, 2018 · 675eb15 · 675eb15
1 parent 9cc03c0
commit 675eb15
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 23 deletions.
diff --git a/packages/editor/src/components/block-navigation/dropdown.js b/packages/editor/src/components/block-navigation/dropdown.js
@@ -5,6 +5,7 @@ import { Fragment } from '@wordpress/element';
 import { IconButton, Dropdown, SVG, Path, KeyboardShortcuts } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { rawShortcut, displayShortcut } from '@wordpress/keycodes';
+import { withSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -17,7 +18,7 @@ const MenuIcon = (
 	</SVG>
 );
 
-function BlockNavigationDropdown() {
+function BlockNavigationDropdown( { hasBlocks } ) {
 	return	(
 		<Dropdown
 			renderToggle={ ( { isOpen, onToggle } ) => (
@@ -31,10 +32,11 @@ function BlockNavigationDropdown() {
 					<IconButton
 						icon={ MenuIcon }
 						aria-expanded={ isOpen }
-						onClick={ onToggle }
+						onClick={ hasBlocks ? onToggle : undefined }
 						label={ __( 'Block Navigation' ) }
 						className="editor-block-navigation"
 						shortcut={ displayShortcut.access( 'o' ) }
+						aria-disabled={ ! hasBlocks }
 					/>
 				</Fragment>
 			) }
@@ -45,4 +47,8 @@ function BlockNavigationDropdown() {
 	);
 }
 
-export default BlockNavigationDropdown;
+export default withSelect( ( select ) => {
+	return {
+		hasBlocks: !! select( 'core/editor' ).getBlockCount(),
+	};
+} )( BlockNavigationDropdown );
diff --git a/packages/editor/src/components/block-navigation/index.js b/packages/editor/src/components/block-navigation/index.js
@@ -74,6 +74,10 @@ function BlockNavigation( { rootBlock, rootBlocks, selectedBlockClientId, select
 		)
 	);
 
+	if ( ! rootBlocks || rootBlocks.length === 0 ) {
+		return null;
+	}
+
 	return (
 		<NavigableMenu
 			role="presentation"
@@ -95,13 +99,6 @@ 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>
-			) }
 		</NavigableMenu>
 	);
 }

diff --git a/packages/editor/src/components/table-of-contents/index.js b/packages/editor/src/components/table-of-contents/index.js
@@ -18,12 +18,12 @@ function TableOfContents( { hasBlocks } ) {
 			contentClassName="table-of-contents__popover"
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<IconButton
-					onClick={ onToggle }
+					onClick={ hasBlocks ? onToggle : undefined }
 					icon="info-outline"
 					aria-expanded={ isOpen }
 					label={ __( 'Content structure' ) }
 					labelPosition="bottom"
-					disabled={ ! hasBlocks }
+					aria-disabled={ ! hasBlocks }
 				/>
 			) }
 			renderContent={ () => <TableOfContentsPanel /> }

diff --git a/test/e2e/specs/block-hierarchy-navigation.test.js b/test/e2e/specs/block-hierarchy-navigation.test.js
@@ -102,15 +102,4 @@ describe( 'Navigating the block hierarchy', () => {
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
-
-	it( 'should report "No blocks created yet." when post is empty', async () => {
-		await openBlockNavigator();
-
-		const blockNavigationText = await page.$eval(
-			'.editor-block-navigation__paragraph',
-			( navigationParagraph ) => navigationParagraph.textContent
-		);
-
-		expect( blockNavigationText ).toEqual( 'No blocks created yet.' );
-	} );
 } );