Merge pull request #17 from Automattic/add/insert-block-menu

Add insert-block menu.
WordPress · Feb 8, 2017 · cbf77be · cbf77be
2 parents 9e8e6af + 2b76169
commit cbf77be
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 2 deletions.
diff --git 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
@@ -50,7 +50,36 @@ <h2>1.0 Is The Loneliest Number</h2>
 			<p>I like Apple for the opposite reason: they’re not afraid of getting a rudimentary 1.0 out into the world.</p>
 		</section>
 		<div class="insert-block">
-			<svg class="gridicon gridicons-add-outline" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M12 4c4.41 0 8 3.59 8 8s-3.59 8-8 8-8-3.59-8-8 3.59-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm5 9h-4V7h-2v4H7v2h4v4h2v-4h4v-2z"></path></g></svg>
+			<button class="insert-block__button">
+				<svg class="gridicon gridicons-add-outline" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M12 4c4.41 0 8 3.59 8 8s-3.59 8-8 8-8-3.59-8-8 3.59-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm5 9h-4V7h-2v4H7v2h4v4h2v-4h4v-2z"></path></g></svg>
+			</button>
+			<div class="insert-block__menu">
+				<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">
+						<svg width="24" height="24" class="type-icon-paragraph" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path id="path-1_2_" class="st0" d="M13 5h2v16h2V5h2V3h-6.7.2-3C6.5 3 4 5.5 4 8.5S6.5 14 9.5 14H11v7h2v-7h-.5.5V5z"/><path class="st1" d="M9.5 3C6.5 3 4 5.5 4 8.5S6.5 14 9.5 14H11v7h2V5h2v16h2V5h2V3H9.5z"/></svg> Paragraph
+					</div>
+					<div class="insert-block__block">
+						<svg width="24" height="24" class="type-icon-heading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Heading</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M18 20h-3v-6H9v6H6V5.01h3V11h6V5.01h3V20z"/></g></svg> Heading
+					</div>
+					<div class="insert-block__block">
+						<svg width="24" height="24" class="type-icon-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Image</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M13 9.5c0-.828.672-1.5 1.5-1.5s1.5.672 1.5 1.5-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5zM22 6v12c0 1.105-.895 2-2 2H4c-1.105 0-2-.895-2-2V6c0-1.105.895-2 2-2h16c1.105 0 2 .895 2 2zm-2 0H4v7.444L8 9l5.895 6.55 1.587-1.85c.798-.932 2.24-.932 3.037 0L20 15.426V6z"/></g></svg> Image
+					</div>
+					<div class="insert-block__block">
+						<svg class="gridicon gridicons-quote" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M11.192 15.757c0-.88-.23-1.618-.69-2.217-.326-.412-.768-.683-1.327-.812-.55-.128-1.07-.137-1.54-.028-.16-.95.1-1.956.76-3.022.66-1.065 1.515-1.867 2.558-2.403L9.373 5c-.8.396-1.56.898-2.26 1.505-.71.607-1.34 1.305-1.9 2.094s-.98 1.68-1.25 2.69-.346 2.04-.217 3.1c.168 1.4.62 2.52 1.356 3.35.735.84 1.652 1.26 2.748 1.26.965 0 1.766-.29 2.4-.878.628-.576.94-1.365.94-2.368l.002.003zm9.124 0c0-.88-.23-1.618-.69-2.217-.326-.42-.77-.692-1.327-.817-.56-.124-1.074-.13-1.54-.022-.16-.94.09-1.95.75-3.02.66-1.06 1.514-1.86 2.557-2.4L18.49 5c-.8.396-1.555.898-2.26 1.505-.708.607-1.34 1.305-1.894 2.094-.556.79-.97 1.68-1.24 2.69-.273 1-.345 2.04-.217 3.1.165 1.4.615 2.52 1.35 3.35.732.833 1.646 1.25 2.742 1.25.967 0 1.768-.29 2.402-.876.627-.576.942-1.365.942-2.368v.01z"></path></g></svg> Quote
+					</div>
+					<div class="insert-block__block">
+						<svg class="gridicon gridicons-image-multiple" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M15 7.5c0-.828.672-1.5 1.5-1.5s1.5.672 1.5 1.5S17.328 9 16.5 9 15 8.328 15 7.5zM4 20h14c0 1.105-.895 2-2 2H4c-1.1 0-2-.9-2-2V8c0-1.105.895-2 2-2v14zM22 4v12c0 1.105-.895 2-2 2H8c-1.105 0-2-.895-2-2V4c0-1.105.895-2 2-2h12c1.105 0 2 .895 2 2zM8 4v6.333L11 7l4.855 5.395.656-.73c.796-.886 2.183-.886 2.977 0l.513.57V4H8z"></path></g></svg> Gallery
+					</div>
+					<div class="insert-block__block">
+						<svg class="gridicon gridicons-list-unordered" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M9 19h12v-2H9v2zm0-6h12v-2H9v2zm0-8v2h12V5H9zm-4-.5c-.828 0-1.5.672-1.5 1.5S4.172 7.5 5 7.5 6.5 6.828 6.5 6 5.828 4.5 5 4.5zm0 6c-.828 0-1.5.672-1.5 1.5s.672 1.5 1.5 1.5 1.5-.672 1.5-1.5-.672-1.5-1.5-1.5zm0 6c-.828 0-1.5.672-1.5 1.5s.672 1.5 1.5 1.5 1.5-.672 1.5-1.5-.672-1.5-1.5-1.5z"></path></g></svg> Unordered List
+					</div>
+					<div class="insert-block__block">
+						<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>
+				</div>
+			</div>
 		</div>
 		<script src="blocks.js"></script>
 	</body>

diff --git 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;
+}