From d591e58b7a623ad7825425bc5e001fb140141512 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20Van=C2=A0Dorpe?= <iseulde@automattic.com>
Date: Fri, 19 Jan 2018 18:00:06 +0100
Subject: [PATCH] Add subhead block (#2091)

---
 blocks/library/index.js                       |  1 +
 blocks/library/subhead/editor.scss            |  6 ++
 blocks/library/subhead/index.js               | 91 +++++++++++++++++++
 blocks/library/subhead/style.scss             |  5 +
 blocks/test/fixtures/core__subhead.html       |  3 +
 blocks/test/fixtures/core__subhead.json       | 18 ++++
 .../test/fixtures/core__subhead.parsed.json   | 11 +++
 .../fixtures/core__subhead.serialized.html    |  3 +
 8 files changed, 138 insertions(+)
 create mode 100644 blocks/library/subhead/editor.scss
 create mode 100644 blocks/library/subhead/index.js
 create mode 100644 blocks/library/subhead/style.scss
 create mode 100644 blocks/test/fixtures/core__subhead.html
 create mode 100644 blocks/test/fixtures/core__subhead.json
 create mode 100644 blocks/test/fixtures/core__subhead.parsed.json
 create mode 100644 blocks/test/fixtures/core__subhead.serialized.html

diff --git a/blocks/library/index.js b/blocks/library/index.js
index 2076db1f9dc5a..e87daedbc0673 100644
--- a/blocks/library/index.js
+++ b/blocks/library/index.js
@@ -23,3 +23,4 @@ import './video';
 import './audio';
 import './block';
 import './paragraph';
+import './subhead';
diff --git a/blocks/library/subhead/editor.scss b/blocks/library/subhead/editor.scss
new file mode 100644
index 0000000000000..019eb618cd4e7
--- /dev/null
+++ b/blocks/library/subhead/editor.scss
@@ -0,0 +1,6 @@
+// Overwrite .editor-visual-editor p
+.editor-visual-editor p.wp-block-subhead {
+	color: $dark-gray-300;
+	font-size: 1.1em;
+	font-style: italic;
+}
diff --git a/blocks/library/subhead/index.js b/blocks/library/subhead/index.js
new file mode 100644
index 0000000000000..af9f787827623
--- /dev/null
+++ b/blocks/library/subhead/index.js
@@ -0,0 +1,91 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+import './style.scss';
+import { registerBlockType, createBlock } from '../../api';
+import Editable from '../../editable';
+import InspectorControls from '../../inspector-controls';
+import BlockDescription from '../../block-description';
+
+registerBlockType( 'core/subhead', {
+	title: __( 'Subhead' ),
+
+	icon: 'text',
+
+	category: 'common',
+
+	useOnce: true,
+
+	attributes: {
+		content: {
+			type: 'array',
+			source: 'children',
+			selector: 'p',
+		},
+	},
+
+	transforms: {
+		from: [
+			{
+				type: 'block',
+				blocks: [ 'core/paragraph' ],
+				transform: ( { content } ) => {
+					return createBlock( 'core/subhead', {
+						content,
+					} );
+				},
+			},
+		],
+		to: [
+			{
+				type: 'block',
+				blocks: [ 'core/paragraph' ],
+				transform: ( { content } ) => {
+					return createBlock( 'core/paragraph', {
+						content,
+					} );
+				},
+			},
+		],
+	},
+
+	edit( { attributes, setAttributes, focus, setFocus, className } ) {
+		const { content, placeholder } = attributes;
+
+		return [
+			focus && (
+				<InspectorControls key="inspector">
+					<BlockDescription>
+						<p>{ __( 'Explanatory text under the main heading of an article.' ) }</p>
+					</BlockDescription>
+				</InspectorControls>
+			),
+			<Editable
+				tagName="p"
+				key="editable"
+				value={ content }
+				onChange={ ( nextContent ) => {
+					setAttributes( {
+						content: nextContent,
+					} );
+				} }
+				focus={ focus }
+				onFocus={ setFocus }
+				className={ className }
+				placeholder={ placeholder || __( 'Write subhead…' ) }
+			/>,
+		];
+	},
+
+	save( { attributes, className } ) {
+		const { content } = attributes;
+
+		return <p className={ className }>{ content }</p>;
+	},
+} );
diff --git a/blocks/library/subhead/style.scss b/blocks/library/subhead/style.scss
new file mode 100644
index 0000000000000..6e6f48e6bf827
--- /dev/null
+++ b/blocks/library/subhead/style.scss
@@ -0,0 +1,5 @@
+p.wp-block-subhead {
+	font-size: 1.1em;
+	font-style: italic;
+	opacity: 0.75;
+}
diff --git a/blocks/test/fixtures/core__subhead.html b/blocks/test/fixtures/core__subhead.html
new file mode 100644
index 0000000000000..61cf93189617e
--- /dev/null
+++ b/blocks/test/fixtures/core__subhead.html
@@ -0,0 +1,3 @@
+<!-- wp:core/subhead -->
+<p class="wp-block-subhead">This is a <em>subhead</em>.</p>
+<!-- /wp:core/subhead -->
diff --git a/blocks/test/fixtures/core__subhead.json b/blocks/test/fixtures/core__subhead.json
new file mode 100644
index 0000000000000..20e5037001563
--- /dev/null
+++ b/blocks/test/fixtures/core__subhead.json
@@ -0,0 +1,18 @@
+[
+    {
+        "uid": "_uid_0",
+        "name": "core/subhead",
+        "isValid": true,
+        "attributes": {
+            "content": [
+                "This is a ",
+                {
+                    "type": "em",
+                    "children": "subhead"
+                },
+                "."
+            ]
+        },
+        "originalContent": "<p class=\"wp-block-subhead\">This is a <em>subhead</em>.</p>"
+    }
+]
diff --git a/blocks/test/fixtures/core__subhead.parsed.json b/blocks/test/fixtures/core__subhead.parsed.json
new file mode 100644
index 0000000000000..a36ff7083edec
--- /dev/null
+++ b/blocks/test/fixtures/core__subhead.parsed.json
@@ -0,0 +1,11 @@
+[
+    {
+        "blockName": "core/subhead",
+        "attrs": null,"innerBlocks": [],
+        "innerHTML": "\n<p class=\"wp-block-subhead\">This is a <em>subhead</em>.</p>\n"
+    },
+    {
+        "attrs": {},
+        "innerHTML": "\n"
+    }
+]
diff --git a/blocks/test/fixtures/core__subhead.serialized.html b/blocks/test/fixtures/core__subhead.serialized.html
new file mode 100644
index 0000000000000..23468192081a0
--- /dev/null
+++ b/blocks/test/fixtures/core__subhead.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:subhead -->
+<p class="wp-block-subhead">This is a <em>subhead</em>.</p>
+<!-- /wp:subhead -->