Add verse block (#1809)

* Add block and tests.
* Adjust pre text block title and verse icon.
* Exclude link from format toolbar and darken text color.

blocks/library/index.js

@@ -15,3 +15,4 @@ import './html';
 import './freeform';
 import './latest-posts';
 import './cover-image';
+import './verse';

blocks/library/verse/index.js

@@ -0,0 +1,69 @@
+/**
+ * WordPress
+ */
+import { __ } from 'i18n';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { registerBlockType, createBlock, query } from '../../api';
+import Editable from '../../editable';
+
+const { children } = query;
+
+registerBlockType( 'core/verse', {
+	title: __( 'Verse' ),
+
+	icon: 'carrot',
+
+	category: 'formatting',
+
+	attributes: {
+		content: children( 'pre' ),
+	},
+
+	transforms: {
+		from: [
+			{
+				type: 'block',
+				blocks: [ 'core/text' ],
+				transform: ( attributes ) =>
+					createBlock( 'core/verse', attributes ),
+			},
+		],
+		to: [
+			{
+				type: 'block',
+				blocks: [ 'core/text' ],
+				transform: ( attributes ) =>
+					createBlock( 'core/text', attributes ),
+			},
+		],
+	},
+
+	edit( { attributes, setAttributes, focus, setFocus, className } ) {
+		const { content } = attributes;
+
+		return (
+			<Editable
+				tagName="pre"
+				value={ content }
+				onChange={ ( nextContent ) => {
+					setAttributes( {
+						content: nextContent,
+					} );
+				} }
+				focus={ focus }
+				onFocus={ setFocus }
+				placeholder={ __( 'Write…' ) }
+				className={ className }
+				formattingControls={ [ 'bold', 'italic', 'strikethrough' ] }
+			/>
+		);
+	},
+
+	save( { attributes, className } ) {
+		return <pre className={ className }>{ attributes.content }</pre>;
+	},
+} );

blocks/library/verse/style.scss

@@ -0,0 +1,8 @@
+pre.wp-block-verse,
+.wp-block-verse pre {
+	color: $dark-gray-900;
+	white-space: nowrap;
+	font-family: inherit;
+	font-size: inherit;
+	padding: 1em;
+}

blocks/test/fixtures/core__verse.html

@@ -0,0 +1,3 @@
+<!-- wp:core/verse -->
+<pre class="wp-block-verse">A <em>verse</em>…<br>And more!</pre>
+<!-- /wp:core/verse -->

blocks/test/fixtures/core__verse.json

@@ -0,0 +1,20 @@
+[
+    {
+        "uid": "_uid_0",
+        "name": "core/verse",
+        "attributes": {
+            "content": [
+                "A ",
+                {
+                    "type": "em",
+                    "children": "verse"
+                },
+                "…",
+                {
+                    "type": "br"
+                },
+                "And more!"
+            ]
+        }
+    }
+]

blocks/test/fixtures/core__verse.parsed.json

@@ -0,0 +1,11 @@
+[
+    {
+        "blockName": "core/verse",
+        "attrs": null,
+        "rawContent": "\n<pre class=\"wp-block-verse\">A <em>verse</em>…<br>And more!</pre>\n"
+    },
+    {
+        "attrs": {},
+        "rawContent": "\n"
+    }
+]

blocks/test/fixtures/core__verse.serialized.html

@@ -0,0 +1,3 @@
+<!-- wp:core/verse -->
+<pre class="wp-block-verse">A <em>verse</em>…<br/>And more!</pre>
+<!-- /wp:core/verse -->