Improve "switch to draft" placement (#50217)

Move button next to the "move to trash" action in post settings and out of the prominent header placement. Adjust e2e tests to new configuration.
WordPress · May 1, 2023 · a770dfd · a770dfd
1 parent e61a8f1
commit a770dfd
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 43 deletions.
diff --git a/packages/edit-post/src/components/sidebar/post-status/index.js b/packages/edit-post/src/components/sidebar/post-status/index.js
@@ -2,9 +2,13 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { PanelBody } from '@wordpress/components';
+import {
+	__experimentalHStack as HStack,
+	PanelBody,
+} from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose, ifCondition } from '@wordpress/compose';
+import { PostSwitchToDraftButton } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -48,7 +52,15 @@ function PostStatus( { isOpened, onTogglePanel } ) {
 						<PostSlug />
 						<PostAuthor />
 						{ fills }
-						<PostTrash />
+						<HStack
+							style={ {
+								marginTop: '16px',
+							} }
+							spacing={ 4 }
+						>
+							<PostSwitchToDraftButton />
+							<PostTrash />
+						</HStack>
 					</>
 				) }
 			</PluginPostStatusInfo.Slot>

diff --git a/packages/edit-post/src/components/sidebar/post-trash/index.js b/packages/edit-post/src/components/sidebar/post-trash/index.js
@@ -1,15 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { PanelRow } from '@wordpress/components';
 import { PostTrash as PostTrashLink, PostTrashCheck } from '@wordpress/editor';
+import { FlexItem } from '@wordpress/components';
 
 export default function PostTrash() {
 	return (
 		<PostTrashCheck>
-			<PanelRow>
+			<FlexItem isBlock>
 				<PostTrashLink />
-			</PanelRow>
+			</FlexItem>
 		</PostTrashCheck>
 	);
 }
diff --git a/packages/editor/src/components/post-saved-state/index.js b/packages/editor/src/components/post-saved-state/index.js
@@ -20,7 +20,6 @@ import { displayShortcut } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
-import PostSwitchToDraftButton from '../post-switch-to-draft-button';
 import { store as editorStore } from '../../store';
 
 /**
@@ -48,10 +47,8 @@ export default function PostSavedState( {
 		isDirty,
 		isNew,
 		isPending,
-		isPublished,
 		isSaveable,
 		isSaving,
-		isScheduled,
 		hasPublishAction,
 	} = useSelect(
 		( select ) => {
@@ -106,10 +103,6 @@ export default function PostSavedState( {
 		return null;
 	}
 
-	if ( isPublished || isScheduled ) {
-		return <PostSwitchToDraftButton />;
-	}
-
 	/* translators: button label text should, if possible, be under 16 characters. */
 	const label = isPending ? __( 'Save as pending' ) : __( 'Save draft' );
 

diff --git a/packages/editor/src/components/post-saved-state/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-saved-state/test/__snapshots__/index.js.snap
@@ -22,15 +22,6 @@ exports[`PostSavedState returns a disabled button if the post is not saveable 1`
 </button>
 `;
 
-exports[`PostSavedState returns a switch to draft link if the post is published 1`] = `
-<button
-  class="components-button editor-post-switch-to-draft is-tertiary"
-  type="button"
->
-  Switch to draft
-</button>
-`;
-
 exports[`PostSavedState should return Save button if edits to be saved 1`] = `
 <button
   aria-disabled="false"

diff --git a/packages/editor/src/components/post-saved-state/test/index.js b/packages/editor/src/components/post-saved-state/test/index.js
@@ -67,16 +67,6 @@ describe( 'PostSavedState', () => {
 		expect( screen.getByRole( 'button' ) ).toMatchSnapshot();
 	} );
 
-	it( 'returns a switch to draft link if the post is published', () => {
-		useSelect.mockImplementation( () => ( {
-			isPublished: true,
-		} ) );
-
-		render( <PostSavedState /> );
-
-		expect( screen.getByRole( 'button' ) ).toMatchSnapshot();
-	} );
-
 	it( 'should return Saved text if not new and not dirty', () => {
 		useSelect.mockImplementation( () => ( {
 			isDirty: false,

diff --git a/packages/editor/src/components/post-switch-to-draft-button/index.js b/packages/editor/src/components/post-switch-to-draft-button/index.js
@@ -3,11 +3,12 @@
  */
 import {
 	Button,
+	FlexItem,
 	__experimentalConfirmDialog as ConfirmDialog,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { compose, useViewportMatch } from '@wordpress/compose';
+import { compose } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
 
 /**
@@ -21,7 +22,6 @@ function PostSwitchToDraftButton( {
 	isScheduled,
 	onClick,
 } ) {
-	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
 
 	if ( ! isPublished && ! isScheduled ) {
@@ -41,16 +41,17 @@ function PostSwitchToDraftButton( {
 	};
 
 	return (
-		<>
+		<FlexItem isBlock>
 			<Button
 				className="editor-post-switch-to-draft"
 				onClick={ () => {
 					setShowConfirmDialog( true );
 				} }
 				disabled={ isSaving }
-				variant="tertiary"
+				variant="secondary"
+				style={ { width: '100%', display: 'block' } }
 			>
-				{ isMobileViewport ? __( 'Draft' ) : __( 'Switch to draft' ) }
+				{ __( 'Switch to draft' ) }
 			</Button>
 			<ConfirmDialog
 				isOpen={ showConfirmDialog }
@@ -59,7 +60,7 @@ function PostSwitchToDraftButton( {
 			>
 				{ alertMessage }
 			</ConfirmDialog>
-		</>
+		</FlexItem>
 	);
 }
 

diff --git a/packages/editor/src/components/post-trash/style.scss b/packages/editor/src/components/post-trash/style.scss
@@ -1,6 +1,4 @@
 .editor-post-trash.components-button {
-	display: flex;
-	justify-content: center;
-	margin-top: $grid-unit-05;
 	width: 100%;
+	display: block;
 }
diff --git a/test/e2e/specs/editor/various/switch-to-draft.spec.js b/test/e2e/specs/editor/various/switch-to-draft.spec.js
@@ -35,6 +35,7 @@ test.describe( 'Clicking "Switch to draft" on a published/scheduled post/page',
 					page,
 					switchToDraftUtils,
 					pageUtils,
+					editor,
 				} ) => {
 					await pageUtils.setBrowserViewport( viewport );
 
@@ -44,6 +45,8 @@ test.describe( 'Clicking "Switch to draft" on a published/scheduled post/page',
 						postStatus === 'schedule'
 					);
 
+					await editor.openDocumentSettingsSidebar();
+
 					await switchToDraftUtils.switchToDraftButton.click();
 
 					await page
@@ -100,9 +103,9 @@ class SwitchToDraftUtils {
 		this.#admin = admin;
 		this.#requestUtils = requestUtils;
 
-		this.switchToDraftButton = page
-			.getByRole( 'region', { name: 'Editor top bar' } )
-			.getByRole( 'button', { name: 'draft' } );
+		this.switchToDraftButton = page.locator(
+			'role=button[name="Switch to draft"i]'
+		);
 	}
 
 	/**