From c325b41a822b464df80098d29a65c30207230f6c Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 21 Feb 2017 11:21:55 +0100
Subject: [PATCH] UI Prototype: Add indication that there are more blocks
 available (#107)

---
 blocks.js | 14 +++++++++-----
 style.css |  5 +++++
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/blocks.js b/blocks.js
index 6e3e69df46b77c..b4cda4e2e7eb2a 100644
--- a/blocks.js
+++ b/blocks.js
@@ -521,16 +521,12 @@ function renderBlockMenu() {
 			insertBlockMenuContent.appendChild( node );
 		}
 	} );
-
-	var placeholder = document.createElement('div');
-	placeholder.className = 'insert-block__separator';
-	placeholder.textContent = 'These don\'t work yet.';
-	insertBlockMenuContent.appendChild( placeholder );
 }
 
 function attachBlockMenuSearch() {
 	insertBlockMenuSearchInput.addEventListener( 'keyup', filterBlockMenu, false );
 	insertBlockMenuSearchInput.addEventListener( 'input', filterBlockMenu, false );
+	insertBlockMenuContent.addEventListener( 'scroll', handleBlockMenuScroll, false );
 	selectBlockInMenu();
 	renderBlockMenu();
 
@@ -539,6 +535,14 @@ function attachBlockMenuSearch() {
 		selectBlockInMenu();
 		renderBlockMenu();
 	}
+
+	function handleBlockMenuScroll( event ) {
+		if ( insertBlockMenuContent.scrollHeight - insertBlockMenuContent.scrollTop <= insertBlockMenuContent.clientHeight ) {
+			insertBlockMenuContent.className = 'insert-block__content is-bottom';
+		} else {
+			insertBlockMenuContent.className = 'insert-block__content';
+		}
+	}
 }
 
 /**
diff --git a/style.css b/style.css
index 5dcd07a6377722..190ec91a8e362f 100644
--- a/style.css
+++ b/style.css
@@ -426,6 +426,11 @@ img.is-selected {
 .insert-block__content {
 	max-height: 180px;
 	overflow: auto;
+	box-shadow: inset 0px -4px 6px -2px rgba(224,229,233,1);
+}
+
+.insert-block__content.is-bottom {
+	box-shadow: none;
 }
 
 .insert-block__content:focus {