Add HTML block with preview.

blocks/library/code/style.scss

@@ -12,3 +12,57 @@ div[data-type="core/code"] {
 		width: 100%;
 	}
 }
+
+// We should extract this to a separate components-toolbar
+.components-tab-button {
+	display: inline-flex;
+	align-items: flex-end;
+	margin: 0;
+	padding: 3px;
+	background: none;
+	outline: none;
+	color: $dark-gray-500;
+	cursor: pointer;
+	position: relative;
+	height: $icon-button-size;
+	font-family: $default-font;
+	font-size: $default-font-size;
+	font-weight: 500;
+	border: 0;
+
+	&.is-active,
+	&.is-active:hover {
+		color: $white;
+	}
+
+	&:disabled {
+		cursor: default;
+	}
+
+	&> span {
+		border: 1px solid transparent;
+		padding: 0 6px;
+		box-sizing: content-box;
+		height: 28px;
+		line-height: 28px;
+	}
+
+	&:hover > span,
+	&:focus > span {
+		color: $dark-gray-500;
+	}
+
+	&:not(:disabled) {
+		&.is-active > span,
+		&:hover > span,
+		&:focus > span {
+			border: 1px solid $dark-gray-500;
+		}
+	}
+
+	&.is-active > span,
+	&.is-active:hover > span {
+		background-color: $dark-gray-500;
+		color: $white;
+	}
+}

blocks/library/html/index.js

@@ -0,0 +1,87 @@
+/**
+ * External dependencies
+ */
+import TextareaAutosize from 'react-autosize-textarea';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from 'i18n';
+import { Component } from 'element';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { registerBlockType, query } from '../../api';
+import BlockControls from '../../block-controls';
+
+const { children } = query;
+
+registerBlockType( 'core/html', {
+	title: __( 'Custom HTML' ),
+
+	icon: 'editor-code',
+
+	category: 'formatting',
+
+	attributes: {
+		content: children(),
+	},
+
+	edit: class extends Component {
+		constructor() {
+			super( ...arguments );
+			this.preview = this.preview.bind( this );
+			this.edit = this.edit.bind( this );
+			this.state = {
+				preview: false,
+			};
+		}
+
+		preview() {
+			this.setState( { preview: true } );
+		}
+
+		edit() {
+			this.setState( { preview: false } );
+		}
+
+		render() {
+			const { preview } = this.state;
+			const { attributes, setAttributes, focus } = this.props;
+
+			return (
+				<div>
+					{ focus &&
+						<BlockControls key="controls">
+							<ul className="components-toolbar">
+								<li>
+									<button className={ `components-tab-button ${ ! preview ? 'is-active' : '' }` } onClick={ this.edit }>
+										<span>HTML</span>
+									</button>
+								</li>
+								<li>
+									<button className={ `components-tab-button ${ preview ? 'is-active' : '' }` } onClick={ this.preview }>
+										<span>{ __( 'Preview' ) }</span>
+									</button>
+								</li>
+							</ul>
+						</BlockControls>
+					}
+					{ preview
+						? <div dangerouslySetInnerHTML={ { __html: attributes.content } } />
+						: <TextareaAutosize
+							value={ attributes.content }
+							onChange={ ( event ) => setAttributes( { content: event.target.value } ) }
+						/>
+					}
+				</div>
+			);
+		}
+	},
+
+	save( { attributes } ) {
+		return attributes.content;
+	},
+} );

blocks/library/html/style.scss

@@ -0,0 +1,14 @@
+div[data-type="core/html"] {
+	textarea {
+		box-shadow: none;
+		font-family: $editor-html-font;
+		font-size: $text-editor-font-size;
+		color: $dark-gray-800;
+		border: 1px solid $light-gray-500;
+		border-radius: 4px;
+		padding: .8em 1.6em;
+		margin: 0;
+		overflow-x: auto;
+		width: 100%;
+	}
+}

blocks/library/index.js

@@ -11,6 +11,7 @@ import './pullquote';
 import './table';
 import './preformatted';
 import './code';
+import './html';
 import './freeform';
 import './latest-posts';
 import './cover-image';

blocks/test/fixtures/core-html.html

@@ -0,0 +1,4 @@
+<!-- wp:core/html -->
+<h1>Some HTML code</h1>
+<marquee>This text will scroll from right to left</marquee>
+<!-- /wp:core/html -->

blocks/test/fixtures/core-html.json

@@ -0,0 +1,19 @@
+[
+    {
+        "uid": "_uid_0",
+        "name": "core/html",
+        "attributes": {
+            "content": [
+                {
+                    "children": "Some HTML code"
+                    "type": "h1"
+                }
+                "\n"
+                {
+                    "children": "This text will scroll from right to left"
+                    "type": "marquee"
+                }
+            ]
+        }
+    }
+]

blocks/test/fixtures/core-html.serialized.html

@@ -0,0 +1,4 @@
+<!-- wp:core/html -->
+<h1>Some HTML code</h1>
+<marquee>This text will scroll from right to left</marquee>
+<!-- /wp:core/html -->