diff --git a/blocks.js b/blocks.js
index a69744ea2a1cc..41bf191a4c188 100644
--- a/blocks.js
+++ b/blocks.js
@@ -13,6 +13,7 @@ var editor = document.getElementsByClassName( 'editor' )[0];
var switcher = document.getElementsByClassName( 'block-switcher' )[0];
var blockControls = document.getElementsByClassName( 'block-controls' )[0];
var inlineControls = document.getElementsByClassName( 'inline-controls' )[0];
+var insertBlockButton = document.getElementsByClassName( 'insert-block__button' )[0];
var selectedBlock = null;
/**
@@ -21,6 +22,7 @@ var selectedBlock = null;
window.addEventListener( 'click', clearBlocks, false );
editor.addEventListener( 'input', attachBlockHandlers, false );
editor.addEventListener( 'input', clearBlocks, false );
+insertBlockButton.addEventListener( 'click', openBlockMenu, false );
window.addEventListener( 'mouseup', onSelectText, false );
attachBlockHandlers();
@@ -60,6 +62,7 @@ function clearBlocks() {
var selectedBlock = null;
hideControls();
+ hideMenu();
}
function showControls( node ) {
@@ -188,6 +191,20 @@ function siblingGetter( direction ) {
}
}
+function openBlockMenu( event ) {
+ event.stopPropagation();
+ var menu = document.getElementsByClassName( 'insert-block__menu' )[0];
+ menu.style.display = 'block';
+ menu.addEventListener( 'click', function( event ) {
+ event.stopPropagation();
+ }, false );
+}
+
+function hideMenu() {
+ var menu = document.getElementsByClassName( 'insert-block__menu' )[0];
+ menu.style.display = 'none';
+}
+
function l( data ) {
console.log( data );
return data;
diff --git a/index.html b/index.html
index cca4525ab43ca..5aec0c86616a0 100644
--- a/index.html
+++ b/index.html
@@ -50,7 +50,36 @@ 1.0 Is The Loneliest Number
I like Apple for the opposite reason: they’re not afraid of getting a rudimentary 1.0 out into the world.
diff --git a/style.css b/style.css
index 1c6daef1e0b7b..3902db54d6b0a 100644
--- a/style.css
+++ b/style.css
@@ -267,11 +267,60 @@ p {
padding: 14px 0 0 14px;
}
+.insert-block__button {
+ background: none;
+ border: none;
+ margin: 0;
+ padding: 0;
+ cursor: pointer;
+}
+
.insert-block svg {
cursor: pointer;
fill: #87919d;
}
-.insert-block:hover svg {
+.insert-block__button:hover svg {
fill: #12181e;
}
+
+.insert-block__menu {
+ display: none;
+ width: 280px;
+ box-shadow: 0px 3px 20px rgba( 18, 24, 30, .1 ), 0px 1px 3px rgba( 18, 24, 30, .1 );
+ border: 1px solid #e0e5e9;
+}
+
+.insert-block__search {
+ display: block;
+ width: 100%;
+ border: none;
+ border-bottom: 1px solid #e0e5e9;
+ padding: 8px 16px;
+ font-size: 13px;
+}
+
+.insert-block__separator {
+ background: rgb(247,248,249);
+ display: block;
+ padding: 4px 16px;
+ text-transform: uppercase;
+ font-size: 10px;
+ font-weight: 500;
+ color: #9ea7af;
+}
+.insert-block__block-list {
+ display: flex;
+ flex-flow: row wrap;
+}
+.insert-block__block {
+ display: flex;
+ width: 50%;
+ color: #606a73;
+ padding: 8px;
+ font-size: 12px;
+ align-items: center;
+}
+.insert-block__block svg {
+ margin-right: 4px;
+}