From 0aaffaedcd4d2b8c033e8304b49112611fd571c8 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Wed, 27 Dec 2017 14:25:45 +1100
Subject: [PATCH] Add 'No saved blocks' message to Inserter

When there are no Reusable Blocks available to add, and the user selects
'Saved' in the Inserter, display a message instead of a completely blank
tab.
---
 editor/components/inserter/menu.js    | 23 +++++++++++++++++++----
 editor/components/inserter/style.scss |  6 ++++++
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/editor/components/inserter/menu.js b/editor/components/inserter/menu.js
index 231fbf6762b951..383aec8cf4991c 100644
--- a/editor/components/inserter/menu.js
+++ b/editor/components/inserter/menu.js
@@ -268,16 +268,31 @@ export class InserterMenu extends Component {
 
 	renderTabView( tab ) {
 		const blocksForTab = this.getBlocksForTab( tab );
+
+		// If the Recent tab is selected, don't render category headers
 		if ( 'recent' === tab ) {
 			return this.renderBlocks( blocksForTab );
 		}
 
-		const visibleBlocks = this.getVisibleBlocksByCategory( blocksForTab );
-		if ( 'embed' === tab ) {
-			return this.renderBlocks( visibleBlocks.embed );
+		// If the Saved tab is selected and we have no results, display a friendly message
+		if ( 'saved' === tab && blocksForTab.length === 0 ) {
+			return (
+				<p className="editor-inserter__no-tab-content-message">
+					{ __( 'No saved blocks.' ) }
+				</p>
+			);
+		}
+
+		const visibleBlocksByCategory = this.getVisibleBlocksByCategory( blocksForTab );
+
+		// If our results have only blocks from one category, don't render category headers
+		const categories = Object.keys( visibleBlocksByCategory );
+		if ( categories.length === 1 ) {
+			const [ soleCategory ] = categories;
+			return this.renderBlocks( visibleBlocksByCategory[ soleCategory ] );
 		}
 
-		return this.renderCategories( visibleBlocks );
+		return this.renderCategories( visibleBlocksByCategory );
 	}
 
 	interceptArrows( event ) {
diff --git a/editor/components/inserter/style.scss b/editor/components/inserter/style.scss
index 67186fe25ca763..4d4da90f424788 100644
--- a/editor/components/inserter/style.scss
+++ b/editor/components/inserter/style.scss
@@ -141,6 +141,12 @@ input[type="search"].editor-inserter__search {
 		flex-shrink: 0;
 		margin-top: 1px;
 	}
+
+	.editor-inserter__no-tab-content-message {
+		font-style: italic;
+		margin-top: 3em;
+		text-align: center;
+	}
 }
 
 .editor-inserter__tab {