Disabled conditions for publish buttons

packages/edit-post/src/components/header/post-publish-button-or-toggle.js

@@ -35,6 +35,7 @@ export function PostPublishButtonOrToggle( {
 			isOpen={ isPublishSidebarOpened }
 			onToggle={ togglePublishSidebar }
 			forceIsSaving={ forceIsSaving }
+			forceIsDirty={ forceIsDirty }
 		/>
 	);
 

packages/editor/src/components/post-publish-button/index.js

@@ -35,11 +35,19 @@ export class PostPublishButton extends Component {
 			visibility,
 			isPublishable,
 			isSaveable,
+			isPostSavingLocked,
+			isPublished,
 			hasPublishAction,
 			onSubmit = noop,
+			forceIsDirty,
 			forceIsSaving,
 		} = this.props;
-		const isButtonEnabled = isPublishable && isSaveable;
+		const isButtonDisabled =
+			isSaving ||
+			forceIsSaving ||
+			! isSaveable ||
+			isPostSavingLocked ||
+			( ! isPublishable && ! forceIsDirty );
 
 		let publishStatus;
 		if ( ! hasPublishAction ) {
@@ -65,8 +73,8 @@ export class PostPublishButton extends Component {
 				isPrimary
 				isLarge
 				onClick={ onClick }
-				disabled={ ! isButtonEnabled }
-				isBusy={ isSaving }
+				disabled={ isButtonDisabled }
+				isBusy={ isSaving && isPublished }
 			>
 				<PublishButtonLabel forceIsSaving={ forceIsSaving } />
 			</Button>
@@ -75,23 +83,26 @@ export class PostPublishButton extends Component {
 }
 
 export default compose( [
-	withSelect( ( select, { forceIsSaving, forceIsDirty } ) => {
+	withSelect( ( select ) => {
 		const {
 			isSavingPost,
 			isEditedPostBeingScheduled,
 			getEditedPostVisibility,
+			isCurrentPostPublished,
 			isEditedPostSaveable,
 			isEditedPostPublishable,
 			isPostSavingLocked,
 			getCurrentPost,
 			getCurrentPostType,
 		} = select( 'core/editor' );
 		return {
-			isSaving: forceIsSaving || isSavingPost(),
+			isSaving: isSavingPost(),
 			isBeingScheduled: isEditedPostBeingScheduled(),
 			visibility: getEditedPostVisibility(),
-			isSaveable: isEditedPostSaveable() && ! isPostSavingLocked(),
-			isPublishable: forceIsDirty || isEditedPostPublishable(),
+			isSaveable: isEditedPostSaveable(),
+			isPostSavingLocked: isPostSavingLocked(),
+			isPublishable: isEditedPostPublishable(),
+			isPublished: isCurrentPostPublished(),
 			hasPublishAction: get( getCurrentPost(), [ '_links', 'wp:action-publish' ], false ),
 			postType: getCurrentPostType(),
 		};

packages/editor/src/components/post-publish-button/test/index.js

@@ -14,31 +14,81 @@ describe( 'PostPublishButton', () => {
 	describe( 'disabled', () => {
 		it( 'should be disabled if post is currently saving', () => {
 			const wrapper = shallow(
-				<PostPublishButton hasPublishAction={ true } isSaving />
+				<PostPublishButton
+					isPublishable
+					isSaveable
+					isSaving
+				/>
 			);
 
 			expect( wrapper.prop( 'disabled' ) ).toBe( true );
 		} );
 
-		it( 'should be disabled if post is not publishable', () => {
+		it( 'should be disabled if forceIsSaving is true', () => {
 			const wrapper = shallow(
-				<PostPublishButton hasPublishAction={ true } isPublishable={ false } />
+				<PostPublishButton
+					isPublishable
+					isSaveable
+					forceIsSaving
+				/>
+			);
+
+			expect( wrapper.prop( 'disabled' ) ).toBe( true );
+		} );
+
+		it( 'should be disabled if post is not publishable and not forceIsDirty', () => {
+			const wrapper = shallow(
+				<PostPublishButton
+					isSaveable
+					isPublishable={ false }
+					forceIsDirty={ false }
+				/>
 			);
 
 			expect( wrapper.prop( 'disabled' ) ).toBe( true );
 		} );
 
 		it( 'should be disabled if post is not saveable', () => {
 			const wrapper = shallow(
-				<PostPublishButton hasPublishAction={ true } isSaveable={ false } />
+				<PostPublishButton
+					isPublishable
+					isSaveable={ false }
+				/>
 			);
 
 			expect( wrapper.prop( 'disabled' ) ).toBe( true );
 		} );
 
-		it( 'should be enabled otherwise', () => {
+		it( 'should be disabled if post saving is locked', () => {
 			const wrapper = shallow(
-				<PostPublishButton hasPublishAction={ true } isPublishable isSaveable />
+				<PostPublishButton
+					isPublishable
+					isSaveable
+					isPostSavingLocked
+				/>
+			);
+
+			expect( wrapper.prop( 'disabled' ) ).toBe( true );
+		} );
+
+		it( 'should be enabled if post is saveable but not publishable and forceIsDirty is true', () => {
+			const wrapper = shallow(
+				<PostPublishButton
+					isSaveable
+					isPublishable={ false }
+					forceIsDirty
+				/>
+			);
+
+			expect( wrapper.prop( 'disabled' ) ).toBe( false );
+		} );
+
+		it( 'should be enabled if post is publishave and saveable', () => {
+			const wrapper = shallow(
+				<PostPublishButton
+					isPublishable
+					isSaveable
+				/>
 			);
 
 			expect( wrapper.prop( 'disabled' ) ).toBe( false );
@@ -129,7 +179,10 @@ describe( 'PostPublishButton', () => {
 
 	it( 'should have save modifier class', () => {
 		const wrapper = shallow(
-			<PostPublishButton hasPublishAction={ true } isSaving />
+			<PostPublishButton
+				isSaving
+				isPublished
+			/>
 		);
 
 		expect( wrapper.find( 'Button' ).prop( 'isBusy' ) ).toBe( true );

packages/editor/src/components/post-publish-panel/test/toggle.js

@@ -12,47 +12,81 @@ describe( 'PostPublishPanelToggle', () => {
 	describe( 'disabled', () => {
 		it( 'should be disabled if post is currently saving', () => {
 			const wrapper = shallow(
-				<PostPublishPanelToggle isSaving />
+				<PostPublishPanelToggle
+					isPublishable
+					isSaveable
+					isSaving
+				/>
 			);
 
 			expect( wrapper.prop( 'disabled' ) ).toBe( true );
 		} );
 
 		it( 'should be disabled if post is currently force saving', () => {
 			const wrapper = shallow(
-				<PostPublishPanelToggle forceIsSaving />
+				<PostPublishPanelToggle
+					isPublishable
+					isSaveable
+					forceIsSaving
+				/>
 			);
 
 			expect( wrapper.prop( 'disabled' ) ).toBe( true );
 		} );
 
-		it( 'should be disabled if post is not publishable', () => {
+		it( 'should be disabled if post is not publishable and not forceIsDirty', () => {
 			const wrapper = shallow(
-				<PostPublishPanelToggle isPublishable={ false } />
+				<PostPublishPanelToggle
+					isSaveable
+					isPublishable={ false }
+					forceIsDirty={ false }
+				/>
 			);
 
 			expect( wrapper.prop( 'disabled' ) ).toBe( true );
 		} );
 
 		it( 'should be disabled if post is not saveable', () => {
 			const wrapper = shallow(
-				<PostPublishPanelToggle isSaveable={ false } />
+				<PostPublishPanelToggle
+					isSaveable={ false }
+					isPublishable
+				/>
 			);
 
 			expect( wrapper.prop( 'disabled' ) ).toBe( true );
 		} );
 
-		it( 'should be disabled if post is not published', () => {
+		it( 'should be disabled if post is published', () => {
 			const wrapper = shallow(
-				<PostPublishPanelToggle isPublished={ false } />
+				<PostPublishPanelToggle
+					isSaveable
+					isPublishable
+					isPublished
+				/>
 			);
 
 			expect( wrapper.prop( 'disabled' ) ).toBe( true );
 		} );
 
-		it( 'should be enabled otherwise', () => {
+		it( 'should be enabled if post is saveable but not publishable and forceIsDirty is true', () => {
 			const wrapper = shallow(
-				<PostPublishPanelToggle isPublishable isSaveable />
+				<PostPublishPanelToggle
+					isSaveable
+					isPublishable={ false }
+					forceIsDirty={ true }
+				/>
+			);
+
+			expect( wrapper.prop( 'disabled' ) ).toBe( false );
+		} );
+
+		it( 'should be enabled if post is publishave and saveable', () => {
+			const wrapper = shallow(
+				<PostPublishPanelToggle
+					isPublishable
+					isSaveable
+				/>
 			);
 
 			expect( wrapper.prop( 'disabled' ) ).toBe( false );

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

@@ -16,18 +16,22 @@ export function PostPublishPanelToggle( {
 	onToggle,
 	isOpen,
 	forceIsSaving,
+	forceIsDirty,
 } ) {
-	const isButtonEnabled = (
-		! isSaving && ! forceIsSaving && isPublishable && isSaveable
-	) || isPublished;
+	const isButtonDisabled =
+		isPublished ||
+		isSaving ||
+		forceIsSaving ||
+		! isSaveable ||
+		( ! isPublishable && ! forceIsDirty );
 
 	return (
 		<Button
 			className="editor-post-publish-panel__toggle"
 			isPrimary
 			onClick={ onToggle }
 			aria-expanded={ isOpen }
-			disabled={ ! isButtonEnabled }
+			disabled={ isButtonDisabled }
 			isBusy={ isSaving && isPublished }
 		>
 			{ isBeingScheduled ? __( 'Schedule…' ) : __( 'Publish…' ) }