Components: Extract a reusable post title component

editor/components/index.js

@@ -27,6 +27,7 @@ export { default as PostStickyCheck } from './post-sticky/check';
 export { default as PostTaxonomies } from './post-taxonomies';
 export { default as PostTextEditor } from './post-text-editor';
 export { default as PostTextEditorToolbar } from './post-text-editor/toolbar';
+export { default as PostTitle } from './post-title';
 export { default as PostTrash } from './post-trash';
 export { default as PostVisibility } from './post-visibility';
 export { default as PostVisibilityLabel } from './post-visibility/label';

editor/post-permalink/index.js → editor/components/post-permalink/index.js

@@ -14,7 +14,7 @@ import { Dashicon, ClipboardButton, Button } from '@wordpress/components';
  * Internal Dependencies
  */
 import './style.scss';
-import { isEditedPostNew, getEditedPostAttribute } from '../selectors';
+import { isEditedPostNew, getEditedPostAttribute } from '../../selectors';
 
 class PostPermalink extends Component {
 	constructor() {

editor/post-permalink/style.scss → editor/components/post-permalink/style.scss

@@ -1,21 +1,12 @@
 .editor-post-permalink {
 	display: inline-flex;
 	align-items: center;
-	position: absolute;
-	top: -34px;
-	box-shadow: $shadow-popover;
 	border: 1px solid $light-gray-500;
 	background: $white;
 	padding: 5px;
 	font-family: $default-font;
 	font-size: $default-font-size;
-	left: 0;
-	right: 0;
-
-	@include break-small() {
-		left: $block-padding + $block-mover-padding-visible - 2px;
-		right: $block-padding + $block-mover-padding-visible - 2px;
-	}
+	height: 40px;
 }
 
 .editor-post-permalink__label {

editor/post-title/index.js → editor/components/post-title/index.js

@@ -17,9 +17,9 @@ import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
  * Internal dependencies
  */
 import './style.scss';
-import { getEditedPostTitle } from '../selectors';
-import { insertBlock, editPost, clearSelectedBlock } from '../actions';
 import PostPermalink from '../post-permalink';
+import { getEditedPostTitle } from '../../selectors';
+import { insertBlock, editPost, clearSelectedBlock } from '../../actions';
 
 /**
  * Constants

editor/components/post-title/style.scss

@@ -0,0 +1,48 @@
+.editor-post-title {
+	position: relative;
+	padding: 5px 0;
+
+	h1 {
+		border: 1px solid transparent;
+		font-size: $editor-font-size;
+		transition: 0.2s outline;
+		margin-top: 0;
+		margin-bottom: 0;
+		padding: $block-padding;
+	}
+
+	&:hover h1 {
+		border: 1px solid $light-gray-500;
+		transition: 0.2s outline;
+	}
+
+	&.is-selected h1 {
+		border: 1px solid $light-gray-500;
+		transition: 0.2s outline;
+	}
+}
+
+textarea.editor-post-title__input {
+	display: block;
+	font-size: 2em;
+	font-family: $editor-font;
+	line-height: $default-line-height;
+	outline: none;
+	border: none;
+	box-shadow: none;
+	width: 100%;
+	padding: 5px 0;
+	margin: 0;
+
+	&:focus {
+		outline: none;
+		box-shadow: none;
+	}
+}
+
+.editor-post-title .editor-post-permalink {
+	position: absolute;
+	top: -34px;
+	left: 0;
+	right: 0;
+}

editor/modes/text-editor/index.js

@@ -2,8 +2,7 @@
  * Internal dependencies
  */
 import './style.scss';
-import { PostTextEditor, PostTextEditorToolbar } from '../../components';
-import PostTitle from '../../post-title';
+import { PostTextEditor, PostTextEditorToolbar, PostTitle } from '../../components';
 
 function TextEditor() {
 	return (

editor/modes/visual-editor/index.js

@@ -16,8 +16,8 @@ import { KeyboardShortcuts } from '@wordpress/components';
 import './style.scss';
 import VisualEditorBlockList from './block-list';
 import VisualEditorInserter from './inserter';
-import PostTitle from '../../post-title';
 import WritingFlow from '../../writing-flow';
+import { PostTitle } from '../../components';
 import { getBlockUids, getMultiSelectedBlockUids } from '../../selectors';
 import { clearSelectedBlock, multiSelect, redo, undo, removeBlocks } from '../../actions';
 

editor/modes/visual-editor/style.scss

@@ -12,11 +12,6 @@
 	}
 }
 
-.editor-visual-editor {
-	margin-left: auto;
-	margin-right: auto;
-}
-
 .editor-visual-editor__block {
 	margin-left: auto;
 	margin-right: auto;
@@ -566,3 +561,23 @@ $sticky-bottom-offset: 20px;
 	margin-top: - $sticky-bottom-offset - 1px;
 	padding-top: 2px;
 }
+
+.editor-visual-editor .editor-post-title {
+	margin-left: auto;
+	margin-right: auto;
+	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
+
+	.editor-post-permalink {
+		left: $block-padding;
+		right: $block-padding;
+	}
+
+	@include break-small() {
+		padding: 5px ( $block-mover-padding-visible );
+
+		.editor-post-permalink {
+			left: $block-mover-padding-visible;
+			right: $block-mover-padding-visible;
+		}
+	}
+}