Add verse block

blocks/library/index.js

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

blocks/library/preformatted/index.js

@@ -13,7 +13,7 @@ import Editable from '../../editable';
 const { children } = query;
 
 registerBlockType( 'core/preformatted', {
-	title: __( 'Preformatted' ),
+	title: __( 'Preformatted Text' ),
 
 	icon: 'text',
 

blocks/library/verse/index.js

@@ -0,0 +1,68 @@
+/**
+ * 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: 'edit',
+
+	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 }
+			/>
+		);
+	},
+
+	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 {
+	white-space: nowrap;
+	font-family: inherit;
+	font-size: inherit;
+	color: inherit;
+	padding: 1em;
+}