Improve "switch to draft" placement:

Move button next to the "move to trash" action in post settings and out of the prominent header placement.
WordPress · May 1, 2023 · 483df1a · 483df1a
1 parent afffbc4
commit 483df1a
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 21 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',
+							} }
+							expanded
+						>
+							<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-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;
 }