refine a few status details

packages/edit-site/src/components/change-status/index.js

@@ -17,13 +17,22 @@ import { useDispatch } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
+/**
+ * Internal dependencies
+ */
+import StatusLabel from '../sidebar-navigation-screen-page/status-label';
 
 const STATUS_OPTIONS = [
 	{
 		label: __( 'Draft' ),
 		value: 'draft',
 		hint: __( 'Not ready to publish' ),
 	},
+	{
+		label: __( 'Published' ),
+		value: 'publish',
+		hint: __( 'Anyone with the url can access' ),
+	},
 	{
 		label: __( 'Private' ),
 		value: 'private',
@@ -39,11 +48,6 @@ const STATUS_OPTIONS = [
 		value: 'future',
 		hint: __( 'Publish automatically on a chosen date' ),
 	},
-	{
-		label: __( 'Published' ),
-		value: 'publish',
-		hint: __( 'Anyone with the url can access' ),
-	},
 ];
 
 export default function ChangeStatus( { post } ) {
@@ -102,10 +106,24 @@ export default function ChangeStatus( { post } ) {
 		}
 	};
 
+	const handleStatus = ( value ) => {
+		if ( value === 'published' ) {
+			setDate( undefined );
+		}
+		setStatus( value );
+	};
+
 	return (
 		<>
-			<Button variant="secondary" onClick={ openModal }>
-				Change status
+			<Button
+				className="edit-site-change-status__trigger"
+				variant="tertiary"
+				onClick={ openModal }
+			>
+				<StatusLabel
+					status={ post?.password ? 'protected' : post.status }
+					date={ post?.date }
+				/>
 			</Button>
 			{ isOpen && (
 				<Modal
@@ -136,7 +154,7 @@ export default function ChangeStatus( { post } ) {
 											name={ `edit-site-change-status__status` }
 											value={ option.value }
 											onChange={ ( e ) =>
-												setStatus( e.target.value )
+												handleStatus( e.target.value )
 											}
 											checked={ option.value === status }
 										/>
@@ -161,6 +179,7 @@ export default function ChangeStatus( { post } ) {
 								<DateTimePicker
 									className="components-datetime__time__one-row"
 									currentDate={ date }
+									is12Hour
 									onChange={ setDate }
 								/>
 							</div>

packages/edit-site/src/components/change-status/style.scss

@@ -1,5 +1,5 @@
 .edit-site-change-status {
-	min-width: 480px;
+	width: 540px;
 	min-height: 400px;
 	.components-radio-control__option.with-hint {
 		display: flex;
@@ -60,8 +60,6 @@
 
 		fieldset:first-child {
 			.components-datetime__time-wrapper {
-				flex-direction: column;
-				align-items: flex-start;
 				> .components-flex-item {
 					display: none;
 				}

packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { PanelBody } from '@wordpress/components';
+import {
+	PanelBody,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { page as pageIcon } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { humanTimeDiff } from '@wordpress/date';
@@ -15,25 +19,32 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { store as editSiteStore } from '../../../store';
 import SidebarCard from '../sidebar-card';
 import PageContent from './page-content';
+import ChangeStatus from '../../change-status';
 import EditTemplate from './edit-template';
 
 export default function PagePanels() {
-	const { hasResolved, title, modified } = useSelect( ( select ) => {
-		const { getEditedPostContext } = select( editSiteStore );
-		const { getEditedEntityRecord, hasFinishedResolution } =
-			select( coreStore );
-		const context = getEditedPostContext();
-		const queryArgs = [ 'postType', context.postType, context.postId ];
-		const page = getEditedEntityRecord( ...queryArgs );
-		return {
-			hasResolved: hasFinishedResolution(
-				'getEditedEntityRecord',
-				queryArgs
-			),
-			title: page?.title,
-			modified: page?.modified,
-		};
-	}, [] );
+	const { id, type, hasResolved, status, date, password, title, modified } =
+		useSelect( ( select ) => {
+			const { getEditedPostContext } = select( editSiteStore );
+			const { getEditedEntityRecord, hasFinishedResolution } =
+				select( coreStore );
+			const context = getEditedPostContext();
+			const queryArgs = [ 'postType', context.postType, context.postId ];
+			const page = getEditedEntityRecord( ...queryArgs );
+			return {
+				hasResolved: hasFinishedResolution(
+					'getEditedEntityRecord',
+					queryArgs
+				),
+				title: page?.title,
+				id: page?.id,
+				type: page?.type,
+				status: page?.status,
+				date: page?.date,
+				password: page?.password,
+				modified: page?.modified,
+			};
+		}, [] );
 
 	if ( ! hasResolved ) {
 		return null;
@@ -45,11 +56,24 @@ export default function PagePanels() {
 				<SidebarCard
 					title={ decodeEntities( title ) }
 					icon={ pageIcon }
-					description={ sprintf(
-						// translators: %s: Human-readable time difference, e.g. "2 days ago".
-						__( 'Last edited %s' ),
-						humanTimeDiff( modified )
-					) }
+					description={
+						<VStack>
+							<Text>
+								{ sprintf(
+									// translators: %s: Human-readable time difference, e.g. "2 days ago".
+									__( 'Last edited %s' ),
+									humanTimeDiff( modified )
+								) }
+							</Text>
+							<ChangeStatus
+								status={ status }
+								date={ date }
+								password={ password }
+								postId={ id }
+								postType={ type }
+							/>
+						</VStack>
+					}
 				/>
 			</PanelBody>
 			<PanelBody title={ __( 'Content' ) }>

packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss

@@ -8,3 +8,9 @@
 .edit-site-page-panels__edit-template-button {
 	justify-content: center;
 }
+
+.edit-site-sidebar-card__description {
+	.edit-site-change-status__trigger {
+		margin-left: -$grid-unit-15;
+	}
+}

packages/edit-site/src/components/sidebar-navigation-screen-page/index.js

@@ -34,7 +34,6 @@ import SidebarButton from '../sidebar-button';
 import SidebarNavigationSubtitle from '../sidebar-navigation-subtitle';
 import PageDetails from './page-details';
 import PageActions from '../page-actions';
-import ChangeStatus from '../change-status';
 
 export default function SidebarNavigationScreenPage() {
 	const navigator = useNavigator();
@@ -96,15 +95,12 @@ export default function SidebarNavigationScreenPage() {
 				</>
 			}
 			meta={
-				<VStack>
-					<ExternalLink
-						className="edit-site-sidebar-navigation-screen__page-link"
-						href={ record.link }
-					>
-						{ record.link.replace( /^(https?:\/\/)?/, '' ) }
-					</ExternalLink>
-					<ChangeStatus post={ record } />
-				</VStack>
+				<ExternalLink
+					className="edit-site-sidebar-navigation-screen__page-link"
+					href={ record.link }
+				>
+					{ record.link.replace( /^(https?:\/\/)?/, '' ) }
+				</ExternalLink>
 			}
 			content={
 				<>

packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js

@@ -35,6 +35,7 @@ function getPageDetails( page ) {
 				<StatusLabel
 					status={ page?.password ? 'protected' : page.status }
 					date={ page?.date }
+					short
 				/>
 			),
 		},

packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { dateI18n, getDate, getSettings, humanTimeDiff } from '@wordpress/date';
+import { dateI18n, getDate, humanTimeDiff } from '@wordpress/date';
 import { createInterpolateElement } from '@wordpress/element';
 import { Path, SVG } from '@wordpress/primitives';
 
@@ -41,7 +41,7 @@ const pendingIcon = (
 	</SVG>
 );
 
-export default function StatusLabel( { status, date } ) {
+export default function StatusLabel( { status, date, short } ) {
 	const relateToNow = humanTimeDiff( date );
 	let statusLabel = '';
 	let statusIcon = pendingIcon;
@@ -59,13 +59,13 @@ export default function StatusLabel( { status, date } ) {
 			break;
 		case 'future':
 			const formattedDate = dateI18n(
-				getSettings().formats.date,
+				short ? 'M j' : 'F j',
 				getDate( date )
 			);
 			statusLabel = createInterpolateElement(
 				sprintf(
 					/* translators: %s: is the formatted date and time on which the post is scheduled to be published. */
-					__( 'Scheduled for <time>%s</time>' ),
+					__( 'Scheduled: <time>%s</time>' ),
 					formattedDate
 				),
 				{ time: <time dateTime={ date } /> }