Chrome: Fix publish button flow and hide the pending toggle when the …

…post is published
WordPress · Jun 6, 2017 · 82a9708 · 82a9708
1 parent 84730ac
commit 82a9708
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 30 deletions.
diff --git a/editor/header/tools/publish-button.js b/editor/header/tools/publish-button.js
@@ -21,6 +21,7 @@ import {
 	isSavingPost,
 	isEditedPostAlreadyPublished,
 	isEditedPostBeingScheduled,
+	getEditedPostVisibility,
 } from '../../selectors';
 
 function PublishButton( {
@@ -32,6 +33,7 @@ function PublishButton( {
 	isPublished,
 	onSave,
 	isBeingScheduled,
+	visibility,
 } ) {
 	const buttonEnabled = ! isSaving &&
 		( dirty || ( ! isPublished && ! isBeingScheduled )
@@ -44,16 +46,14 @@ function PublishButton( {
 	} else {
 		buttonText = wp.i18n.__( 'Publish' );
 	}
-	let publishStatus;
-	if ( isPublished ) {
-		publishStatus = post.status;
-	} else if ( isBeingScheduled ) {
+	let publishStatus = 'publish';
+	if ( isBeingScheduled ) {
 		publishStatus = 'future';
-	} else {
-		publishStatus = 'publish';
+	} else if ( visibility === 'private' ) {
+		publishStatus = 'private';
 	}
 	const className = classnames( 'editor-tools__publish-button', { 'is-saving': isSaving } );
-	const onClick = () => onSave( post, { status: publishStatus, ...edits }, blocks );
+	const onClick = () => onSave( post, { ...edits, status: publishStatus }, blocks );
 
 	const buttonDisabledHint = process.env.NODE_ENV === 'production'
 		? wp.i18n.__( 'The Save button is disabled during early alpha releases.' )
@@ -82,6 +82,7 @@ export default connect(
 		isSaving: isSavingPost( state ),
 		isPublished: isEditedPostAlreadyPublished( state ),
 		isBeingScheduled: isEditedPostBeingScheduled( state ),
+		visibility: getEditedPostVisibility( state ),
 	} ),
 	( dispatch ) => ( {
 		onSave( post, edits, blocks ) {

diff --git a/editor/sidebar/post-status/index.js b/editor/sidebar/post-status/index.js
@@ -17,26 +17,28 @@ import './style.scss';
 import PostVisibility from '../post-visibility';
 import PostTrash from '../post-trash';
 import PostSchedule from '../post-schedule';
-import { getEditedPostAttribute, getSuggestedPostFormat, getCurrentPost } from '../../selectors';
+import {
+	getEditedPostAttribute,
+	getSuggestedPostFormat,
+	isEditedPostAlreadyPublished,
+} from '../../selectors';
 import { editPost } from '../../actions';
 
 class PostStatus extends Component {
 	constructor() {
 		super( ...arguments );
+		this.togglePendingStatus = this.togglePendingStatus.bind( this );
 		this.id = this.constructor.instances++;
 	}
 
+	togglePendingStatus() {
+		const { status, onUpdateStatus } = this.props;
+		const updatedStatus = status === 'pending' ? 'draft' : 'pending';
+		onUpdateStatus( updatedStatus );
+	}
+
 	render() {
-		const { status, onUpdateStatus, suggestedFormat, post } = this.props;
-		const onToggle = () => {
-			let updatedStatus;
-			if ( status !== 'pending' ) {
-				updatedStatus = 'pending';
-			} else {
-				updatedStatus = post.status && post.status !== 'pending' ? post.status : 'publish';
-			}
-			onUpdateStatus( updatedStatus );
-		};
+		const { status, suggestedFormat, isPublished } = this.props;
 
 		// Use the suggested post format based on the blocks content of the post
 		// or the default post format setting for the site.
@@ -45,15 +47,17 @@ class PostStatus extends Component {
 
 		return (
 			<PanelBody title={ __( 'Status & Visibility' ) }>
-				<div className="editor-post-status__row">
-					<label htmlFor={ pendingId }>{ __( 'Pending review' ) }</label>
-					<FormToggle
-						id={ pendingId }
-						checked={ status === 'pending' }
-						onChange={ onToggle }
-						showHint={ false }
-					/>
-				</div>
+				{ ! isPublished &&
+					<div className="editor-post-status__row">
+						<label htmlFor={ pendingId }>{ __( 'Pending review' ) }</label>
+						<FormToggle
+							id={ pendingId }
+							checked={ status === 'pending' }
+							onChange={ this.togglePendingStatus }
+							showHint={ false }
+						/>
+					</div>
+				}
 				<div className="editor-post-status__row">
 					<PostVisibility />
 				</div>
@@ -77,8 +81,8 @@ PostStatus.instances = 1;
 export default connect(
 	( state ) => ( {
 		status: getEditedPostAttribute( state, 'status' ),
-		post: getCurrentPost( state ),
 		suggestedFormat: getSuggestedPostFormat( state ),
+		isPublished: isEditedPostAlreadyPublished( state ),
 	} ),
 	( dispatch ) => {
 		return {

diff --git a/editor/sidebar/post-visibility/index.js b/editor/sidebar/post-visibility/index.js
@@ -47,7 +47,7 @@ class PostVisibility extends Component {
 		const { status, visibility, password, post, blocks, edits, onUpdateVisibility, onSave } = this.props;
 
 		const setPublic = () => {
-			onUpdateVisibility( visibility === 'private' ? 'publish' : status );
+			onUpdateVisibility( visibility === 'private' ? 'draft' : status );
 			this.setState( { hasPassword: false } );
 		};
 		const setPrivate = () => {
@@ -57,7 +57,7 @@ class PostVisibility extends Component {
 			}
 		};
 		const setPasswordProtected = () => {
-			onUpdateVisibility( visibility === 'private' ? 'publish' : status, password || '' );
+			onUpdateVisibility( visibility === 'private' ? 'draft' : status, password || '' );
 			this.setState( { hasPassword: true } );
 		};
 		const updatePassword = ( event ) => onUpdateVisibility( status, event.target.value );