diff --git a/editor/assets/stylesheets/_z-index.scss b/editor/assets/stylesheets/_z-index.scss
index 06224f7b6c9448..3ff782acf2fa80 100644
--- a/editor/assets/stylesheets/_z-index.scss
+++ b/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 ) {
diff --git a/editor/selectors.js b/editor/selectors.js
index 886314c4082b56..5a31a7791c2abd 100644
--- a/editor/selectors.js
+++ b/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 ) {
diff --git a/editor/sidebar/post-excerpt/index.js b/editor/sidebar/post-excerpt/index.js
new file mode 100644
index 00000000000000..db6d3362f2f5f6
--- /dev/null
+++ b/editor/sidebar/post-excerpt/index.js
@@ -0,0 +1,52 @@
+/**
+ * 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 (
+
+
+
+ { __( 'Learn more about manual excerpts' ) }
+
+
+ );
+}
+
+export default connect(
+ ( state ) => {
+ return {
+ excerpt: getEditedPostExcerpt( state ),
+ };
+ },
+ ( dispatch ) => {
+ return {
+ onUpdateExcerpt( excerpt ) {
+ dispatch( editPost( { excerpt } ) );
+ },
+ };
+ }
+)( PostExcerpt );
+
diff --git a/editor/sidebar/post-excerpt/style.scss b/editor/sidebar/post-excerpt/style.scss
new file mode 100644
index 00000000000000..72dc4489253e2e
--- /dev/null
+++ b/editor/sidebar/post-excerpt/style.scss
@@ -0,0 +1,6 @@
+.editor-post-excerpt__textarea {
+ width: 100%;
+ height: 80px;
+ margin-top: 20px;
+ margin-bottom: 10px;
+}
diff --git a/editor/sidebar/post-settings/index.js b/editor/sidebar/post-settings/index.js
index 57b32b2d55c62b..ce23efe6395592 100644
--- a/editor/sidebar/post-settings/index.js
+++ b/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 } ) => {
+
);
};
diff --git a/editor/sidebar/post-visibility/style.scss b/editor/sidebar/post-visibility/style.scss
index a1a7dfd294d236..453c0201c0a263 100644
--- a/editor/sidebar/post-visibility/style.scss
+++ b/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 {
diff --git a/editor/test/selectors.js b/editor/test/selectors.js
index f64e30bd876568..3ca9ae21c69fac 100644
--- a/editor/test/selectors.js
+++ b/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 = {