Improved pre/post publish flow.

editor/components/post-publish-button/label.js

@@ -37,6 +37,8 @@ export function PublishButtonLabel( {
 		return __( 'Publishing…' );
 	} else if ( isPublished && isSaving ) {
 		return __( 'Updating…' );
+	} else if ( isBeingScheduled && isSaving ) {
+		return __( 'Scheduling…' );
 	}
 
 	if ( isContributor ) {

editor/components/post-publish-button/test/label.js

@@ -36,6 +36,11 @@ describe( 'PublishButtonLabel', () => {
 		expect( label ).toBe( 'Updating…' );
 	} );
 
+	it( 'should show scheduling if scheduled and saving in progress', () => {
+		const label = PublishButtonLabel( { user, isBeingScheduled: true, isSaving: true } );
+		expect( label ).toBe( 'Scheduling…' );
+	} );
+
 	it( 'should show publish if not published and saving in progress', () => {
 		const label = PublishButtonLabel( { user, isPublished: false, isSaving: true } );
 		expect( label ).toBe( 'Publish' );

editor/components/post-publish-panel/index.js

@@ -21,28 +21,29 @@ import PostPublishPanelPostpublish from './postpublish';
 import {
 	getCurrentPostType,
 	isCurrentPostPublished,
+	isCurrentPostScheduled,
 	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,
+			submitted: false,
 		};
 	}
 
 	componentWillReceiveProps( newProps ) {
 		if (
-			newProps.isPublished &&
-			! this.state.published &&
-			! newProps.isSaving
+			! this.state.submitted &&
+			! newProps.isSaving &&
+			( newProps.isPublished || newProps.isScheduled )
 		) {
 			this.setState( {
-				published: true,
+				submitted: true,
 				loading: false,
 			} );
 		}
@@ -56,25 +57,32 @@ class PostPublishPanel extends Component {
 		}
 	}
 
-	onPublish() {
+	onSubmit() {
+		const { user, onClose } = this.props;
+		const userCanPublishPosts = get( user.data, [ 'post_type_capabilities', 'publish_posts' ], false );
+		const isContributor = user.data && ! userCanPublishPosts;
+		if ( isContributor ) {
+			onClose();
+			return;
+		}
 		this.setState( { loading: true } );
 	}
 
 	render() {
-		const { onClose, user, forceIsDirty, forceIsSaving } = this.props;
-		const { loading, published } = this.state;
-		const canPublish = get( user.data, [ 'post_type_capabilities', 'publish_posts' ], false );
-
+		const { isScheduled, onClose, forceIsDirty, forceIsSaving } = this.props;
+		const { loading, submitted } = this.state;
 		return (
 			<div className="editor-post-publish-panel">
 				<div className="editor-post-publish-panel__header">
-					{ ! published && (
+					{ ! submitted && (
 						<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 && (
-						<div className="editor-post-publish-panel__header-published">{ __( 'Published' ) }</div>
+					{ submitted && (
+						<div className="editor-post-publish-panel__header-published">
+							{ isScheduled ? __( 'Scheduled' ) : __( 'Published' ) }
+						</div>
 					) }
 					<IconButton
 						onClick={ onClose }
@@ -83,9 +91,9 @@ class PostPublishPanel extends Component {
 					/>
 				</div>
 				<div className="editor-post-publish-panel__content">
-					{ canPublish && ! loading && ! published && <PostPublishPanelPrepublish /> }
-					{ loading && ! published && <Spinner /> }
-					{ published && <PostPublishPanelPostpublish /> }
+					{ ! loading && ! submitted && <PostPublishPanelPrepublish /> }
+					{ loading && ! submitted && <Spinner /> }
+					{ submitted && <PostPublishPanelPostpublish /> }
 				</div>
 			</div>
 		);
@@ -97,6 +105,7 @@ const applyConnect = connect(
 		return {
 			postType: getCurrentPostType( state ),
 			isPublished: isCurrentPostPublished( state ),
+			isScheduled: isCurrentPostScheduled( state ),
 			isSaving: isSavingPost( state ),
 			isDirty: isEditedPostDirty( state ),
 		};

editor/components/post-publish-panel/postpublish.js

@@ -9,12 +9,13 @@ import { connect } from 'react-redux';
  */
 import { PanelBody, Button, ClipboardButton, withAPIData } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { Component, compose } from '@wordpress/element';
+import { Component, compose, Fragment } from '@wordpress/element';
 
 /**
  * Internal Dependencies
  */
-import { getCurrentPost, getCurrentPostType } from '../../store/selectors';
+import PostScheduleLabel from '../post-schedule/label';
+import { getCurrentPost, getCurrentPostType, isCurrentPostScheduled } from '../../store/selectors';
 
 class PostPublishPanelPostpublish extends Component {
 	constructor() {
@@ -48,26 +49,35 @@ class PostPublishPanelPostpublish extends Component {
 	}
 
 	render() {
-		const { post, postType } = this.props;
+		const { isScheduled, post, postType } = this.props;
 		const viewPostLabel = get( postType, [ 'data', 'labels', 'view_item' ] );
 
+		const postPublishNonLinkHeader = isScheduled ?
+			<Fragment>{ __( 'is now scheduled. It will go live on' ) } <PostScheduleLabel />.</Fragment> :
+			__( 'is now live.' );
+		const postPublishBodyText = isScheduled ?
+			__( 'The post address will be:' ) :
+			__( 'What\'s next?' );
+
 		return (
 			<div className="post-publish-panel__postpublish">
 				<PanelBody className="post-publish-panel__postpublish-header">
-					<a href={ post.link }>{ post.title || __( '(no title)' ) }</a>{ __( ' is now live.' ) }
+					<a href={ post.link }>{ post.title || __( '(no title)' ) }</a> { postPublishNonLinkHeader }
 				</PanelBody>
 				<PanelBody>
-					<div><strong>{ __( 'What\'s next?' ) }</strong></div>
+					<div><strong>{ postPublishBodyText }</strong></div>
 					<input
 						className="post-publish-panel__postpublish-link-input"
 						readOnly
 						value={ post.link }
 						onFocus={ this.onSelectInput }
 					/>
 					<div className="post-publish-panel__postpublish-buttons">
-						<Button className="button" href={ post.link }>
-							{ viewPostLabel }
-						</Button>
+						{ ! isScheduled && (
+							<Button className="button" href={ post.link }>
+								{ viewPostLabel }
+							</Button>
+						) }
 
 						<ClipboardButton className="button" text={ post.link } onCopy={ this.onCopy }>
 							{ this.state.showCopyConfirmation ? __( 'Copied!' ) : __( 'Copy Link' ) }
@@ -84,6 +94,7 @@ const applyConnect = connect(
 		return {
 			post: getCurrentPost( state ),
 			postTypeSlug: getCurrentPostType( state ),
+			isScheduled: isCurrentPostScheduled( state ),
 		};
 	}
 );

editor/components/post-publish-panel/toggle.js

@@ -19,8 +19,10 @@ import {
 	isSavingPost,
 	isEditedPostSaveable,
 	isEditedPostPublishable,
+	isCurrentPostPending,
 	isCurrentPostPublished,
 	isEditedPostBeingScheduled,
+	isCurrentPostScheduled,
 	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>
 	);
 }
@@ -67,7 +71,9 @@ const applyConnect = connect(
 		isSaving: isSavingPost( state ),
 		isSaveable: isEditedPostSaveable( state ),
 		isPublishable: isEditedPostPublishable( state ),
+		isPending: isCurrentPostPending( state ),
 		isPublished: isCurrentPostPublished( state ),
+		isScheduled: isCurrentPostScheduled( state ),
 		isBeingScheduled: isEditedPostBeingScheduled( state ),
 		postType: getCurrentPostType( state ),
 	} ),

editor/store/selectors.js

@@ -216,6 +216,17 @@ export function getEditedPostVisibility( state ) {
 	return 'public';
 }
 
+/**
+ * Returns true if post is pending review.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether current post is pending review.
+ */
+export function isCurrentPostPending( state ) {
+	return getCurrentPost( state ).status === 'pending';
+}
+
 /**
  * Return true if the current post has already been published.
  *
@@ -230,6 +241,17 @@ export function isCurrentPostPublished( state ) {
 		( post.status === 'future' && moment( post.date ).isBefore( moment() ) );
 }
 
+/**
+ * Returns true if post is already scheduled.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether current post is scheduled to be posted.
+ */
+export function isCurrentPostScheduled( state ) {
+	return getCurrentPost( state ).status === 'future' && ! isCurrentPostPublished( state );
+}
+
 /**
  * Return true if the post being edited can be published.
  *

editor/store/test/selectors.js

@@ -30,7 +30,9 @@ const {
 	getDocumentTitle,
 	getEditedPostExcerpt,
 	getEditedPostVisibility,
+	isCurrentPostPending,
 	isCurrentPostPublished,
+	isCurrentPostScheduled,
 	isEditedPostPublishable,
 	isEditedPostSaveable,
 	isEditedPostEmpty,
@@ -587,6 +589,36 @@ describe( 'selectors', () => {
 		} );
 	} );
 
+	describe( 'isCurrentPostPending', () => {
+		it( 'should return true for posts in pending state', () => {
+			const state = {
+				currentPost: {
+					status: 'pending',
+				},
+			};
+
+			expect( isCurrentPostPending( state ) ).toBe( true );
+		} );
+
+		it( 'should return false for draft posts', () => {
+			const state = {
+				currentPost: {
+					status: 'draft',
+				},
+			};
+
+			expect( isCurrentPostPending( state ) ).toBe( false );
+		} );
+
+		it( 'should return false if status is unknown', () => {
+			const state = {
+				currentPost: {},
+			};
+
+			expect( isCurrentPostPending( state ) ).toBe( false );
+		} );
+	} );
+
 	describe( 'isCurrentPostPublished', () => {
 		it( 'should return true for public posts', () => {
 			const state = {
@@ -630,6 +662,58 @@ describe( 'selectors', () => {
 		} );
 	} );
 
+	describe( 'isCurrentPostScheduled', () => {
+		it( 'should return true for posts with status future', () => {
+			const state = {
+				currentPost: {
+					status: 'future',
+				},
+			};
+
+			expect( isCurrentPostScheduled( state ) ).toBe( true );
+		} );
+
+		it( 'should return true for future scheduled posts', () => {
+			const state = {
+				currentPost: {
+					status: 'future',
+					date: '2100-05-30T17:21:39',
+				},
+			};
+
+			expect( isCurrentPostScheduled( state ) ).toBe( true );
+		} );
+
+		it( 'should return false for old scheduled posts that were already published', () => {
+			const state = {
+				currentPost: {
+					status: 'future',
+					date: '2016-05-30T17:21:39',
+				},
+			};
+
+			expect( isCurrentPostScheduled( state ) ).toBe( false );
+		} );
+
+		it( 'should return false for auto draft posts', () => {
+			const state = {
+				currentPost: {
+					status: 'auto-draft',
+				},
+			};
+
+			expect( isCurrentPostScheduled( state ) ).toBe( false );
+		} );
+
+		it( 'should return false if status is unknown', () => {
+			const state = {
+				currentPost: {},
+			};
+
+			expect( isCurrentPostScheduled( state ) ).toBe( false );
+		} );
+	} );
+
 	describe( 'isEditedPostPublishable', () => {
 		it( 'should return true for pending posts', () => {
 			const state = {