diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000000..3c3629e647f5d
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/blocks.js b/blocks.js
new file mode 100644
index 0000000000000..dd68fc7bf4ab5
--- /dev/null
+++ b/blocks.js
@@ -0,0 +1,48 @@
+"use strict";
+
+var editor = document.getElementsByClassName( 'editor' )[0];
+var controls = document.getElementsByClassName( 'block-controls' )[0];
+
+window.addEventListener( 'click', clearBlocks, false );
+editor.addEventListener( 'input', attachBlockHandlers, false );
+editor.addEventListener( 'input', clearBlocks, false );
+
+attachBlockHandlers();
+
+function attachBlockHandlers() {
+ var blocks = getBlocks();
+ Array.from( blocks ).forEach( function( block ) {
+ block.addEventListener( 'click', selectBlock, false );
+ } );
+}
+
+function getBlocks() {
+ var text = document.getElementsByTagName( 'p' );
+ var heading = document.getElementsByTagName( 'h2' );
+ var images = document.getElementsByTagName( 'img' );
+ return [ ...text, ...heading, ...images ];
+}
+
+function selectBlock( event ) {
+ clearBlocks();
+ event.stopPropagation();
+ event.target.className = 'is-selected';
+
+ var position = event.target.getBoundingClientRect();
+
+ // Show switcher
+ controls.style.opacity = 1;
+ controls.style.top = ( position.top + 18 ) + 'px';
+}
+
+function clearBlocks() {
+ Array.from( getBlocks() ).forEach( function( block ) {
+ block.className = '';
+ } );
+
+ hideControls();
+}
+
+function hideControls() {
+ controls.style.opacity = 0;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000000000..111fdabbd6cc1
--- /dev/null
+++ b/index.html
@@ -0,0 +1,27 @@
+
+
+
+ Editor Blocks
+
+ 1.0 Is The Loneliest Number
+ Many entrepreneurs idolize Steve Jobs. He’s such a perfectionist, they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!
+ I like Apple for the opposite reason: they’re not afraid of getting a rudimentary 1.0 out into the world.
+
+
+
+
+
+
+
diff --git a/package.json b/package.json
new file mode 100644
index 0000000000000..157ef3e5da322
--- /dev/null
+++ b/package.json
@@ -0,0 +1,28 @@
+{
+ "name": "gutenberg",
+ "version": "1.0.0",
+ "description": "Prototyping a new WordPress editor experience",
+ "main": "index.html",
+ "scripts": {
+ "start": "http-server -p 5000",
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/Automattic/gutenberg.git"
+ },
+ "keywords": [
+ "WordPress",
+ "editor",
+ "prototype"
+ ],
+ "author": "Automattic, Inc.",
+ "license": "GPL-2.0+",
+ "bugs": {
+ "url": "https://github.com/Automattic/gutenberg/issues"
+ },
+ "homepage": "https://github.com/Automattic/gutenberg#readme",
+ "devDependencies": {
+ "http-server": "0.9.0"
+ }
+}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000000000..8aeb40ac93d01
--- /dev/null
+++ b/style.css
@@ -0,0 +1,152 @@
+/**
+ * Basic
+ */
+html,
+body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ font: 13px/1.8 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
+ max-width: 720px;
+ margin: 60px auto;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+img {
+ font-family: "Merriweather", serif;
+ margin: 15px 0;
+ /* Uses paddings instead */
+}
+
+h2 {
+ font-weight: 900;
+ font-size: 28px;
+}
+
+p {
+ font-size: 16px;
+}
+
+section:focus {
+ outline: none;
+}
+
+/**
+ * Hover controls
+ */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+img {
+ position: relative;
+ box-shadow: inset 0px 0px 0px 0px #e0e5e9;
+ transition: all .2s ease;
+ padding: 15px;
+ /* replaces some block margins */
+}
+h1:hover,
+h2:hover,
+h3:hover,
+h4:hover,
+h5:hover,
+h6:hover,
+p:hover,
+img:hover {
+ box-shadow: inset 0px 0px 0px 2px #e0e5e9;
+}
+h1.is-selected,
+h2.is-selected,
+h3.is-selected,
+h4.is-selected,
+h5.is-selected,
+h6.is-selected,
+p.is-selected,
+img.is-selected {
+ box-shadow: inset 0px 0px 0px 2px #191e23;
+}
+h1:before,
+h2:before,
+h3:before,
+h4:before,
+h5:before,
+h6:before,
+p:before,
+img:before {
+ content: "";
+ position: absolute;
+ display: block;
+ top: 0;
+ left: 0;
+ height: 0;
+ width: 108px;
+ background: #191e23;
+ transition: all .075s ease;
+ transform: translateZ(0);
+}
+h1.is-selected:before,
+h2.is-selected:before,
+h3.is-selected:before,
+h4.is-selected:before,
+h5.is-selected:before,
+h6.is-selected:before,
+p.is-selected:before,
+img.is-selected:before {
+ height: 36px;
+ top: -36px;
+}
+
+p {
+ min-height: 3.4em;
+}
+
+.block-controls {
+ opacity: 0;
+ margin-left: -54px;
+ height: 36px;
+ width: 54px;
+ position: absolute;
+ transition: opacity .075s ease;
+ transform: translateZ(0);
+}
+.block-controls svg {
+ fill: #86909c;
+ position: absolute;
+ cursor: pointer;
+}
+.block-controls svg:hover {
+ fill: #191e23;
+}
+.block-controls svg.up {
+ left: 0;
+ top: 0;
+}
+.block-controls svg.down {
+ left: 0;
+ bottom: 0;
+}
+.block-controls svg.type {
+ right: 6px;
+ top: 6px;
+}
+
+img {
+ max-width: 100%;
+ height: auto;
+}
+