Polish switcher, inserter, set focus. (#68)

* Polish switcher, inserter, set focus.

Fixes #64.

* Hide inline and block controls when opening block menu.

* Bump z-index of selected block. Fixes #33.

blocks.js

@@ -145,6 +145,10 @@ function hideControls() {
 	blockControls.style.display = 'none';
 }
 
+function hideInlineControls() {
+	inlineControls.style.display = 'none';
+}
+
 // Show popup on text selection
 function onSelectText( event ) {
 	event.stopPropagation();
@@ -291,8 +295,11 @@ function siblingGetter( direction ) {
 }
 
 function openBlockMenu( event ) {
+	hideInlineControls();
+	clearBlocks();
 	event.stopPropagation();
 	insertBlockMenu.style.display = 'block';
+	queryFirst( '.insert-block__search' ).focus();
 }
 
 function hideMenu() {

index.html

@@ -80,7 +80,6 @@ <h2>1.0 Is The Loneliest Number</h2>
 			</button>
 			<div class="insert-block__menu popover is-top">
 				<div class="popover__arrow"></div>
-				<input class="insert-block__search" type="search" placeholder="Search..." />
 				<span class="insert-block__separator">Recent</span>
 				<div class="insert-block__block-list">
 					<div class="insert-block__block">
@@ -105,6 +104,7 @@ <h2>1.0 Is The Loneliest Number</h2>
 						<svg class="gridicon gridicons-list-ordered" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M8 19h13v-2H8v2zm0-6h13v-2H8v2zm0-8v2h13V5H8zm-4.425.252c.107-.096.197-.188.27-.275-.013.228-.02.48-.02.756V8h1.176V3.717H3.96L2.487 4.915l.6.738.487-.4zm.334 7.764c.474-.426.784-.715.93-.867.145-.153.26-.298.35-.436.087-.138.152-.278.194-.42.042-.143.063-.298.063-.466 0-.225-.06-.427-.18-.608s-.29-.32-.507-.417c-.218-.1-.465-.148-.742-.148-.22 0-.42.022-.596.067s-.34.11-.49.195c-.15.085-.337.226-.558.423l.636.744c.174-.15.33-.264.467-.34.138-.078.274-.117.41-.117.13 0 .232.032.304.097.073.064.11.152.11.264 0 .09-.02.176-.055.258-.036.082-.1.18-.192.294-.092.114-.287.328-.586.64L2.42 13.238V14h3.11v-.955H3.91v-.03zm.53 4.746v-.018c.306-.086.54-.225.702-.414.162-.19.243-.42.243-.685 0-.31-.126-.55-.378-.727-.252-.176-.6-.264-1.043-.264-.307 0-.58.033-.816.1s-.47.178-.696.334l.48.773c.293-.183.576-.274.85-.274.147 0 .263.027.35.082s.13.14.13.252c0 .3-.294.45-.882.45h-.27v.87h.264c.217 0 .393.017.527.05.136.03.233.08.294.143.06.064.09.154.09.27 0 .153-.057.265-.173.337-.115.07-.3.106-.554.106-.164 0-.343-.022-.538-.07-.194-.044-.385-.115-.573-.21v.96c.228.088.44.148.637.182.196.033.41.05.64.05.56 0 .998-.114 1.314-.343.315-.228.473-.542.473-.94.002-.585-.356-.923-1.07-1.013z"></path></g></svg> Ordered List
 					</div>
 					<dic class="insert-block__block">These don't work yet.</div>
+					<input class="insert-block__search" type="search" placeholder="Search..." />
 				</div>
 			</div>
 		</div>

style.css

@@ -106,6 +106,8 @@ p.is-selected,
 blockquote.is-selected,
 img.is-selected {
 	box-shadow: inset 0px 0px 0px 2px #6d7882;
+	position: relative;
+	z-index: 1;
 }
 
 /**
@@ -283,6 +285,7 @@ img.is-selected {
  */
 
 .insert-block {
+	cursor: pointer;
 	padding: 14px 0 0 14px;
 	position: relative;
 	display: inline-block;
@@ -298,7 +301,6 @@ img.is-selected {
 	border: none;
 	margin: 0;
 	padding: 0;
-	cursor: pointer;
 }
 
 .insert-block svg,
@@ -399,18 +401,24 @@ img.is-selected {
 	display: block;
 	width: 100%;
 	border: none;
-	border-bottom: 1px solid #e0e5e9;
+	border-top: 1px solid #e0e5e9;
 	padding: 8px 16px;
 	font-size: 13px;
 }
 
+.insert-block__search:focus,
+.switch-block__search:focus {
+	outline: none;
+}
+
 .insert-block__separator,
 .switch-block__separator {
 	background: rgb(247,248,249);
 	display: block;
-	padding: 4px 16px;
+	padding: 2px 12px;
+	letter-spacing: 1px;
 	text-transform: uppercase;
-	font-size: 10px;
+	font-size: 11px;
 	font-weight: 500;
 	color: #9ea7af;
 }
@@ -427,6 +435,7 @@ img.is-selected {
 	padding: 8px;
 	font-size: 11px;
 	align-items: center;
+	cursor: pointer;
 }
 .insert-block__block:hover,
 .switch-block__block:hover {