Improved pre/post publish flow.

Summary of button labels and flows: Editors and admins: Update — updates immediately, no pos-publish flow Publish... — opens post-publish flow Schedule... — opens post-publish flow Contributors: Publish... — opens post-publish flow where the confirm button says "Submit for Review".
WordPress · Mar 23, 2018 · 9073c22 · 9073c22
1 parent db7fcb9
commit 9073c22
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 9 deletions.
diff --git a/editor/components/post-publish-panel/index.js b/editor/components/post-publish-panel/index.js
@@ -21,14 +21,15 @@ import PostPublishPanelPostpublish from './postpublish';
 import {
 	getCurrentPostType,
 	isCurrentPostPublished,
+	isEditedPostBeingScheduled,
 	isSavingPost,
 	isEditedPostDirty,
 } from '../../store/selectors';
 
 class PostPublishPanel extends Component {
 	constructor() {
 		super( ...arguments );
-		this.onPublish = this.onPublish.bind( this );
+		this.onSubmit = this.onSubmit.bind( this );
 		this.state = {
 			loading: false,
 			published: false,
@@ -56,21 +57,26 @@ class PostPublishPanel extends Component {
 		}
 	}
 
-	onPublish() {
+	onSubmit() {
+		const { isBeingScheduled, user, onClose } = this.props;
+		const userCanPublishPosts = get( user.data, [ 'post_type_capabilities', 'publish_posts' ], false );
+		const isContributor = user.data && ! userCanPublishPosts;
+		if ( isBeingScheduled || isContributor ) {
+			onClose();
+			return;
+		}
 		this.setState( { loading: true } );
 	}
 
 	render() {
-		const { onClose, user, forceIsDirty, forceIsSaving } = this.props;
+		const { onClose, forceIsDirty, forceIsSaving } = this.props;
 		const { loading, published } = this.state;
-		const canPublish = get( user.data, [ 'post_type_capabilities', 'publish_posts' ], false );
-
 		return (
 			<div className="editor-post-publish-panel">
 				<div className="editor-post-publish-panel__header">
 					{ ! published && (
 						<div className="editor-post-publish-panel__header-publish-button">
-							<PostPublishButton onSubmit={ this.onPublish } forceIsDirty={ forceIsDirty } forceIsSaving={ forceIsSaving } />
+							<PostPublishButton onSubmit={ this.onSubmit } forceIsDirty={ forceIsDirty } forceIsSaving={ forceIsSaving } />
 						</div>
 					) }
 					{ published && (
@@ -83,7 +89,7 @@ class PostPublishPanel extends Component {
 					/>
 				</div>
 				<div className="editor-post-publish-panel__content">
-					{ canPublish && ! loading && ! published && <PostPublishPanelPrepublish /> }
+					{ ! loading && ! published && <PostPublishPanelPrepublish /> }
 					{ loading && ! published && <Spinner /> }
 					{ published && <PostPublishPanelPostpublish /> }
 				</div>
@@ -96,6 +102,7 @@ const applyConnect = connect(
 	( state ) => {
 		return {
 			postType: getCurrentPostType( state ),
+			isBeingScheduled: isEditedPostBeingScheduled( state ),
 			isPublished: isCurrentPostPublished( state ),
 			isSaving: isSavingPost( state ),
 			isDirty: isEditedPostDirty( state ),

diff --git a/editor/components/post-publish-panel/toggle.js b/editor/components/post-publish-panel/toggle.js
@@ -21,6 +21,8 @@ import {
 	isEditedPostPublishable,
 	isCurrentPostPublished,
 	isEditedPostBeingScheduled,
+	isEditedPostPending,
+	isEditedPostScheduled,
 	getCurrentPostType,
 } from '../../store/selectors';
 
@@ -31,6 +33,8 @@ function PostPublishPanelToggle( {
 	isSaveable,
 	isPublished,
 	isBeingScheduled,
+	isPending,
+	isScheduled,
 	onToggle,
 	isOpen,
 	forceIsDirty,
@@ -42,7 +46,7 @@ function PostPublishPanelToggle( {
 
 	const userCanPublishPosts = get( user.data, [ 'post_type_capabilities', 'publish_posts' ], false );
 	const isContributor = user.data && ! userCanPublishPosts;
-	const showToggle = ! isContributor && ! isPublished && ! isBeingScheduled;
+	const showToggle = ! isPublished && ! ( isScheduled && isBeingScheduled ) && ! ( isPending && isContributor );
 
 	if ( ! showToggle ) {
 		return <PostPublishButton forceIsDirty={ forceIsDirty } forceIsSaving={ forceIsSaving } />;
@@ -57,7 +61,7 @@ function PostPublishPanelToggle( {
 			disabled={ ! isButtonEnabled }
 			isBusy={ isSaving && isPublished }
 		>
-			{ __( 'Publish...' ) }
+			{ isBeingScheduled ? __( 'Schedule...' ) : __( 'Publish...' ) }
 		</Button>
 	);
 }
@@ -68,6 +72,8 @@ const applyConnect = connect(
 		isSaveable: isEditedPostSaveable( state ),
 		isPublishable: isEditedPostPublishable( state ),
 		isPublished: isCurrentPostPublished( state ),
+		isScheduled: isEditedPostScheduled( state ),
+		isPending: isEditedPostPending( state ),
 		isBeingScheduled: isEditedPostBeingScheduled( state ),
 		postType: getCurrentPostType( state ),
 	} ),

diff --git a/editor/store/selectors.js b/editor/store/selectors.js
@@ -88,6 +88,28 @@ export function isEditedPostDirty( state ) {
 	return state.editor.isDirty;
 }
 
+/**
+ * Returns true if post is pending review.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether unsaved values exist.
+ */
+export function isEditedPostPending( state ) {
+	return getCurrentPost( state ).status === 'pending';
+}
+
+/**
+ * Returns true if post is already scheduled.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether unsaved values exist.
+ */
+export function isEditedPostScheduled( state ) {
+	return getCurrentPost( state ).status === 'future';
+}
+
 /**
  * Returns true if there are no unsaved values for the current edit session and if
  * the currently edited post is new (and has never been saved before).

diff --git a/editor/store/test/selectors.js b/editor/store/test/selectors.js
@@ -35,6 +35,8 @@ const {
 	isEditedPostSaveable,
 	isEditedPostEmpty,
 	isEditedPostBeingScheduled,
+	isEditedPostPending,
+	isEditedPostScheduled,
 	getEditedPostPreviewLink,
 	getBlockDependantsCacheBust,
 	getBlock,
@@ -629,6 +631,97 @@ describe( 'selectors', () => {
 		} );
 	} );
 
+	describe( 'isEditedPostScheduled', () => {
+		it( 'should return true for posts with status future', () => {
+			const state = {
+				currentPost: {
+					status: 'future',
+				},
+			};
+
+			expect( isEditedPostScheduled( state ) ).toBe( true );
+		} );
+
+		it( 'should return true for old scheduled posts', () => {
+			const state = {
+				currentPost: {
+					status: 'future',
+					date: '2016-05-30T17:21:39',
+				},
+			};
+
+			expect( isCurrentPostPublished( state ) ).toBe( true );
+		} );
+
+		it( 'should return false for draft posts', () => {
+			const state = {
+				currentPost: {
+					status: 'draft',
+				},
+			};
+
+			expect( isEditedPostScheduled( state ) ).toBe( false );
+		} );
+
+		it( 'should return false for auto draft posts', () => {
+			const state = {
+				currentPost: {
+					status: 'auto-draft',
+				},
+			};
+
+			expect( isEditedPostScheduled( state ) ).toBe( false );
+		} );
+
+		it( 'should return false if status is unknown', () => {
+			const state = {
+				currentPost: {},
+			};
+
+			expect( isEditedPostScheduled( state ) ).toBe( false );
+		} );
+	} );
+
+	describe( 'isEditedPostPending', () => {
+		it( 'should return true for posts in pending state', () => {
+			const state = {
+				currentPost: {
+					status: 'pending',
+				},
+			};
+
+			expect( isEditedPostPending( state ) ).toBe( true );
+		} );
+
+		it( 'should return false for draft posts', () => {
+			const state = {
+				currentPost: {
+					status: 'draft',
+				},
+			};
+
+			expect( isEditedPostPending( state ) ).toBe( false );
+		} );
+
+		it( 'should return false for auto draft posts', () => {
+			const state = {
+				currentPost: {
+					status: 'auto-draft',
+				},
+			};
+
+			expect( isEditedPostPending( state ) ).toBe( false );
+		} );
+
+		it( 'should return false if status is unknown', () => {
+			const state = {
+				currentPost: {},
+			};
+
+			expect( isEditedPostPending( state ) ).toBe( false );
+		} );
+	} );
+
 	describe( 'isEditedPostPublishable', () => {
 		it( 'should return true for pending posts', () => {
 			const state = {