WordPress · aduth · Feb 16, 2017 · Feb 16, 2017 · Feb 17, 2017 · Feb 17, 2017
diff --git a/README.md b/README.md
@@ -3,14 +3,14 @@
 Prototyping since 1440.
 
 This is the development and prototyping hub for the editor focus in core.
+Gutenberg is the project name. Conversations and discussions take place in #core-editor in Slack.
 
 > The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery. — Matt Mullenweg
 
 ## Overview
 
 - <a href="https://make.wordpress.org/design/2017/01/25/what-are-little-blocks-made-of">What are little blocks made of?</a>
 - <a href="https://make.wordpress.org/core/2017/01/17/editor-technical-overview/">Editor Technical Overview</a>
-- Mockups: https://cloudup.com/c9pKpaoDpQ4
 
 ## Prototypes
 
@@ -22,6 +22,36 @@ This is the development and prototyping hub for the editor focus in core.
 
 - <a href="https://github.com/Automattic/wp-post-grammar">WP Post grammar parser</a>.
 
-----
+## Mockups
 
-Conversations and discussions take place in #core-editor in Slack.
+These mockups are all subject to change and feedback.
+
+See also, <a href="https://projects.invisionapp.com/share/NMAHISEE5#/screens/219366717">clickable prototype</a>.
+
+**Formatting**
+
+![Hover](mockups/Formatting, Hover.png)
+
+![Click](mockups/Formatting, Click.png)
+
+**New Blocks**
+
+![New Blocks](mockups/New Blocks.png)
+![Insert Between](mockups/Insert Between.png)
+![Insert Between, Keyboard Only](mockups/Insert Between, Keyboard.png)
+![Insert](mockups/Insert.png)
+
+**Type Switcher**
+
+![Switcher](mockups/Type Switcher.png)
+
+**Other Blocks**
+
+![Image](mockups/Image.png)
+![Quote](mockups/Quote.png)
+![Quote 2](mockups/Quote 2.png)
+![Headings](mockups/Headings.png)
+
+**Mobile**
+
+![Mobile](mockups/Mobile.png)
diff --git a/blocks.js b/blocks.js
diff --git a/dom-parser/blocks.js b/dom-parser/blocks.js
@@ -0,0 +1,94 @@
+var RE_BLOCK_OPEN, RE_BLOCK_CLOSE, textarea, editor;
+
+RE_BLOCK_OPEN = /^\s*wp:(\S+)/;
+RE_BLOCK_CLOSE = /^\s*\/wp\s*/;
+
+function findNodeBlocks( rootNode ) {
+	var stack = [ rootNode ],
+		comments = [],
+		blocks = [],
+		parent, i, node, match, block, child;
+
+	while ( stack.length ) {
+		parent = stack.pop();
+
+		for ( i = 0; i < parent.childNodes.length; i++ ) {
+			node = parent.childNodes[ i ];
+
+			if ( Node.COMMENT_NODE !== node.nodeType ) {
+				stack.push( node );
+			} else if ( RE_BLOCK_OPEN.test( node.nodeValue ) ) {
+				comments.push( node );
+			}
+		}
+	}
+
+	for ( i = comments.length; --i >= 0; ) {
+		node = comments[ i ];
+		match = node.nodeValue.match( RE_BLOCK_OPEN );
+		block = {
+			type: match[ 1 ],
+			startNode: node,
+			children: []
+		};
+
+		child = node;
+		while ( ( child = child.nextSibling ) ) {
+			if ( Node.COMMENT_NODE !== child.nodeType ) {
+				block.children.push( child );
+			} else if ( RE_BLOCK_CLOSE.test( child.nodeValue ) ) {
+				block.endNode = child;
+				break;
+			}
+		}
+
+		blocks.unshift( block );
+	}
+
+	return blocks;
+}
+
+function renderBlocks( rootNode ) {
+	var blocks = findNodeBlocks( rootNode ),
+		i, block, wrapper, hasInlineChild, child;
+
+	for ( i = 0; i < blocks.length; i++ ) {
+		block = blocks[ i ];
+
+		if ( ! block.endNode ) {
+			continue;
+		}
+
+		wrapper = document.createElement( 'div' );
+		wrapper.className = 'block';
+		wrapper.setAttribute( 'data-type', block.type );
+
+		hasInlineChild = block.children.some( function( node ) {
+			return (
+				Node.ELEMENT_NODE === node.nodeType &&
+				'inline' === window.getComputedStyle( node ).display
+			);
+		} );
+
+		if ( hasInlineChild ) {
+			wrapper.style.display = 'inline-block';
+		}
+
+		block.endNode.parentNode.insertBefore( wrapper, block.endNode );
+
+		while ( ( child = block.children.pop() ) ) {
+			wrapper.insertBefore( child, wrapper.lastChild );
+		}
+	}
+}
+
+textarea = document.getElementById( 'textarea' );
+editor = document.getElementById( 'editor' );
+
+function renderEditor() {
+	editor.innerHTML = textarea.value;
+	renderBlocks( editor );
+}
+
+textarea.addEventListener( 'input', renderEditor );
+renderEditor();
diff --git a/dom-parser/index.html b/dom-parser/index.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<title>Editor Comment DOM Parser</title>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:700,300,700italic,300italic">
+<link rel="stylesheet" href="style.css">
+<div class="displays">
+	<div id="html">
+		<textarea id="textarea"><!-- wp:heading -->
+<h2>1.0 Is The Loneliest Number</h2>
+<!-- /wp -->
+
+<p>A beautiful thing about Apple is how quickly they obsolete their own products. I imagine this also makes the discipline of getting things out there easier. Like I mentioned before, the longer it’s been since the last release the more pressure there is, but if you know that if your bit of code doesn’t make this version but there’s the +0.1 coming out in 6 weeks, then it’s not that bad. It’s like flights from San Francisco to LA, if you miss one you know there’s another one an hour later so it’s not a big deal. Amazon has done a fantastic job of this with the Kindle as well, with a new model every year.</p>
+
+<p>I like Apple for the opposite reason: <strong>they’re not afraid of getting a rudimentary 1.0 out into the world</strong>.</p>
+
+<!-- wp:quote -->
+<blockquote>
+	<p>An old Chinese mandarin, during the minority of the young Emperor, had been governing the country for him. When the Emperor came of age the old man gave him back the ring which had served as emblem of his vicariate, and said to his young sovereign: “In this ring I have set an inscription which your dear Majesty may find useful. It is to be read in times of danger, doubt and defeat. It is to be read, as well, in times of conquest, triumph and glory.”</p>
+	<p>The inscription in the ring read: “This, too, will pass.” The sentence is not to be taken to mean that, in their passing, tears and laughter, hopes and disappointments disappear into a void. But it tells you that all will be absorbed into a unity. Soon we shall see them as integral parts of the full picture of the man or woman.</p>
+</blockquote>
+<!-- /wp -->
+
+<!-- wp:image -->
+<img src="https://matiasventura.files.wordpress.com/2017/02/blue.png?w=720">
+<!-- /wp --></textarea>
+	</div>
+	<div id="editor"></div>
+</div>
+<script src="blocks.js"></script>
+<script src="../navigation.js"></script>
diff --git a/dom-parser/style.css b/dom-parser/style.css
@@ -0,0 +1,130 @@
+/**
+ * Basic
+ */
+
+html,
+body {
+	margin: 0;
+	padding: 0;
+	height: 100%;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+body {
+	font: 13px / 1.8 "Merriweather", serif;
+	width: 90%;
+	max-width: 1280px;
+	margin: 2rem auto;
+	color: #12181e;
+}
+
+img {
+	max-width: 100%;
+	height: auto;
+}
+
+h2 {
+	font-weight: 900;
+	font-size: 28px;
+}
+
+p {
+	margin: 28px 0;
+	font-size: 16px;
+}
+
+blockquote {
+	font-size: 20px;
+	border-left: 4px solid #12181e;
+	margin: 8px 12px;
+	padding-left: 12px;
+	font-style: italic;
+}
+
+blockquote p {
+	margin: 0;
+}
+
+blockquote p + p {
+	margin-top: 28px;
+}
+
+.displays {
+	position: relative;
+	display: flex;
+	min-height: 100%;
+}
+
+.displays::after {
+	content: "";
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 50%;
+	margin-left: -2px;
+	width: 4px;
+	background-color: #f0f2f4;
+}
+
+.displays > #html,
+.displays > #editor {
+	flex-basis: 50%;
+	margin: 0 3rem;
+	padding: 2rem 0;
+}
+
+.displays > #html {
+    margin-left: 0;
+}
+
+.displays > #editor {
+	margin-right: 0;
+}
+
+#textarea {
+	display: block;
+	width: 100%;
+	height: 100%;
+	resize: none;
+	border: none;
+	border: 2px solid transparent;
+	outline: none;
+	padding: .8rem 1.2rem;
+	transition: border-color .2s;
+	font-family: Courier\ 10 Pitch, Courier, monospace;
+	font-size: 14px;
+	line-height: 1.3;
+}
+
+#textarea:hover {
+	border-color: #d6d9dd;
+}
+
+.block {
+	position: relative;
+	margin: 28px 0;
+	padding: 4px 8px;
+	border: 2px dashed #e0e5e9;
+}
+
+.block::before {
+	content: attr( data-type );
+	position: absolute;
+	bottom: 100%;
+	left: -2px;
+	margin-bottom: 2px;
+	padding: 2px 6px;
+	background-color: #e0e5e9;
+	text-transform: uppercase;
+	font-family: monospace;
+	font-style: normal;
+	font-size: 11px;
+}
+
+.block > p,
+.block > h2 {
+	margin: 0;
+}
diff --git a/index.html b/index.html
@@ -18,36 +18,38 @@
 				<svg width="24" height="24" class="type-icon-quote" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Quote</title><rect x="0" fill="none" width="24" height="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"/></g></svg>
 			</span>
 		</div>
-		<div class="block-controls">
-			<button class="block-text block-text__align-left is-active">
-				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Align Left</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M4 19h16v-2H4v2zm10-6H4v2h10v-2zM4 9v2h16V9H4zm10-4H4v2h10V5z"/></g></svg>
-			</button>
-			<button class="block-text block-text__align-center">
-				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Align Center</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M4 19h16v-2H4v2zm13-6H7v2h10v-2zM4 9v2h16V9H4zm13-4H7v2h10V5z"/></g></svg>
-			</button>
-			<button class="block-text block-text__align-right">
-				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Align Right</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M20 17H4v2h16v-2zm-10-2h10v-2H10v2zM4 9v2h16V9H4zm6-2h10V5H10v2z"/></g></svg>
-			</button>
-			<button class="block-image block-image__no-align">
-				<svg class="gridicon gridicons-align-image-center" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M3 5h18v2H3V5zm0 14h18v-2H3v2zm5-4h8V9H8v6z"></path></g></svg>
-			</button>
-			<button class="block-image block-image__align-left">
-				<svg class="gridicon gridicons-align-image-left" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M3 5h18v2H3V5zm0 14h18v-2H3v2zm0-4h8V9H3v6zm10 0h8v-2h-8v2zm0-4h8V9h-8v2z"></path></g></svg>
-			</button>
-			<button class="block-image block-image__align-right">
-				<svg class="gridicon gridicons-align-image-right" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M21 7H3V5h18v2zm0 10H3v2h18v-2zm0-8h-8v6h8V9zm-10 4H3v2h8v-2zm0-4H3v2h8V9z"></path></g></svg>
-			</button>
-			<button class="block-image block-image__full-width">
-				<svg class="gridicon gridicons-fullscreen" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><title>Full Bleed</title><path d="M21 3v6h-2V6.41l-3.29 3.3-1.42-1.42L17.59 5H15V3zM3 3v6h2V6.41l3.29 3.3 1.42-1.42L6.41 5H9V3zm18 18v-6h-2v2.59l-3.29-3.29-1.41 1.41L17.59 19H15v2zM9 21v-2H6.41l3.29-3.29-1.41-1.42L5 17.59V15H3v6z"></path></g></svg>
-			</button>
-		</div>
-		<div class="inline-controls">
-			<button><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Bold</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M7 5.01h4.547c2.126 0 3.67.302 4.632.906.96.605 1.44 1.567 1.44 2.887 0 .896-.21 1.63-.63 2.205-.42.574-.98.92-1.678 1.036v.103c.95.212 1.637.608 2.057 1.19.42.58.63 1.35.63 2.315 0 1.367-.494 2.434-1.482 3.2-.99.765-2.332 1.148-4.027 1.148H7V5.01zm3 5.936h2.027c.862 0 1.486-.133 1.872-.4.386-.267.578-.708.578-1.323 0-.574-.21-.986-.63-1.236-.42-.25-1.087-.374-1.996-.374H10v3.333zm0 2.523v3.905h2.253c.876 0 1.52-.167 1.94-.502.416-.335.625-.848.625-1.54 0-1.243-.89-1.864-2.668-1.864H10z"/></g></svg></button>
-			<button><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Italic</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M10.536 5l-.427 2h1.5L9.262 18h-1.5l-.427 2h6.128l.426-2h-1.5l2.347-11h1.5l.427-2"/></g></svg></button>
-			<button><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Link</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M17 13H7v-2h10v2zm1-6h-1c-1.63 0-3.065.792-3.977 2H18c1.103 0 2 .897 2 2v2c0 1.103-.897 2-2 2h-4.977c.913 1.208 2.347 2 3.977 2h1c2.21 0 4-1.79 4-4v-2c0-2.21-1.79-4-4-4zM2 11v2c0 2.21 1.79 4 4 4h1c1.63 0 3.065-.792 3.977-2H6c-1.103 0-2-.897-2-2v-2c0-1.103.897-2 2-2h4.977C10.065 7.792 8.63 7 7 7H6c-2.21 0-4 1.79-4 4z"/></g></svg></button>
-			<button><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Strikethrough</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M14.348 12H21v2h-4.613c.24.515.368 1.094.368 1.748 0 1.317-.474 2.355-1.423 3.114-.947.76-2.266 1.138-3.956 1.138-1.557 0-2.934-.293-4.132-.878v-2.874c.985.44 1.818.75 2.5.928.682.18 1.306.27 1.872.27.68 0 1.2-.13 1.562-.39.363-.26.545-.644.545-1.158 0-.285-.08-.54-.24-.763-.16-.222-.394-.437-.704-.643-.18-.12-.483-.287-.88-.49H3v-2H14.347zm-3.528-2c-.073-.077-.143-.155-.193-.235-.126-.202-.19-.44-.19-.713 0-.44.157-.795.47-1.068.313-.273.762-.41 1.348-.41.492 0 .993.064 1.502.19.51.127 1.153.35 1.93.67l1-2.405c-.753-.327-1.473-.58-2.16-.76-.69-.18-1.414-.27-2.173-.27-1.544 0-2.753.37-3.628 1.108-.874.738-1.312 1.753-1.312 3.044 0 .302.036.58.088.848h3.318z"/></g></svg></button>
-			<button><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Text Color</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M3 19h18v3H3v-3zM15.82 17h3.424L14 3h-4L4.756 17H8.18l1.067-3.5h5.506L15.82 17zm-1.952-6h-3.73l1.868-5.725L13.868 11z"/></g></svg></button>
-			<button class="do-not-work">These don't work yet.</button>
+		<div class="docked-controls">
+			<div class="block-controls">
+				<button class="block-text block-text__align-left is-active">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Align Left</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M4 19h16v-2H4v2zm10-6H4v2h10v-2zM4 9v2h16V9H4zm10-4H4v2h10V5z"/></g></svg>
+				</button>
+				<button class="block-text block-text__align-center">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Align Center</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M4 19h16v-2H4v2zm13-6H7v2h10v-2zM4 9v2h16V9H4zm13-4H7v2h10V5z"/></g></svg>
+				</button>
+				<button class="block-text block-text__align-right">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Align Right</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M20 17H4v2h16v-2zm-10-2h10v-2H10v2zM4 9v2h16V9H4zm6-2h10V5H10v2z"/></g></svg>
+				</button>
+				<button class="block-image block-image__no-align">
+					<svg class="gridicon gridicons-align-image-center" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M3 5h18v2H3V5zm0 14h18v-2H3v2zm5-4h8V9H8v6z"></path></g></svg>
+				</button>
+				<button class="block-image block-image__align-left">
+					<svg class="gridicon gridicons-align-image-left" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M3 5h18v2H3V5zm0 14h18v-2H3v2zm0-4h8V9H3v6zm10 0h8v-2h-8v2zm0-4h8V9h-8v2z"></path></g></svg>
+				</button>
+				<button class="block-image block-image__align-right">
+					<svg class="gridicon gridicons-align-image-right" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M21 7H3V5h18v2zm0 10H3v2h18v-2zm0-8h-8v6h8V9zm-10 4H3v2h8v-2zm0-4H3v2h8V9z"></path></g></svg>
+				</button>
+				<button class="block-image block-image__full-width">
+					<svg class="gridicon gridicons-fullscreen" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><title>Full Bleed</title><path d="M21 3v6h-2V6.41l-3.29 3.3-1.42-1.42L17.59 5H15V3zM3 3v6h2V6.41l3.29 3.3 1.42-1.42L6.41 5H9V3zm18 18v-6h-2v2.59l-3.29-3.29-1.41 1.41L17.59 19H15v2zM9 21v-2H6.41l3.29-3.29-1.41-1.42L5 17.59V15H3v6z"></path></g></svg>
+				</button>
+			</div>
+			<div class="inline-controls">
+				<button><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Bold</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M7 5.01h4.547c2.126 0 3.67.302 4.632.906.96.605 1.44 1.567 1.44 2.887 0 .896-.21 1.63-.63 2.205-.42.574-.98.92-1.678 1.036v.103c.95.212 1.637.608 2.057 1.19.42.58.63 1.35.63 2.315 0 1.367-.494 2.434-1.482 3.2-.99.765-2.332 1.148-4.027 1.148H7V5.01zm3 5.936h2.027c.862 0 1.486-.133 1.872-.4.386-.267.578-.708.578-1.323 0-.574-.21-.986-.63-1.236-.42-.25-1.087-.374-1.996-.374H10v3.333zm0 2.523v3.905h2.253c.876 0 1.52-.167 1.94-.502.416-.335.625-.848.625-1.54 0-1.243-.89-1.864-2.668-1.864H10z"/></g></svg></button>
+				<button><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Italic</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M10.536 5l-.427 2h1.5L9.262 18h-1.5l-.427 2h6.128l.426-2h-1.5l2.347-11h1.5l.427-2"/></g></svg></button>
+				<button><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Link</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M17 13H7v-2h10v2zm1-6h-1c-1.63 0-3.065.792-3.977 2H18c1.103 0 2 .897 2 2v2c0 1.103-.897 2-2 2h-4.977c.913 1.208 2.347 2 3.977 2h1c2.21 0 4-1.79 4-4v-2c0-2.21-1.79-4-4-4zM2 11v2c0 2.21 1.79 4 4 4h1c1.63 0 3.065-.792 3.977-2H6c-1.103 0-2-.897-2-2v-2c0-1.103.897-2 2-2h4.977C10.065 7.792 8.63 7 7 7H6c-2.21 0-4 1.79-4 4z"/></g></svg></button>
+				<button><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Strikethrough</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M14.348 12H21v2h-4.613c.24.515.368 1.094.368 1.748 0 1.317-.474 2.355-1.423 3.114-.947.76-2.266 1.138-3.956 1.138-1.557 0-2.934-.293-4.132-.878v-2.874c.985.44 1.818.75 2.5.928.682.18 1.306.27 1.872.27.68 0 1.2-.13 1.562-.39.363-.26.545-.644.545-1.158 0-.285-.08-.54-.24-.763-.16-.222-.394-.437-.704-.643-.18-.12-.483-.287-.88-.49H3v-2H14.347zm-3.528-2c-.073-.077-.143-.155-.193-.235-.126-.202-.19-.44-.19-.713 0-.44.157-.795.47-1.068.313-.273.762-.41 1.348-.41.492 0 .993.064 1.502.19.51.127 1.153.35 1.93.67l1-2.405c-.753-.327-1.473-.58-2.16-.76-.69-.18-1.414-.27-2.173-.27-1.544 0-2.753.37-3.628 1.108-.874.738-1.312 1.753-1.312 3.044 0 .302.036.58.088.848h3.318z"/></g></svg></button>
+				<button><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Text Color</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M3 19h18v3H3v-3zM15.82 17h3.424L14 3h-4L4.756 17H8.18l1.067-3.5h5.506L15.82 17zm-1.952-6h-3.73l1.868-5.725L13.868 11z"/></g></svg></button>
+				<button class="do-not-work">These don't work yet.</button>
+			</div>
 		</div>
 		<div class="switch-block__menu popover is-bottom">
 			<div class="popover__arrow"></div>
@@ -85,5 +87,6 @@ <h2>1.0 Is The Loneliest Number</h2>
 			</div>
 		</div>
 		<script src="blocks.js"></script>
+		<script src="navigation.js"></script>
 	</body>
 </html>
diff --git a/mockups/Formatting, Click.png b/mockups/Formatting, Click.png
diff --git a/mockups/Formatting, Hover.png b/mockups/Formatting, Hover.png
diff --git a/mockups/Headings.png b/mockups/Headings.png
diff --git a/mockups/Image.png b/mockups/Image.png
diff --git a/mockups/Insert Between, Keyboard.png b/mockups/Insert Between, Keyboard.png
diff --git a/mockups/Insert Between.png b/mockups/Insert Between.png
diff --git a/mockups/Insert.png b/mockups/Insert.png
diff --git a/mockups/Mobile.png b/mockups/Mobile.png
diff --git a/mockups/New Blocks.png b/mockups/New Blocks.png
diff --git a/mockups/Quote 2.png b/mockups/Quote 2.png
diff --git a/mockups/Quote.png b/mockups/Quote.png
diff --git a/mockups/Type Switcher.png b/mockups/Type Switcher.png