Title as a block

blocks/library/index.js

@@ -1,6 +1,7 @@
 import './text';
 import './image';
 import './gallery';
+import './title';
 import './heading';
 import './quote';
 import './embed';

blocks/library/title/index.js

@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from 'i18n';
+
+/**
+ * Internal dependencies
+ */
+// import './block.scss';
+import { registerBlockType, createBlock, query as hpq } from '../../api';
+import Editable from '../../editable';
+import BlockControls from '../../block-controls';
+import AlignmentToolbar from '../../alignment-toolbar';
+import InspectorControls from '../../inspector-controls';
+import BlockDescription from '../../block-description';
+
+const { children } = hpq;
+
+registerBlockType( 'core/title', {
+	title: __( 'Title' ),
+
+	icon: 'heading',
+
+	category: 'common',
+
+	useOnce: true,
+
+	className: false,
+
+	attributes: {
+		content: children( 'h1' ),
+	},
+
+	transforms: {
+		from: [
+			{
+				type: 'pattern',
+				regExp: /^#\s/,
+				transform: ( { content } ) => {
+					return createBlock( 'core/title', {
+						content,
+					} );
+				},
+			},
+		],
+	},
+
+	edit( { attributes, setAttributes, focus, setFocus, mergeBlocks, insertBlocksAfter } ) {
+		const { align, content, placeholder } = attributes;
+
+		return [
+			focus && (
+				<InspectorControls key="inspector">
+					<BlockDescription>
+						<p>{ __( 'This is the document’s title. Usually it’s placed at the very top.' ) }</p>
+					</BlockDescription>
+				</InspectorControls>
+			),
+			focus && (
+				<BlockControls key="controls">
+					<AlignmentToolbar
+						value={ align }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { align: nextAlign } );
+						} }
+					/>
+				</BlockControls>
+			),
+			<Editable
+				key="editor"
+				tagName="h1"
+				value={ content }
+				focus={ focus }
+				onFocus={ setFocus }
+				onChange={ ( value ) => setAttributes( { content: value } ) }
+				onMerge={ mergeBlocks }
+				onSplit={ ( before, after, ...blocks ) => {
+					setAttributes( { content: before } );
+					insertBlocksAfter( [
+						...blocks,
+						createBlock( 'core/text', { content: after } ),
+					] );
+				} }
+				style={ { textAlign: align } }
+				placeholder={ placeholder || __( 'Write title…' ) }
+			/>,
+		];
+	},
+
+	save( { attributes } ) {
+		const { align, content } = attributes;
+
+		return (
+			<h1 style={ { textAlign: align } }>
+				{ content }
+			</h1>
+		);
+	},
+} );

blocks/test/fixtures/core__title.html

@@ -0,0 +1,3 @@
+<!-- wp:core/title -->
+<h1>A <em>big</em> title</h1>
+<!-- /wp:core/title -->

blocks/test/fixtures/core__title.json

@@ -0,0 +1,17 @@
+[
+    {
+        "uid": "_uid_0",
+        "name": "core/title",
+        "isValid": true,
+        "attributes": {
+            "content": [
+                "A ",
+                {
+                    "type": "em",
+                    "children": "big"
+                },
+                " title"
+            ]
+        }
+    }
+]

blocks/test/fixtures/core__title.parsed.json

@@ -0,0 +1,11 @@
+[
+    {
+        "blockName": "core/title",
+        "attrs": null,
+        "rawContent": "\n<h1>A <em>big</em> title</h1>\n"
+    },
+    {
+        "attrs": {},
+        "rawContent": "\n"
+    }
+]

blocks/test/fixtures/core__title.serialized.html

@@ -0,0 +1,3 @@
+<!-- wp:core/title -->
+<h1>A <em>big</em> title</h1>
+<!-- /wp:core/title -->

editor/modes/text-editor/index.js

@@ -14,7 +14,6 @@ import { serialize, parse } from 'blocks';
  * Internal dependencies
  */
 import './style.scss';
-import PostTitle from '../../post-title';
 import { getBlocks } from '../../selectors';
 
 class TextEditor extends Component {
@@ -83,7 +82,6 @@ class TextEditor extends Component {
 					</div>
 				</header>
 				<div className="editor-text-editor__body">
-					<PostTitle />
 					<Textarea
 						autoComplete="off"
 						value={ value }

editor/modes/visual-editor/index.js

@@ -16,7 +16,6 @@ import { KeyboardShortcuts } from 'components';
  */
 import './style.scss';
 import VisualEditorBlockList from './block-list';
-import PostTitle from '../../post-title';
 import { getBlockUids } from '../../selectors';
 import { clearSelectedBlock, multiSelect, redo, undo } from '../../actions';
 
@@ -87,7 +86,6 @@ class VisualEditor extends Component {
 					'mod+z': this.undoOrRedo,
 					'mod+shift+z': this.undoOrRedo,
 				} } />
-				<PostTitle />
 				<VisualEditorBlockList ref={ this.bindBlocksContainer } />
 			</div>
 		);