Chrome: Adding the post excerpt panel

editor/assets/stylesheets/_z-index.scss

@@ -7,6 +7,7 @@ $z-layers: (
 	'.editor-visual-editor__block {core/image aligned left or right}': 10,
 	'.editor-visual-editor__block-controls': 1,
 	'.editor-header': 20,
+	'.editor-post-visibility__dialog': 30,
 );
 
 @function z-index( $key ) {

editor/selectors.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { first, last } from 'lodash';
+import { first, last, get } from 'lodash';
 
 /**
  * Internal dependencies
@@ -60,10 +60,16 @@ export function getEditedPostVisibility( state ) {
 
 export function getEditedPostTitle( state ) {
 	return state.editor.edits.title === undefined
-		? state.currentPost.title.raw
+		? get( state.currentPost, 'title.raw' )
 		: state.editor.edits.title;
 }
 
+export function getEditedPostExcerpt( state ) {
+	return state.editor.edits.excerpt === undefined
+		? get( state.currentPost, 'excerpt.raw' )
+		: state.editor.edits.excerpt;
+}
+
 export function getEditedPostPreviewLink( state ) {
 	const link = state.currentPost.link;
 	if ( ! link ) {

editor/sidebar/post-excerpt/index.js

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from 'i18n';
+import PanelBody from 'components/panel/body';
+
+/**
+ * Internal Dependencies
+ */
+import './style.scss';
+import { getEditedPostExcerpt } from '../../selectors';
+import { editPost } from '../../actions';
+
+function PostExcerpt( { excerpt, onUpdateExcerpt } ) {
+	const onChange = ( event ) => onUpdateExcerpt( event.target.value );
+
+	return (
+		<PanelBody title={ __( 'Excerpt' ) } initialOpen={ false }>
+			<textarea
+				className="editor-post-excerpt__textarea"
+				onChange={ onChange }
+				value={ excerpt }
+				placeholder={ __( 'Write an excerpt (optional)' ) }
+				aria-label={ __( 'Excerpt' ) }
+			/>
+			<a href="https://codex.wordpress.org/Excerpt" target="_blank">
+				{ __( 'Learn more about manual excerpts' ) }
+			</a>
+		</PanelBody>
+	);
+	/* eslint-enable jsx-a11y/label-has-for */
+}
+
+export default connect(
+	( state ) => ( {
+		excerpt: getEditedPostExcerpt( state ),
+	} ),
+	( dispatch ) => {
+		return {
+			onUpdateExcerpt( excerpt ) {
+				dispatch( editPost( { excerpt } ) );
+			},
+		};
+	}
+)( PostExcerpt );
+

editor/sidebar/post-excerpt/style.scss

@@ -0,0 +1,6 @@
+.editor-post-excerpt__textarea {
+	width: 100%;
+	height: 80px;
+	margin-top: 20px;
+	margin-bottom: 10px;
+}

editor/sidebar/post-settings/index.js

@@ -16,6 +16,7 @@ import IconButton from 'components/icon-button';
  */
 import './style.scss';
 import PostStatus from '../post-status';
+import PostExcerpt from '../post-excerpt';
 
 const PostSettings = ( { toggleSidebar } ) => {
 	return (
@@ -30,6 +31,7 @@ const PostSettings = ( { toggleSidebar } ) => {
 				</div>
 			</PanelHeader>
 			<PostStatus />
+			<PostExcerpt />
 		</Panel>
 	);
 };

editor/sidebar/post-visibility/style.scss

@@ -29,6 +29,7 @@
 	background: $white;
 	padding: 10px;
 	min-width: 240px;
+	z-index: z-index( '.editor-post-visibility__dialog' );
 }
 
 .editor-post-visibility__dialog-arrow {

editor/test/selectors.js

@@ -16,6 +16,7 @@ import {
 	getPostEdits,
 	getEditedPostStatus,
 	getEditedPostTitle,
+	getEditedPostExcerpt,
 	getEditedPostVisibility,
 	getEditedPostPreviewLink,
 	getBlock,
@@ -223,6 +224,34 @@ describe( 'selectors', () => {
 		} );
 	} );
 
+	describe( 'getEditedPostExcerpt', () => {
+		it( 'should return the post saved excerpt if the excerpt is not edited', () => {
+			const state = {
+				currentPost: {
+					excerpt: { raw: 'sassel' },
+				},
+				editor: {
+					edits: { status: 'private' },
+				},
+			};
+
+			expect( getEditedPostExcerpt( state ) ).to.equal( 'sassel' );
+		} );
+
+		it( 'should return the edited excerpt', () => {
+			const state = {
+				currentPost: {
+					excerpt: { raw: 'sassel' },
+				},
+				editor: {
+					edits: { excerpt: 'youcha' },
+				},
+			};
+
+			expect( getEditedPostExcerpt( state ) ).to.equal( 'youcha' );
+		} );
+	} );
+
 	describe( 'getEditedPostVisibility', () => {
 		it( 'should return public by default', () => {
 			const state = {