Prepublish Panel: Disable the Publish and Cancel buttons while saving (…

…#32889)

Currently, when editing a post in such a way that a "multi-entity save" is required (i.e. updates to things that aren't just limited to the post content (and other post attributes), but e.g. site title and the like), the user is prompted with a panel to save those changes prior to publishing the post.

Once they're done saving, they're presented with the regular pre-publish panel, including the familiar 'Publish' and 'Cancel' buttons. Actually, those buttons are visible even before the rest of the pre-publish panel is: The panel might still show a spinner that indicates that entities are being saved, but the buttons are already present -- and clickable.

This has turned out to be a problem in e2e tests, where the headless browser is quick enough to press one of those buttons, even though entities haven't been saved yet. However, it's of course possible that a user might also be quick enough (e.g. if behind a slow network connection).

This commit changes the behavior to disable the buttons while entities are still being saved.

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

@@ -147,7 +147,7 @@ export class PostPublishButton extends Component {
 		};
 
 		const buttonProps = {
-			'aria-disabled': isButtonDisabled && ! hasNonPostEntityChanges,
+			'aria-disabled': isButtonDisabled,
 			className: 'editor-post-publish-button',
 			isBusy: ! isAutoSaving && isSaving && isPublished,
 			variant: 'primary',

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

@@ -25,6 +25,22 @@ describe( 'PostPublishButton', () => {
 			);
 		} );
 
+		it( 'should be true if post is currently saving, even if there are non-post entity changes', () => {
+			// This normally means that we're still saving those changes.
+			const wrapper = shallow(
+				<PostPublishButton
+					hasNonPostEntityChanges
+					isPublishable
+					isSaveable
+					isSaving
+				/>
+			);
+
+			expect( wrapper.find( Button ).prop( 'aria-disabled' ) ).toBe(
+				true
+			);
+		} );
+
 		it( 'should be true if forceIsSaving is true', () => {
 			const wrapper = shallow(
 				<PostPublishButton isPublishable isSaveable forceIsSaving />
@@ -96,6 +112,20 @@ describe( 'PostPublishButton', () => {
 				false
 			);
 		} );
+
+		it( 'should be false if there are non-post entity changes', () => {
+			const wrapper = shallow(
+				<PostPublishButton
+					hasNonPostEntityChanges
+					isPublishable
+					isSaveable
+				/>
+			);
+
+			expect( wrapper.find( Button ).prop( 'aria-disabled' ) ).toBe(
+				false
+			);
+		} );
 	} );
 
 	describe( 'publish status', () => {

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

@@ -97,7 +97,11 @@ export class PostPublishPanel extends Component {
 								/>
 							</div>
 							<div className="editor-post-publish-panel__header-cancel-button">
-								<Button onClick={ onClose } variant="secondary">
+								<Button
+									disabled={ isSaving }
+									onClick={ onClose }
+									variant="secondary"
+								>
 									{ __( 'Cancel' ) }
 								</Button>
 							</div>

packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap

@@ -135,6 +135,7 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
       className="editor-post-publish-panel__header-cancel-button"
     >
       <ForwardRef(Button)
+        disabled={false}
         variant="secondary"
       >
         Cancel
@@ -175,6 +176,7 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
       className="editor-post-publish-panel__header-cancel-button"
     >
       <ForwardRef(Button)
+        disabled={true}
         variant="secondary"
       >
         Cancel