From 67defc7c0c4bb0b6e16dae2b7ab49b3ff55e20b7 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Mon, 24 Apr 2017 13:55:37 +0200
Subject: [PATCH 1/3] Lower the z-index of the editable.

Your eyes, please, @aduth and others. A recent change added `position: relative;` as an inline style on `blocks-editable`. This caused the block switcher to be underneath the editable, regardless of its z-index. By lowering the z-index of the editable, this fixes it.
---
 blocks/components/editable/style.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/blocks/components/editable/style.scss b/blocks/components/editable/style.scss
index 468315ca41743b..9192c6ad6a9b2b 100644
--- a/blocks/components/editable/style.scss
+++ b/blocks/components/editable/style.scss
@@ -1,4 +1,7 @@
 .blocks-editable {
+	position: relative;
+	z-index: -1;
+
 	> p:first-child {
 		margin-top: 0;
 	}

From 5e45e90725d67eb46b08dbb6aff7fba285c68f86 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Mon, 24 Apr 2017 14:08:34 +0200
Subject: [PATCH 2/3] Normalize switcher padding, and fix hover color.

---
 editor/components/block-switcher/style.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/editor/components/block-switcher/style.scss b/editor/components/block-switcher/style.scss
index 30356ee470cadb..662d119bd51bb2 100644
--- a/editor/components/block-switcher/style.scss
+++ b/editor/components/block-switcher/style.scss
@@ -11,6 +11,7 @@
 .editor-block-switcher__toggle {
 	width: auto;
 	margin: 3px;
+	padding: 6px;
 }
 
 .editor-block-switcher__arrow {
@@ -25,6 +26,10 @@
 	border-bottom: none;
 	border-left-color: transparent;
 	border-right-color: transparent;
+
+	.editor-block-switcher__toggle:hover & {
+		border-top-color: $blue-medium;
+	}
 }
 
 .editor-block-switcher__menu {

From e4ac5a3d779c323b72f457cb96ce8c0b177a1f82 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Mon, 24 Apr 2017 14:18:44 +0200
Subject: [PATCH 3/3] Tweak block switcher menu.

- Remove arrow, let's see how this feels.
- Adjust hover colors.
---
 editor/components/block-switcher/index.js   |  1 -
 editor/components/block-switcher/style.scss | 36 +++------------------
 2 files changed, 5 insertions(+), 32 deletions(-)

diff --git a/editor/components/block-switcher/index.js b/editor/components/block-switcher/index.js
index e93df85dfd5896..c3fb6ce7dd1603 100644
--- a/editor/components/block-switcher/index.js
+++ b/editor/components/block-switcher/index.js
@@ -64,7 +64,6 @@ class BlockSwitcher extends wp.element.Component {
 				</IconButton>
 				{ this.state.open &&
 					<div className="editor-block-switcher__menu">
-						<div className="editor-block-switcher__menu-arrow" />
 						{ allowedBlocks.map( ( { slug, title, icon } ) => (
 							<IconButton
 								key={ slug }
diff --git a/editor/components/block-switcher/style.scss b/editor/components/block-switcher/style.scss
index 662d119bd51bb2..97b143d139b959 100644
--- a/editor/components/block-switcher/style.scss
+++ b/editor/components/block-switcher/style.scss
@@ -34,7 +34,8 @@
 
 .editor-block-switcher__menu {
 	position: absolute;
-	top: 50px;
+	top: 43px;
+	margin-left: -1px;
 	box-shadow: 0px 3px 20px rgba( 18, 24, 30, .1 ), 0px 1px 3px rgba( 18, 24, 30, .1 );
 	border: 1px solid #e0e5e9;
 	background: #fff;
@@ -45,35 +46,6 @@
 	}
 }
 
-.editor-block-switcher__menu-arrow {
-	border: 10px dashed $light-gray-500;
-	height: 0;
-	line-height: 0;
-	position: absolute;
-	width: 0;
-	z-index: 1;
-	top: -10px;
-	left: 50%;
-	margin-left: -10px;
-	border-bottom-style: solid;
-	border-top: none;
-	border-left-color: transparent;
-	border-right-color: transparent;
-
-	&:before {
-		top: 2px;
-		border: 10px solid $white;
-		content: " ";
-		position: absolute;
-		left: 50%;
-		margin-left: -10px;
-		border-bottom-style: solid;
-		border-top: none;
-		border-left-color: transparent;
-		border-right-color: transparent;
-	}
-}
-
 .editor-block-switcher__menu-item {
 	width: auto;
 	margin: 3px;
@@ -84,7 +56,9 @@
 	color: $dark-gray-500;
 	cursor: pointer;
 
-	&:hover {
+	&:hover,
+	&:not(:disabled):hover {
+		color: $dark-gray-500;
 		border-color: $dark-gray-500;
 	}