From d66bbea2dd80e980216ce4d7e0c0cf702dae009a Mon Sep 17 00:00:00 2001
From: BE-Webdesign <cromleyedwin89@gmail.com>
Date: Fri, 24 Mar 2017 23:47:12 -0400
Subject: [PATCH] Plugin: Heading Block Initial Attempt

Here is an initial attempt at using the current API for a heading block.
I just guessed as to how this should be structured, honestly have no
idea but I tried to mimic the codebase the best I could.
---
 blocks/components/wp-heading/index.js | 14 ++++++++++++++
 blocks/index.js                       |  1 +
 editor/blocks/heading-block/index.js  | 23 +++++++++++++++++++++++
 editor/blocks/index.js                |  1 +
 4 files changed, 39 insertions(+)
 create mode 100644 blocks/components/wp-heading/index.js
 create mode 100644 editor/blocks/heading-block/index.js

diff --git a/blocks/components/wp-heading/index.js b/blocks/components/wp-heading/index.js
new file mode 100644
index 00000000000000..5c38654ea47f8b
--- /dev/null
+++ b/blocks/components/wp-heading/index.js
@@ -0,0 +1,14 @@
+export default function EditableHeading( { value, headingType } ) {
+	const headingsMap = {
+		H1: 'h1',
+		H2: 'h2',
+		H3: 'h3',
+		H4: 'h4',
+		H5: 'h5',
+		H6: 'h6',
+	};
+
+	const mapHeading = ( nodeName ) => headingsMap[ nodeName ];
+
+	return wp.element.createElement( mapHeading( headingType ), null, value );
+}
diff --git a/blocks/index.js b/blocks/index.js
index 837a4735e8c4ed..5a466db5775071 100644
--- a/blocks/index.js
+++ b/blocks/index.js
@@ -7,6 +7,7 @@ import * as query from 'hpq';
 
 export { query };
 export { default as Editable } from './components/editable';
+export { default as EditableHeading } from './components/wp-heading';
 export { default as parse } from './parser';
 
 /**
diff --git a/editor/blocks/heading-block/index.js b/editor/blocks/heading-block/index.js
new file mode 100644
index 00000000000000..7b5b9dd22cef62
--- /dev/null
+++ b/editor/blocks/heading-block/index.js
@@ -0,0 +1,23 @@
+const { query, html, prop } = wp.blocks.query;
+
+wp.blocks.registerBlock( 'wp/heading', {
+	title: 'Heading',
+	icon: 'heading',
+
+	attributes: {
+		value: query( 'h1,h2,h3,h4,h5,h6', html() ),
+		headingType: query( 'h1,h2,h3,h4,h5,h6', prop( 'nodeName' ) ),
+	},
+
+	edit( attributes, onChange ) {
+		return wp.element.createElement( wp.blocks.EditableHeading, {
+			value: attributes.value,
+			headingType: attributes.headingType,
+			onChange: ( value ) => onChange( { value } )
+		} );
+	},
+
+	save( attributes ) {
+		return wp.element.createElement( 'p', null, attributes.value );
+	}
+} );
diff --git a/editor/blocks/index.js b/editor/blocks/index.js
index 115a7dba9740d7..c7888d13c3df7c 100644
--- a/editor/blocks/index.js
+++ b/editor/blocks/index.js
@@ -1 +1,2 @@
 import './text-block';
+import './heading-block';