Add subhead block (#2091)

blocks/library/index.js

@@ -23,3 +23,4 @@ import './video';
 import './audio';
 import './block';
 import './paragraph';
+import './subhead';

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;
+}

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>;
+	},
+} );

blocks/library/subhead/style.scss

@@ -0,0 +1,5 @@
+p.wp-block-subhead {
+	font-size: 1.1em;
+	font-style: italic;
+	opacity: 0.75;
+}

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 -->

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>"
+    }
+]

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"
+    }
+]

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 -->