From 7213d66b150202eeaa2bee886e117ab79d2a823f Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Fri, 9 Jun 2023 17:05:14 +1000
Subject: [PATCH 01/37] add required inputs

---
 .../page-details.js                           |  14 ++
 .../publish-date.js                           |  75 +++++++++++
 .../status-label.js                           | 127 +++++++-----------
 3 files changed, 141 insertions(+), 75 deletions(-)
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
index 996e1c9377314..7bb7bb00b0ab5 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
@@ -17,6 +17,7 @@ import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
  * Internal dependencies
  */
 import StatusLabel from './status-label';
+import PublishDate from './publish-date';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
@@ -33,6 +34,19 @@ function getPageDetails( page ) {
 			label: __( 'Status' ),
 			value: (
 				<StatusLabel
+					postId={ page.id }
+					postType={ page.type }
+					status={ page?.password ? 'protected' : page.status }
+					date={ page?.date }
+				/>
+			),
+		},
+		{
+			label: __( 'Publish on' ),
+			value: (
+				<PublishDate
+					postId={ page.id }
+					postType={ page.type }
 					status={ page?.password ? 'protected' : page.status }
 					date={ page?.date }
 				/>
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js
new file mode 100644
index 0000000000000..2ad25a4dd5c99
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js
@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { dateI18n, getDate, getSettings } from '@wordpress/date';
+import { createInterpolateElement, useState } from '@wordpress/element';
+import { DateTimePicker, Button, Dropdown } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+
+export default function StatusLabel( { date: currentDate, postId, postType } ) {
+	const [ date, setDate ] = useState( currentDate );
+
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	async function saveDate( newDate ) {
+		setDate( newDate );
+		try {
+			await editEntityRecord( 'postType', postType, postId, {
+				date,
+			} );
+		} catch ( error ) {
+			setDate( currentDate );
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while updating the status' );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		}
+	}
+
+	const formattedDate = dateI18n(
+		getSettings().formats.date,
+		getDate( date )
+	);
+
+	const 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>' ),
+			formattedDate
+		),
+		{ time: <time dateTime={ date } /> }
+	);
+
+	return (
+		<div className="edit-site-sidebar-navigation-screen-page__status">
+			<Dropdown
+				className="my-container-class-name"
+				contentClassName="my-dropdown-content-classname"
+				popoverProps={ { placement: 'bottom-start' } }
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<Button
+						variant="primary"
+						onClick={ onToggle }
+						aria-expanded={ isOpen }
+					>
+						{ statusLabel }
+					</Button>
+				) }
+				renderContent={ () => (
+					<DateTimePicker
+						currentDate={ date }
+						onChange={ saveDate }
+					/>
+				) }
+			/>
+		</div>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
index 208d8adc59ab9..c329f87e81800 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
@@ -6,84 +6,40 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
-import { dateI18n, getDate, getSettings, humanTimeDiff } from '@wordpress/date';
-import { createInterpolateElement } from '@wordpress/element';
-import { Path, SVG } from '@wordpress/primitives';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { SelectControl } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
 
-const publishedIcon = (
-	<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-		<Path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm-1.067-5.6 4.2-5.667.8.6-4.8 6.467-3-2.267.6-.8 2.2 1.667Z"
-		/>
-	</SVG>
-);
+export default function StatusLabel( {
+	status: currentStatus,
+	postId,
+	postType,
+} ) {
+	const [ status, setStatus ] = useState( currentStatus );
 
-const draftIcon = (
-	<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-		<Path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M14.5 8a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8 4a4 4 0 0 0 0-8v8Z"
-		/>
-	</SVG>
-);
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
 
-const pendingIcon = (
-	<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-		<Path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M14.5 8a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z"
-		/>
-	</SVG>
-);
+	async function saveStatus( newStatus ) {
+		setStatus( newStatus );
+		try {
+			await editEntityRecord( 'postType', postType, postId, {
+				status,
+			} );
+		} catch ( error ) {
+			setStatus( currentStatus );
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while updating the status' );
 
-export default function StatusLabel( { status, date } ) {
-	const relateToNow = humanTimeDiff( date );
-	let statusLabel = '';
-	let statusIcon = pendingIcon;
-	switch ( status ) {
-		case 'publish':
-			statusLabel = createInterpolateElement(
-				sprintf(
-					/* translators: %s: is the relative time when the post was published. */
-					__( 'Published <time>%s</time>' ),
-					relateToNow
-				),
-				{ time: <time dateTime={ date } /> }
-			);
-			statusIcon = publishedIcon;
-			break;
-		case 'future':
-			const formattedDate = dateI18n(
-				getSettings().formats.date,
-				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>' ),
-					formattedDate
-				),
-				{ time: <time dateTime={ date } /> }
-			);
-			break;
-		case 'draft':
-			statusLabel = __( 'Draft' );
-			statusIcon = draftIcon;
-			break;
-		case 'pending':
-			statusLabel = __( 'Pending' );
-			break;
-		case 'private':
-			statusLabel = __( 'Private' );
-			break;
-		case 'protected':
-			statusLabel = __( 'Password protected' );
-			break;
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		}
 	}
 
 	return (
@@ -95,7 +51,28 @@ export default function StatusLabel( { status, date } ) {
 				}
 			) }
 		>
-			{ statusIcon } { statusLabel }
+			<SelectControl
+				onChange={ saveStatus }
+				value={ status }
+				options={ [
+					{
+						label: 'Published',
+						value: 'publish',
+					},
+					{
+						label: 'Draft',
+						value: 'draft',
+					},
+					{
+						label: 'Scheduled',
+						value: 'future',
+					},
+					{
+						label: 'Pending',
+						value: 'pending',
+					},
+				] }
+			/>
 		</div>
 	);
 }

From c9382350bda8ca23195afe0d70ae86a3a42e3346 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Mon, 12 Jun 2023 12:06:53 +1000
Subject: [PATCH 02/37] schedule date

---
 .../components/sidebar-navigation-screen-page/publish-date.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js
index 2ad25a4dd5c99..d99d58cb4a91c 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js
@@ -42,7 +42,7 @@ export default function StatusLabel( { date: currentDate, postId, postType } ) {
 	const 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>' ),
+			__( '<time>%s</time>' ),
 			formattedDate
 		),
 		{ time: <time dateTime={ date } /> }

From e46f5ff53df35461cc2fe2242dd4f34094416219 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Mon, 12 Jun 2023 16:41:59 +1000
Subject: [PATCH 03/37] add password and fix a few things

---
 .../page-details.js                           | 12 ++++
 .../password.js                               | 60 +++++++++++++++++++
 .../publish-date.js                           |  2 +-
 .../status-label.js                           |  6 +-
 4 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-page/password.js

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
index 7bb7bb00b0ab5..57d761852d0a5 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
@@ -18,6 +18,7 @@ import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
  */
 import StatusLabel from './status-label';
 import PublishDate from './publish-date';
+import Password from './password';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
@@ -52,6 +53,17 @@ function getPageDetails( page ) {
 				/>
 			),
 		},
+		{
+			label: __( 'Visibility' ),
+			value: (
+				<Password
+					postId={ page.id }
+					postType={ page.type }
+					status={ page.status }
+					password={ page.password }
+				/>
+			),
+		},
 		{
 			label: __( 'Slug' ),
 			value: <Truncate numberOfLines={ 1 }>{ page.slug }</Truncate>,
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/password.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/password.js
new file mode 100644
index 0000000000000..b91ad94234652
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/password.js
@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { ToggleControl, TextControl } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+
+export default function Password( {
+	password: currentPassword,
+	postId,
+	postType,
+} ) {
+	const [ showPassword, setShowPassword ] = useState( !! currentPassword );
+	const [ password, setPassword ] = useState( currentPassword );
+
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	async function savePassword( newPassword ) {
+		setPassword( newPassword );
+		try {
+			await editEntityRecord( 'postType', postType, postId, {
+				password: newPassword,
+			} );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while updating the password' );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		}
+	}
+
+	const handleTogglePassword = ( value ) => {
+		setShowPassword( value );
+		if ( ! value ) {
+			savePassword( '' );
+		}
+	};
+
+	return (
+		<div className="edit-site-sidebar-navigation-screen-page__status">
+			<ToggleControl
+				label="Hide behind a password"
+				checked={ showPassword }
+				type="password"
+				onChange={ handleTogglePassword }
+			/>
+			{ showPassword && (
+				<TextControl onChange={ savePassword } value={ password } />
+			) }
+		</div>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js
index d99d58cb4a91c..c04f5b2058199 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js
@@ -19,7 +19,7 @@ export default function StatusLabel( { date: currentDate, postId, postType } ) {
 		setDate( newDate );
 		try {
 			await editEntityRecord( 'postType', postType, postId, {
-				date,
+				date: newDate,
 			} );
 		} catch ( error ) {
 			setDate( currentDate );
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
index c329f87e81800..34c5a022aaf60 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
@@ -27,7 +27,7 @@ export default function StatusLabel( {
 		setStatus( newStatus );
 		try {
 			await editEntityRecord( 'postType', postType, postId, {
-				status,
+				status: newStatus,
 			} );
 		} catch ( error ) {
 			setStatus( currentStatus );
@@ -71,6 +71,10 @@ export default function StatusLabel( {
 						label: 'Pending',
 						value: 'pending',
 					},
+					{
+						label: 'Private',
+						value: 'private',
+					},
 				] }
 			/>
 		</div>

From 511bacc10270137f6a40b441105e113182735221 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Tue, 13 Jun 2023 12:22:41 +1000
Subject: [PATCH 04/37] re-add status modal

---
 .../src/components/change-status/index.js     | 180 ++++++++++++++++++
 .../src/components/change-status/style.scss   |  69 +++++++
 .../sidebar-navigation-screen-page/index.js   |  16 +-
 packages/edit-site/src/style.scss             |   1 +
 4 files changed, 260 insertions(+), 6 deletions(-)
 create mode 100644 packages/edit-site/src/components/change-status/index.js
 create mode 100644 packages/edit-site/src/components/change-status/style.scss

diff --git a/packages/edit-site/src/components/change-status/index.js b/packages/edit-site/src/components/change-status/index.js
new file mode 100644
index 0000000000000..a65c2d7aee016
--- /dev/null
+++ b/packages/edit-site/src/components/change-status/index.js
@@ -0,0 +1,180 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Modal,
+	BaseControl,
+	CustomSelectControl,
+	ToggleControl,
+	DateTimePicker,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	TextControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+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';
+
+const STATUS_OPTIONS = [
+	{
+		name: __( 'Published' ),
+		value: 'publish',
+		key: 'publish',
+	},
+	{
+		name: __( 'Draft' ),
+		value: 'draft',
+		key: 'draft',
+	},
+	{
+		name: __( 'Pending' ),
+		value: 'pending',
+		key: 'pending',
+		__experimentalHint: __( 'Awaiting admin review' ),
+	},
+	{
+		name: __( 'Private' ),
+		value: 'private',
+		key: 'private',
+		__experimentalHint: __(
+			'Published, but only visible to admins and site editors'
+		),
+	},
+	{
+		name: __( 'Scheduled' ),
+		value: 'future',
+		key: 'future',
+		__experimentalHint: __( 'Publish automatically on a chosen date' ),
+	},
+];
+
+export default function ChangeStatus( { post } ) {
+	const [ isCreatingPage, setIsCreatingPage ] = useState( false );
+	const [ status, setStatus ] = useState( post.status );
+	const [ date, setDate ] = useState( post.date );
+	const [ showPassword, setShowPassword ] = useState( !! post.password );
+	const [ password, setPassword ] = useState( post.password );
+	const [ isOpen, setOpen ] = useState( false );
+	const openModal = () => setOpen( true );
+	const closeModal = () => setOpen( false );
+
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice, createSuccessNotice } =
+		useDispatch( noticesStore );
+
+	async function saveStatus( event ) {
+		event.preventDefault();
+
+		if ( isCreatingPage ) {
+			return;
+		}
+		setIsCreatingPage( true );
+		try {
+			await editEntityRecord( 'postType', post.type, post.id, {
+				status,
+				date,
+				password,
+			} );
+
+			createSuccessNotice( __( 'Updated status successfully' ), {
+				type: 'snackbar',
+			} );
+			setOpen( false );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while updating the status' );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		} finally {
+			setIsCreatingPage( false );
+		}
+	}
+
+	const handleTogglePassword = ( value ) => {
+		setShowPassword( value );
+		if ( ! value ) {
+			setPassword( '' );
+		}
+	};
+
+	return (
+		<>
+			<Button variant="secondary" onClick={ openModal }>
+				Change status
+			</Button>
+			{ isOpen && (
+				<Modal
+					title="Update status"
+					onRequestClose={ closeModal }
+					className="edit-site-change-status"
+				>
+					<VStack
+						className="edit-site-change-status__content"
+						spacing={ 5 }
+					>
+						<CustomSelectControl
+							value={
+								STATUS_OPTIONS.find(
+									( option ) => option.value === status
+								) || STATUS_OPTIONS[ 0 ]
+							}
+							label={ __( 'Status' ) }
+							options={ STATUS_OPTIONS }
+							onChange={ ( { selectedItem } ) => {
+								setStatus( selectedItem.value );
+							} }
+						/>
+						{ status === 'future' && (
+							<div className="edit-site-change-status__date-time-picker">
+								<DateTimePicker
+									className="components-datetime__time__one-row"
+									currentDate={ date }
+									onChange={ setDate }
+								/>
+							</div>
+						) }
+						<BaseControl
+							id={ `edit-site-change-status__password` }
+							label={ __( 'Password' ) }
+						>
+							<ToggleControl
+								label={ __( 'Hide behind a password' ) }
+								checked={ showPassword }
+								onChange={ handleTogglePassword }
+							/>
+							{ showPassword && (
+								<TextControl
+									onChange={ setPassword }
+									value={ password }
+									placeholder={ __( 'Enter your password' ) }
+									type="password"
+									help={ __(
+										'Anyone with the password will be able to access this page'
+									) }
+								/>
+							) }
+						</BaseControl>
+					</VStack>
+					<HStack
+						className="edit-site-change-status__footer"
+						alignment="right"
+					>
+						<Button variant="tertiary" onClick={ closeModal }>
+							Cancel
+						</Button>
+						<Button variant="primary" onClick={ saveStatus }>
+							Done
+						</Button>
+					</HStack>
+				</Modal>
+			) }
+		</>
+	);
+}
diff --git a/packages/edit-site/src/components/change-status/style.scss b/packages/edit-site/src/components/change-status/style.scss
new file mode 100644
index 0000000000000..ccfeb72bd700d
--- /dev/null
+++ b/packages/edit-site/src/components/change-status/style.scss
@@ -0,0 +1,69 @@
+.edit-site-change-status {
+	min-width: 480px;
+	min-height: 400px;
+	.components-modal__content {
+		padding: 0;
+		.components-modal__header + div {
+			display: flex;
+			flex-direction: column;
+			overflow: hidden;
+			height: 100%;
+
+		}
+	}
+	.components-custom-select-control__item {
+		&.has-hint {
+			grid-template-columns: auto 30px;
+			line-height: $default-line-height;
+			margin-bottom: 0;
+		}
+
+		.components-custom-select-control__item-hint {
+			grid-row: 2;
+			text-align: left;
+		}
+	}
+	.edit-site-change-status__content {
+		flex-grow: 1;
+		justify-content: flex-start;
+		overflow: auto;
+		padding: 0 $grid-unit-40 $grid-unit-40;
+		> div {
+			flex-shrink: 0;
+		}
+	}
+	.edit-site-change-status__footer {
+		flex-grow: 0;
+		padding: $grid-unit-20 $grid-unit-40 $grid-unit-20;
+		border-top: 1px solid $gray-100;
+	}
+}
+
+.edit-site-change-status__date-time-picker {
+	border-radius: $radius-block-ui;
+	border: 1px solid $gray-100;
+	padding: $grid-unit-20;
+	.components-datetime {
+		gap: $grid-unit-05;
+	}
+	.components-datetime__date {
+		margin-bottom: $grid-unit-10;
+	}
+	.components-datetime__time {
+		display: flex;
+		gap: $grid-unit-10;
+
+		fieldset:first-child {
+			.components-datetime__time-wrapper {
+				flex-direction: column;
+				align-items: flex-start;
+				> .components-flex-item {
+					display: none;
+				}
+			}
+		}
+		fieldset:last-child {
+			flex-grow: 1;
+		}
+	}
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
index 897c647cddae4..4951e35d03763 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
@@ -34,6 +34,7 @@ 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();
@@ -95,12 +96,15 @@ export default function SidebarNavigationScreenPage() {
 				</>
 			}
 			meta={
-				<ExternalLink
-					className="edit-site-sidebar-navigation-screen__page-link"
-					href={ record.link }
-				>
-					{ record.link.replace( /^(https?:\/\/)?/, '' ) }
-				</ExternalLink>
+				<VStack>
+					<ExternalLink
+						className="edit-site-sidebar-navigation-screen__page-link"
+						href={ record.link }
+					>
+						{ record.link.replace( /^(https?:\/\/)?/, '' ) }
+					</ExternalLink>
+					<ChangeStatus post={ record } />
+				</VStack>
 			}
 			content={
 				<>
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index e921cb70106f8..0ebad6f548656 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -4,6 +4,7 @@
 @import "./components/block-editor/style.scss";
 @import "./components/canvas-spinner/style.scss";
 @import "./components/code-editor/style.scss";
+@import "./components/change-status/style.scss";
 @import "./components/global-styles/style.scss";
 @import "./components/global-styles/screen-revisions/style.scss";
 @import "./components/header-edit-mode/style.scss";

From 73f89b48fbbd94fea4dcd74fc4eb746e6d905ded Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Tue, 13 Jun 2023 13:12:57 +1000
Subject: [PATCH 05/37] update change status modal

---
 .../src/components/change-status/index.js     | 111 +++++++++++-------
 .../src/components/change-status/style.scss   |   5 +
 2 files changed, 75 insertions(+), 41 deletions(-)

diff --git a/packages/edit-site/src/components/change-status/index.js b/packages/edit-site/src/components/change-status/index.js
index a65c2d7aee016..579e80465351f 100644
--- a/packages/edit-site/src/components/change-status/index.js
+++ b/packages/edit-site/src/components/change-status/index.js
@@ -5,9 +5,9 @@ import {
 	Button,
 	Modal,
 	BaseControl,
-	CustomSelectControl,
 	ToggleControl,
 	DateTimePicker,
+	__experimentalText as Text,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	TextControl,
@@ -20,34 +20,29 @@ import { store as noticesStore } from '@wordpress/notices';
 
 const STATUS_OPTIONS = [
 	{
-		name: __( 'Published' ),
-		value: 'publish',
-		key: 'publish',
+		label: __( 'Draft' ),
+		value: 'draft',
+		hint: __( 'Not ready to publish' ),
 	},
 	{
-		name: __( 'Draft' ),
-		value: 'draft',
-		key: 'draft',
+		label: __( 'Private' ),
+		value: 'private',
+		hint: __( 'Published, but only visible to admins and site editors' ),
 	},
 	{
-		name: __( 'Pending' ),
+		label: __( 'Pending' ),
 		value: 'pending',
-		key: 'pending',
-		__experimentalHint: __( 'Awaiting admin review' ),
+		hint: __( 'Awaiting admin review' ),
 	},
 	{
-		name: __( 'Private' ),
-		value: 'private',
-		key: 'private',
-		__experimentalHint: __(
-			'Published, but only visible to admins and site editors'
-		),
+		label: __( 'Scheduled' ),
+		value: 'future',
+		hint: __( 'Publish automatically on a chosen date' ),
 	},
 	{
-		name: __( 'Scheduled' ),
-		value: 'future',
-		key: 'future',
-		__experimentalHint: __( 'Publish automatically on a chosen date' ),
+		label: __( 'Published' ),
+		value: 'publish',
+		hint: __( 'Anyone with the url can access' ),
 	},
 ];
 
@@ -79,9 +74,12 @@ export default function ChangeStatus( { post } ) {
 				password,
 			} );
 
-			createSuccessNotice( __( 'Updated status successfully' ), {
-				type: 'snackbar',
-			} );
+			createSuccessNotice(
+				__( 'Save your changes for your status to take affect' ),
+				{
+					type: 'snackbar',
+				}
+			);
 			setOpen( false );
 		} catch ( error ) {
 			const errorMessage =
@@ -119,18 +117,45 @@ export default function ChangeStatus( { post } ) {
 						className="edit-site-change-status__content"
 						spacing={ 5 }
 					>
-						<CustomSelectControl
-							value={
-								STATUS_OPTIONS.find(
-									( option ) => option.value === status
-								) || STATUS_OPTIONS[ 0 ]
-							}
+						<BaseControl
+							hideLabelFromVision
 							label={ __( 'Status' ) }
-							options={ STATUS_OPTIONS }
-							onChange={ ( { selectedItem } ) => {
-								setStatus( selectedItem.value );
-							} }
-						/>
+							id={ `edit-site-change-status__status` }
+							className={ 'components-radio-control' }
+						>
+							<VStack spacing={ 3 }>
+								{ STATUS_OPTIONS.map( ( option, index ) => (
+									<div
+										key={ `edit-site-change-status__status-${ index }` }
+										className="components-radio-control__option with-hint"
+									>
+										<input
+											id={ `edit-site-change-status__status-${ index }` }
+											className="components-radio-control__input"
+											type="radio"
+											name={ `edit-site-change-status__status` }
+											value={ option.value }
+											onChange={ ( e ) =>
+												setStatus( e.target.value )
+											}
+											checked={ option.value === status }
+										/>
+										<VStack spacing={ 1 }>
+											<label
+												htmlFor={ `edit-site-change-status__status-${ index }` }
+											>
+												{ option.label }
+											</label>
+											{ option.hint && (
+												<Text variant="muted">
+													{ option.hint }
+												</Text>
+											) }
+										</VStack>
+									</div>
+								) ) }
+							</VStack>
+						</BaseControl>
 						{ status === 'future' && (
 							<div className="edit-site-change-status__date-time-picker">
 								<DateTimePicker
@@ -145,7 +170,9 @@ export default function ChangeStatus( { post } ) {
 							label={ __( 'Password' ) }
 						>
 							<ToggleControl
-								label={ __( 'Hide behind a password' ) }
+								label={ __(
+									'Hide this page behind a password'
+								) }
 								checked={ showPassword }
 								onChange={ handleTogglePassword }
 							/>
@@ -153,11 +180,13 @@ export default function ChangeStatus( { post } ) {
 								<TextControl
 									onChange={ setPassword }
 									value={ password }
-									placeholder={ __( 'Enter your password' ) }
-									type="password"
-									help={ __(
-										'Anyone with the password will be able to access this page'
+									/* eslint-disable jsx-a11y/no-autofocus */
+									autoFocus
+									/* eslint-enable jsx-a11y/no-autofocus */
+									placeholder={ __(
+										'Enter a secure password'
 									) }
+									type="password"
 								/>
 							) }
 						</BaseControl>
@@ -167,10 +196,10 @@ export default function ChangeStatus( { post } ) {
 						alignment="right"
 					>
 						<Button variant="tertiary" onClick={ closeModal }>
-							Cancel
+							{ __( 'Cancel' ) }
 						</Button>
 						<Button variant="primary" onClick={ saveStatus }>
-							Done
+							{ __( 'Done' ) }
 						</Button>
 					</HStack>
 				</Modal>
diff --git a/packages/edit-site/src/components/change-status/style.scss b/packages/edit-site/src/components/change-status/style.scss
index ccfeb72bd700d..f4112a32e75f8 100644
--- a/packages/edit-site/src/components/change-status/style.scss
+++ b/packages/edit-site/src/components/change-status/style.scss
@@ -1,6 +1,11 @@
 .edit-site-change-status {
 	min-width: 480px;
 	min-height: 400px;
+	.components-radio-control__option.with-hint {
+		display: flex;
+		gap: $grid-unit-10;
+		align-items: center;
+	}
 	.components-modal__content {
 		padding: 0;
 		.components-modal__header + div {

From d5013da32e2bc8c5bad7a8b8b3b1e12d76dab5c3 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Tue, 13 Jun 2023 13:16:55 +1000
Subject: [PATCH 06/37] revert in sidebar status change

---
 .../page-details.js                           |  26 ----
 .../password.js                               |  60 --------
 .../publish-date.js                           |  75 ----------
 .../status-label.js                           | 131 ++++++++++--------
 .../sidebar-navigation-screen-page/style.scss |   1 -
 5 files changed, 75 insertions(+), 218 deletions(-)
 delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-page/password.js
 delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
index 57d761852d0a5..996e1c9377314 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
@@ -17,8 +17,6 @@ import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
  * Internal dependencies
  */
 import StatusLabel from './status-label';
-import PublishDate from './publish-date';
-import Password from './password';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
@@ -35,35 +33,11 @@ function getPageDetails( page ) {
 			label: __( 'Status' ),
 			value: (
 				<StatusLabel
-					postId={ page.id }
-					postType={ page.type }
 					status={ page?.password ? 'protected' : page.status }
 					date={ page?.date }
 				/>
 			),
 		},
-		{
-			label: __( 'Publish on' ),
-			value: (
-				<PublishDate
-					postId={ page.id }
-					postType={ page.type }
-					status={ page?.password ? 'protected' : page.status }
-					date={ page?.date }
-				/>
-			),
-		},
-		{
-			label: __( 'Visibility' ),
-			value: (
-				<Password
-					postId={ page.id }
-					postType={ page.type }
-					status={ page.status }
-					password={ page.password }
-				/>
-			),
-		},
 		{
 			label: __( 'Slug' ),
 			value: <Truncate numberOfLines={ 1 }>{ page.slug }</Truncate>,
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/password.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/password.js
deleted file mode 100644
index b91ad94234652..0000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/password.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
-import { ToggleControl, TextControl } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as noticesStore } from '@wordpress/notices';
-
-export default function Password( {
-	password: currentPassword,
-	postId,
-	postType,
-} ) {
-	const [ showPassword, setShowPassword ] = useState( !! currentPassword );
-	const [ password, setPassword ] = useState( currentPassword );
-
-	const { editEntityRecord } = useDispatch( coreStore );
-	const { createErrorNotice } = useDispatch( noticesStore );
-
-	async function savePassword( newPassword ) {
-		setPassword( newPassword );
-		try {
-			await editEntityRecord( 'postType', postType, postId, {
-				password: newPassword,
-			} );
-		} catch ( error ) {
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __( 'An error occurred while updating the password' );
-
-			createErrorNotice( errorMessage, {
-				type: 'snackbar',
-			} );
-		}
-	}
-
-	const handleTogglePassword = ( value ) => {
-		setShowPassword( value );
-		if ( ! value ) {
-			savePassword( '' );
-		}
-	};
-
-	return (
-		<div className="edit-site-sidebar-navigation-screen-page__status">
-			<ToggleControl
-				label="Hide behind a password"
-				checked={ showPassword }
-				type="password"
-				onChange={ handleTogglePassword }
-			/>
-			{ showPassword && (
-				<TextControl onChange={ savePassword } value={ password } />
-			) }
-		</div>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js
deleted file mode 100644
index c04f5b2058199..0000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { dateI18n, getDate, getSettings } from '@wordpress/date';
-import { createInterpolateElement, useState } from '@wordpress/element';
-import { DateTimePicker, Button, Dropdown } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as noticesStore } from '@wordpress/notices';
-
-export default function StatusLabel( { date: currentDate, postId, postType } ) {
-	const [ date, setDate ] = useState( currentDate );
-
-	const { editEntityRecord } = useDispatch( coreStore );
-	const { createErrorNotice } = useDispatch( noticesStore );
-
-	async function saveDate( newDate ) {
-		setDate( newDate );
-		try {
-			await editEntityRecord( 'postType', postType, postId, {
-				date: newDate,
-			} );
-		} catch ( error ) {
-			setDate( currentDate );
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __( 'An error occurred while updating the status' );
-
-			createErrorNotice( errorMessage, {
-				type: 'snackbar',
-			} );
-		}
-	}
-
-	const formattedDate = dateI18n(
-		getSettings().formats.date,
-		getDate( date )
-	);
-
-	const statusLabel = createInterpolateElement(
-		sprintf(
-			/* translators: %s: is the formatted date and time on which the post is scheduled to be published. */
-			__( '<time>%s</time>' ),
-			formattedDate
-		),
-		{ time: <time dateTime={ date } /> }
-	);
-
-	return (
-		<div className="edit-site-sidebar-navigation-screen-page__status">
-			<Dropdown
-				className="my-container-class-name"
-				contentClassName="my-dropdown-content-classname"
-				popoverProps={ { placement: 'bottom-start' } }
-				renderToggle={ ( { isOpen, onToggle } ) => (
-					<Button
-						variant="primary"
-						onClick={ onToggle }
-						aria-expanded={ isOpen }
-					>
-						{ statusLabel }
-					</Button>
-				) }
-				renderContent={ () => (
-					<DateTimePicker
-						currentDate={ date }
-						onChange={ saveDate }
-					/>
-				) }
-			/>
-		</div>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
index 34c5a022aaf60..208d8adc59ab9 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
@@ -6,40 +6,84 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
-import { SelectControl } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as noticesStore } from '@wordpress/notices';
+import { __, sprintf } from '@wordpress/i18n';
+import { dateI18n, getDate, getSettings, humanTimeDiff } from '@wordpress/date';
+import { createInterpolateElement } from '@wordpress/element';
+import { Path, SVG } from '@wordpress/primitives';
 
-export default function StatusLabel( {
-	status: currentStatus,
-	postId,
-	postType,
-} ) {
-	const [ status, setStatus ] = useState( currentStatus );
+const publishedIcon = (
+	<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm-1.067-5.6 4.2-5.667.8.6-4.8 6.467-3-2.267.6-.8 2.2 1.667Z"
+		/>
+	</SVG>
+);
 
-	const { editEntityRecord } = useDispatch( coreStore );
-	const { createErrorNotice } = useDispatch( noticesStore );
+const draftIcon = (
+	<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M14.5 8a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8 4a4 4 0 0 0 0-8v8Z"
+		/>
+	</SVG>
+);
 
-	async function saveStatus( newStatus ) {
-		setStatus( newStatus );
-		try {
-			await editEntityRecord( 'postType', postType, postId, {
-				status: newStatus,
-			} );
-		} catch ( error ) {
-			setStatus( currentStatus );
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __( 'An error occurred while updating the status' );
+const pendingIcon = (
+	<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M14.5 8a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z"
+		/>
+	</SVG>
+);
 
-			createErrorNotice( errorMessage, {
-				type: 'snackbar',
-			} );
-		}
+export default function StatusLabel( { status, date } ) {
+	const relateToNow = humanTimeDiff( date );
+	let statusLabel = '';
+	let statusIcon = pendingIcon;
+	switch ( status ) {
+		case 'publish':
+			statusLabel = createInterpolateElement(
+				sprintf(
+					/* translators: %s: is the relative time when the post was published. */
+					__( 'Published <time>%s</time>' ),
+					relateToNow
+				),
+				{ time: <time dateTime={ date } /> }
+			);
+			statusIcon = publishedIcon;
+			break;
+		case 'future':
+			const formattedDate = dateI18n(
+				getSettings().formats.date,
+				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>' ),
+					formattedDate
+				),
+				{ time: <time dateTime={ date } /> }
+			);
+			break;
+		case 'draft':
+			statusLabel = __( 'Draft' );
+			statusIcon = draftIcon;
+			break;
+		case 'pending':
+			statusLabel = __( 'Pending' );
+			break;
+		case 'private':
+			statusLabel = __( 'Private' );
+			break;
+		case 'protected':
+			statusLabel = __( 'Password protected' );
+			break;
 	}
 
 	return (
@@ -51,32 +95,7 @@ export default function StatusLabel( {
 				}
 			) }
 		>
-			<SelectControl
-				onChange={ saveStatus }
-				value={ status }
-				options={ [
-					{
-						label: 'Published',
-						value: 'publish',
-					},
-					{
-						label: 'Draft',
-						value: 'draft',
-					},
-					{
-						label: 'Scheduled',
-						value: 'future',
-					},
-					{
-						label: 'Pending',
-						value: 'pending',
-					},
-					{
-						label: 'Private',
-						value: 'private',
-					},
-				] }
-			/>
+			{ statusIcon } { statusLabel }
 		</div>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss
index c58e9f0939246..525d028f6fd29 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss
@@ -77,4 +77,3 @@
 		color: $gray-200;
 	}
 }
-

From fc692d0a1b51ac0fba7eb8b35d6f0912afbffec8 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Tue, 13 Jun 2023 15:33:09 +1000
Subject: [PATCH 07/37] refine a few status details

---
 .../src/components/change-status/index.js     | 35 +++++++---
 .../src/components/change-status/style.scss   |  4 +-
 .../sidebar-edit-mode/page-panels/index.js    | 68 +++++++++++++------
 .../sidebar-edit-mode/page-panels/style.scss  |  6 ++
 .../sidebar-navigation-screen-page/index.js   | 16 ++---
 .../page-details.js                           |  1 +
 .../status-label.js                           |  8 +--
 7 files changed, 91 insertions(+), 47 deletions(-)

diff --git a/packages/edit-site/src/components/change-status/index.js b/packages/edit-site/src/components/change-status/index.js
index 579e80465351f..efbf963b10c73 100644
--- a/packages/edit-site/src/components/change-status/index.js
+++ b/packages/edit-site/src/components/change-status/index.js
@@ -17,6 +17,10 @@ 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 = [
 	{
@@ -24,6 +28,11 @@ const STATUS_OPTIONS = [
 		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>
diff --git a/packages/edit-site/src/components/change-status/style.scss b/packages/edit-site/src/components/change-status/style.scss
index f4112a32e75f8..958b9dd1ad2b0 100644
--- a/packages/edit-site/src/components/change-status/style.scss
+++ b/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;
 				}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js
index bcf81a7aa7d75..c6f30156bb255 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js
+++ b/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' ) }>
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
index 58178303e48e5..cc6deef0703ae 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
+++ b/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;
+	}
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
index 4951e35d03763..897c647cddae4 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
+++ b/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={
 				<>
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
index 996e1c9377314..f01b7970f1996 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
+++ b/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
 				/>
 			),
 		},
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
index 208d8adc59ab9..d451e08916584 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
+++ b/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 } /> }

From 0d25392e35b6fa18197e807a009ce18bcec4fb70 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Wed, 14 Jun 2023 15:00:34 +1000
Subject: [PATCH 08/37] fix merge issues

---
 .../src/components/change-status/index.js     | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/edit-site/src/components/change-status/index.js b/packages/edit-site/src/components/change-status/index.js
index efbf963b10c73..5c399669d46d4 100644
--- a/packages/edit-site/src/components/change-status/index.js
+++ b/packages/edit-site/src/components/change-status/index.js
@@ -50,12 +50,18 @@ const STATUS_OPTIONS = [
 	},
 ];
 
-export default function ChangeStatus( { post } ) {
+export default function ChangeStatus( {
+	postType,
+	postId,
+	postStatus: initialStatus,
+	password: initialPassword,
+	date: initialDate,
+} ) {
 	const [ isCreatingPage, setIsCreatingPage ] = useState( false );
-	const [ status, setStatus ] = useState( post.status );
-	const [ date, setDate ] = useState( post.date );
-	const [ showPassword, setShowPassword ] = useState( !! post.password );
-	const [ password, setPassword ] = useState( post.password );
+	const [ status, setStatus ] = useState( initialStatus );
+	const [ date, setDate ] = useState( initialDate );
+	const [ showPassword, setShowPassword ] = useState( !! initialPassword );
+	const [ password, setPassword ] = useState( initialPassword );
 	const [ isOpen, setOpen ] = useState( false );
 	const openModal = () => setOpen( true );
 	const closeModal = () => setOpen( false );
@@ -72,7 +78,7 @@ export default function ChangeStatus( { post } ) {
 		}
 		setIsCreatingPage( true );
 		try {
-			await editEntityRecord( 'postType', post.type, post.id, {
+			await editEntityRecord( 'postType', postType, postId, {
 				status,
 				date,
 				password,
@@ -121,8 +127,8 @@ export default function ChangeStatus( { post } ) {
 				onClick={ openModal }
 			>
 				<StatusLabel
-					status={ post?.password ? 'protected' : post.status }
-					date={ post?.date }
+					status={ initialPassword ? 'protected' : initialStatus }
+					date={ initialDate }
 				/>
 			</Button>
 			{ isOpen && (

From 42145f0a8fec73d85c6bf0f9ce1ed8bb522762de Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Wed, 14 Jun 2023 15:07:30 +1000
Subject: [PATCH 09/37] fix status label

---
 packages/edit-site/src/components/change-status/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/change-status/index.js b/packages/edit-site/src/components/change-status/index.js
index 5c399669d46d4..60aa2158aee7c 100644
--- a/packages/edit-site/src/components/change-status/index.js
+++ b/packages/edit-site/src/components/change-status/index.js
@@ -53,7 +53,7 @@ const STATUS_OPTIONS = [
 export default function ChangeStatus( {
 	postType,
 	postId,
-	postStatus: initialStatus,
+	status: initialStatus,
 	password: initialPassword,
 	date: initialDate,
 } ) {

From 736fac9cba2687dd79cb48f3f9e2d8f6b8da4263 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Wed, 14 Jun 2023 15:22:39 +1000
Subject: [PATCH 10/37] use null for status date

---
 packages/edit-site/src/components/change-status/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/change-status/index.js b/packages/edit-site/src/components/change-status/index.js
index 60aa2158aee7c..f5128c217f82b 100644
--- a/packages/edit-site/src/components/change-status/index.js
+++ b/packages/edit-site/src/components/change-status/index.js
@@ -113,8 +113,8 @@ export default function ChangeStatus( {
 	};
 
 	const handleStatus = ( value ) => {
-		if ( value === 'published' ) {
-			setDate( undefined );
+		if ( value === 'publish' ) {
+			setDate( null );
 		}
 		setStatus( value );
 	};

From 46f7ad562d3cddd246db285b74aa385bbcd3c67e Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Thu, 15 Jun 2023 11:53:50 +1000
Subject: [PATCH 11/37] handle empty date

---
 .../status-label.js                            | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
index d451e08916584..a8dd39bf880bc 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
@@ -47,14 +47,16 @@ export default function StatusLabel( { status, date, short } ) {
 	let statusIcon = pendingIcon;
 	switch ( status ) {
 		case 'publish':
-			statusLabel = createInterpolateElement(
-				sprintf(
-					/* translators: %s: is the relative time when the post was published. */
-					__( 'Published <time>%s</time>' ),
-					relateToNow
-				),
-				{ time: <time dateTime={ date } /> }
-			);
+			statusLabel = date
+				? createInterpolateElement(
+						sprintf(
+							/* translators: %s: is the relative time when the post was published. */
+							__( 'Published <time>%s</time>' ),
+							relateToNow
+						),
+						{ time: <time dateTime={ date } /> }
+				  )
+				: __( 'Published' );
 			statusIcon = publishedIcon;
 			break;
 		case 'future':

From 2df2fc9e57c1cb3f7bbc1a175200220e60944972 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Thu, 15 Jun 2023 15:08:35 +1000
Subject: [PATCH 12/37] change to add fields instead of modal

---
 .../src/components/change-status/index.js     | 234 ------------------
 .../src/components/change-status/style.scss   |  72 ------
 .../sidebar-edit-mode/page-panels/index.js    |  18 +-
 .../page-panels/page-status.js                | 229 +++++++++++++++++
 .../page-panels/page-summary.js               |  35 +++
 .../page-panels/publish-date.js               |  93 +++++++
 .../sidebar-edit-mode/page-panels/style.scss  |  26 ++
 .../status-label.js                           |  18 +-
 8 files changed, 403 insertions(+), 322 deletions(-)
 delete mode 100644 packages/edit-site/src/components/change-status/index.js
 delete mode 100644 packages/edit-site/src/components/change-status/style.scss
 create mode 100644 packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
 create mode 100644 packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-summary.js
 create mode 100644 packages/edit-site/src/components/sidebar-edit-mode/page-panels/publish-date.js

diff --git a/packages/edit-site/src/components/change-status/index.js b/packages/edit-site/src/components/change-status/index.js
deleted file mode 100644
index f5128c217f82b..0000000000000
--- a/packages/edit-site/src/components/change-status/index.js
+++ /dev/null
@@ -1,234 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	Button,
-	Modal,
-	BaseControl,
-	ToggleControl,
-	DateTimePicker,
-	__experimentalText as Text,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	TextControl,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-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',
-		hint: __( 'Published, but only visible to admins and site editors' ),
-	},
-	{
-		label: __( 'Pending' ),
-		value: 'pending',
-		hint: __( 'Awaiting admin review' ),
-	},
-	{
-		label: __( 'Scheduled' ),
-		value: 'future',
-		hint: __( 'Publish automatically on a chosen date' ),
-	},
-];
-
-export default function ChangeStatus( {
-	postType,
-	postId,
-	status: initialStatus,
-	password: initialPassword,
-	date: initialDate,
-} ) {
-	const [ isCreatingPage, setIsCreatingPage ] = useState( false );
-	const [ status, setStatus ] = useState( initialStatus );
-	const [ date, setDate ] = useState( initialDate );
-	const [ showPassword, setShowPassword ] = useState( !! initialPassword );
-	const [ password, setPassword ] = useState( initialPassword );
-	const [ isOpen, setOpen ] = useState( false );
-	const openModal = () => setOpen( true );
-	const closeModal = () => setOpen( false );
-
-	const { editEntityRecord } = useDispatch( coreStore );
-	const { createErrorNotice, createSuccessNotice } =
-		useDispatch( noticesStore );
-
-	async function saveStatus( event ) {
-		event.preventDefault();
-
-		if ( isCreatingPage ) {
-			return;
-		}
-		setIsCreatingPage( true );
-		try {
-			await editEntityRecord( 'postType', postType, postId, {
-				status,
-				date,
-				password,
-			} );
-
-			createSuccessNotice(
-				__( 'Save your changes for your status to take affect' ),
-				{
-					type: 'snackbar',
-				}
-			);
-			setOpen( false );
-		} catch ( error ) {
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __( 'An error occurred while updating the status' );
-
-			createErrorNotice( errorMessage, {
-				type: 'snackbar',
-			} );
-		} finally {
-			setIsCreatingPage( false );
-		}
-	}
-
-	const handleTogglePassword = ( value ) => {
-		setShowPassword( value );
-		if ( ! value ) {
-			setPassword( '' );
-		}
-	};
-
-	const handleStatus = ( value ) => {
-		if ( value === 'publish' ) {
-			setDate( null );
-		}
-		setStatus( value );
-	};
-
-	return (
-		<>
-			<Button
-				className="edit-site-change-status__trigger"
-				variant="tertiary"
-				onClick={ openModal }
-			>
-				<StatusLabel
-					status={ initialPassword ? 'protected' : initialStatus }
-					date={ initialDate }
-				/>
-			</Button>
-			{ isOpen && (
-				<Modal
-					title="Update status"
-					onRequestClose={ closeModal }
-					className="edit-site-change-status"
-				>
-					<VStack
-						className="edit-site-change-status__content"
-						spacing={ 5 }
-					>
-						<BaseControl
-							hideLabelFromVision
-							label={ __( 'Status' ) }
-							id={ `edit-site-change-status__status` }
-							className={ 'components-radio-control' }
-						>
-							<VStack spacing={ 3 }>
-								{ STATUS_OPTIONS.map( ( option, index ) => (
-									<div
-										key={ `edit-site-change-status__status-${ index }` }
-										className="components-radio-control__option with-hint"
-									>
-										<input
-											id={ `edit-site-change-status__status-${ index }` }
-											className="components-radio-control__input"
-											type="radio"
-											name={ `edit-site-change-status__status` }
-											value={ option.value }
-											onChange={ ( e ) =>
-												handleStatus( e.target.value )
-											}
-											checked={ option.value === status }
-										/>
-										<VStack spacing={ 1 }>
-											<label
-												htmlFor={ `edit-site-change-status__status-${ index }` }
-											>
-												{ option.label }
-											</label>
-											{ option.hint && (
-												<Text variant="muted">
-													{ option.hint }
-												</Text>
-											) }
-										</VStack>
-									</div>
-								) ) }
-							</VStack>
-						</BaseControl>
-						{ status === 'future' && (
-							<div className="edit-site-change-status__date-time-picker">
-								<DateTimePicker
-									className="components-datetime__time__one-row"
-									currentDate={ date }
-									is12Hour
-									onChange={ setDate }
-								/>
-							</div>
-						) }
-						<BaseControl
-							id={ `edit-site-change-status__password` }
-							label={ __( 'Password' ) }
-						>
-							<ToggleControl
-								label={ __(
-									'Hide this page behind a password'
-								) }
-								checked={ showPassword }
-								onChange={ handleTogglePassword }
-							/>
-							{ showPassword && (
-								<TextControl
-									onChange={ setPassword }
-									value={ password }
-									/* eslint-disable jsx-a11y/no-autofocus */
-									autoFocus
-									/* eslint-enable jsx-a11y/no-autofocus */
-									placeholder={ __(
-										'Enter a secure password'
-									) }
-									type="password"
-								/>
-							) }
-						</BaseControl>
-					</VStack>
-					<HStack
-						className="edit-site-change-status__footer"
-						alignment="right"
-					>
-						<Button variant="tertiary" onClick={ closeModal }>
-							{ __( 'Cancel' ) }
-						</Button>
-						<Button variant="primary" onClick={ saveStatus }>
-							{ __( 'Done' ) }
-						</Button>
-					</HStack>
-				</Modal>
-			) }
-		</>
-	);
-}
diff --git a/packages/edit-site/src/components/change-status/style.scss b/packages/edit-site/src/components/change-status/style.scss
deleted file mode 100644
index 958b9dd1ad2b0..0000000000000
--- a/packages/edit-site/src/components/change-status/style.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-.edit-site-change-status {
-	width: 540px;
-	min-height: 400px;
-	.components-radio-control__option.with-hint {
-		display: flex;
-		gap: $grid-unit-10;
-		align-items: center;
-	}
-	.components-modal__content {
-		padding: 0;
-		.components-modal__header + div {
-			display: flex;
-			flex-direction: column;
-			overflow: hidden;
-			height: 100%;
-
-		}
-	}
-	.components-custom-select-control__item {
-		&.has-hint {
-			grid-template-columns: auto 30px;
-			line-height: $default-line-height;
-			margin-bottom: 0;
-		}
-
-		.components-custom-select-control__item-hint {
-			grid-row: 2;
-			text-align: left;
-		}
-	}
-	.edit-site-change-status__content {
-		flex-grow: 1;
-		justify-content: flex-start;
-		overflow: auto;
-		padding: 0 $grid-unit-40 $grid-unit-40;
-		> div {
-			flex-shrink: 0;
-		}
-	}
-	.edit-site-change-status__footer {
-		flex-grow: 0;
-		padding: $grid-unit-20 $grid-unit-40 $grid-unit-20;
-		border-top: 1px solid $gray-100;
-	}
-}
-
-.edit-site-change-status__date-time-picker {
-	border-radius: $radius-block-ui;
-	border: 1px solid $gray-100;
-	padding: $grid-unit-20;
-	.components-datetime {
-		gap: $grid-unit-05;
-	}
-	.components-datetime__date {
-		margin-bottom: $grid-unit-10;
-	}
-	.components-datetime__time {
-		display: flex;
-		gap: $grid-unit-10;
-
-		fieldset:first-child {
-			.components-datetime__time-wrapper {
-				> .components-flex-item {
-					display: none;
-				}
-			}
-		}
-		fieldset:last-child {
-			flex-grow: 1;
-		}
-	}
-}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js
index c6f30156bb255..69971d1ad413a 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js
@@ -19,7 +19,7 @@ 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 PageSummary from './page-summary';
 import EditTemplate from './edit-template';
 
 export default function PagePanels() {
@@ -65,17 +65,19 @@ export default function PagePanels() {
 									humanTimeDiff( modified )
 								) }
 							</Text>
-							<ChangeStatus
-								status={ status }
-								date={ date }
-								password={ password }
-								postId={ id }
-								postType={ type }
-							/>
 						</VStack>
 					}
 				/>
 			</PanelBody>
+			<PanelBody title={ __( 'Summary' ) }>
+				<PageSummary
+					status={ status }
+					date={ date }
+					password={ password }
+					postId={ id }
+					postType={ type }
+				/>
+			</PanelBody>
 			<PanelBody title={ __( 'Content' ) }>
 				<PageContent />
 			</PanelBody>
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
new file mode 100644
index 0000000000000..59443e3dc4fff
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
@@ -0,0 +1,229 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	BaseControl,
+	ToggleControl,
+	Dropdown,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	TextControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { useState, useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+/**
+ * Internal dependencies
+ */
+import StatusLabel from '../../sidebar-navigation-screen-page/status-label';
+
+const STATUS_OPTIONS = [
+	{
+		label: __( 'Draft' ),
+		value: 'draft',
+		hint: __( 'Not ready to publish.' ),
+	},
+	{
+		label: __( 'Pending' ),
+		value: 'pending',
+		hint: __( 'Waiting for review before publishing.' ),
+	},
+	{
+		label: __( 'Private' ),
+		value: 'private',
+		hint: __( 'Only visible to site admins and editors.' ),
+	},
+	{
+		label: __( 'Scheduled' ),
+		value: 'future',
+		hint: __( 'Publish automatically on a chosen date.' ),
+	},
+	{
+		label: __( 'Published' ),
+		value: 'publish',
+		hint: __( 'Visible to everyone.' ),
+	},
+];
+
+export default function PageStatus( {
+	postType,
+	postId,
+	status,
+	password,
+	date,
+} ) {
+	const [ showPassword, setShowPassword ] = useState( !! password );
+
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'bottom-end',
+		} ),
+		[ popoverAnchor ]
+	);
+
+	const saveStatus = async ( {
+		status: newStatus = status,
+		password: newPassword = password,
+		date: newDate = date,
+	} ) => {
+		try {
+			await editEntityRecord( 'postType', postType, postId, {
+				status: newStatus,
+				date: newDate,
+				password: newPassword,
+			} );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while updating the status' );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		}
+	};
+
+	const handleTogglePassword = ( value ) => {
+		setShowPassword( value );
+		if ( ! value ) {
+			saveStatus( { password: '' } );
+		}
+	};
+
+	const handleStatus = ( value ) => {
+		let newDate = date;
+		if ( value === 'publish' ) {
+			if ( new Date( date ) > new Date() ) {
+				newDate = null;
+			}
+		} else if ( value === 'future' ) {
+			if ( ! date || new Date( date ) < new Date() ) {
+				newDate = new Date();
+				newDate.setDate( newDate.getDate() + 7 );
+			}
+		}
+		saveStatus( {
+			status: value,
+			date: newDate,
+		} );
+	};
+
+	return (
+		<HStack className="edit-site-summary-field">
+			<Text className="edit-site-summary-field__label">
+				{ __( 'Status' ) }
+			</Text>
+			<Dropdown
+				contentClassName="edit-site-change-status__content"
+				popoverProps={ popoverProps }
+				focusOnMount
+				ref={ setPopoverAnchor }
+				renderToggle={ ( { onToggle } ) => (
+					<Button
+						className="edit-site-summary-field__trigger"
+						variant="tertiary"
+						onClick={ onToggle }
+					>
+						<StatusLabel
+							status={ password ? 'protected' : status }
+						/>
+					</Button>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<>
+						<InspectorPopoverHeader
+							title={ __( 'Status' ) }
+							onClose={ onClose }
+						/>
+						<VStack spacing={ 5 }>
+							<BaseControl
+								hideLabelFromVision
+								label={ __( 'Status' ) }
+								id={ `edit-site-change-status__status` }
+								className={ 'components-radio-control' }
+							>
+								<VStack spacing={ 3 }>
+									{ STATUS_OPTIONS.map( ( option, index ) => (
+										<div
+											key={ `edit-site-change-status__status-${ index }` }
+											className="components-radio-control__option with-hint"
+										>
+											<input
+												id={ `edit-site-change-status__status-${ index }` }
+												className="components-radio-control__input"
+												type="radio"
+												name={ `edit-site-change-status__status` }
+												value={ option.value }
+												onChange={ ( e ) =>
+													handleStatus(
+														e.target.value
+													)
+												}
+												checked={
+													option.value === status
+												}
+											/>
+											<VStack spacing={ 1 }>
+												<label
+													htmlFor={ `edit-site-change-status__status-${ index }` }
+												>
+													{ option.label }
+												</label>
+												{ option.hint && (
+													<Text variant="muted">
+														{ option.hint }
+													</Text>
+												) }
+											</VStack>
+										</div>
+									) ) }
+								</VStack>
+							</BaseControl>
+							<BaseControl
+								id={ `edit-site-change-status__password` }
+								label={ __( 'Password' ) }
+							>
+								<ToggleControl
+									label={ __(
+										'Hide this page behind a password'
+									) }
+									checked={ showPassword }
+									onChange={ handleTogglePassword }
+								/>
+								{ showPassword && (
+									<TextControl
+										onChange={ ( value ) =>
+											saveStatus( { password: value } )
+										}
+										value={ password }
+										/* eslint-disable jsx-a11y/no-autofocus */
+										autoFocus
+										/* eslint-enable jsx-a11y/no-autofocus */
+										placeholder={ __(
+											'Enter a secure password'
+										) }
+										type="password"
+									/>
+								) }
+							</BaseControl>
+						</VStack>
+					</>
+				) }
+			/>
+		</HStack>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-summary.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-summary.js
new file mode 100644
index 0000000000000..3dce743b298d4
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-summary.js
@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import PageStatus from './page-status';
+import PublishDate from './publish-date';
+
+export default function PageSummary( {
+	status,
+	date,
+	password,
+	postId,
+	postType,
+} ) {
+	return (
+		<VStack>
+			<PageStatus
+				status={ status }
+				date={ date }
+				password={ password }
+				postId={ postId }
+				postType={ postType }
+			/>
+			<PublishDate
+				status={ status }
+				date={ date }
+				postId={ postId }
+				postType={ postType }
+			/>
+		</VStack>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/publish-date.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/publish-date.js
new file mode 100644
index 0000000000000..32cd99cca45b8
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/publish-date.js
@@ -0,0 +1,93 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Dropdown,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { useState, useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+import { __experimentalPublishDateTimePicker as PublishDateTimePicker } from '@wordpress/block-editor';
+import { humanTimeDiff } from '@wordpress/date';
+
+export default function ChangeStatus( { postType, postId, status, date } ) {
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'bottom-end',
+		} ),
+		[ popoverAnchor ]
+	);
+
+	const saveDate = async ( newDate ) => {
+		try {
+			let newStatus = status;
+			if ( status === 'future' && new Date( newDate ) < new Date() ) {
+				newStatus = 'draft';
+			} else if (
+				status === 'publish' &&
+				new Date( newDate ) > new Date()
+			) {
+				newStatus = 'future';
+			}
+			await editEntityRecord( 'postType', postType, postId, {
+				status: newStatus,
+				date: newDate,
+			} );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while updating the status' );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		}
+	};
+
+	const relateToNow = date ? humanTimeDiff( date ) : __( 'Immediately' );
+
+	return (
+		<HStack className="edit-site-summary-field">
+			<Text className="edit-site-summary-field__label">
+				{ __( 'Publish' ) }
+			</Text>
+			<Dropdown
+				contentClassName="edit-site-change-status__content"
+				popoverProps={ popoverProps }
+				focusOnMount
+				ref={ setPopoverAnchor }
+				renderToggle={ ( { onToggle } ) => (
+					<Button
+						className="edit-site-summary-field__trigger"
+						variant="tertiary"
+						onClick={ onToggle }
+					>
+						{ relateToNow }
+					</Button>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<PublishDateTimePicker
+						currentDate={ date }
+						is12Hour
+						onClose={ onClose }
+						onChange={ saveDate }
+					/>
+				) }
+			/>
+		</HStack>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
index cc6deef0703ae..c7c3c0c192d98 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
@@ -14,3 +14,29 @@
 		margin-left: -$grid-unit-15;
 	}
 }
+
+
+.edit-site-change-status__content {
+	.components-popover__content {
+		min-width: 320px;
+		padding: $grid-unit-20;
+	}
+	.components-radio-control__option.with-hint {
+		display: flex;
+		gap: $grid-unit-10;
+		align-items: center;
+	}
+}
+
+.edit-site-summary-field {
+	.components-dropdown {
+		flex-grow: 1;
+	}
+	.edit-site-summary-field__trigger {
+		width: 100%;
+	}
+	.edit-site-summary-field__label {
+		width: 30%;
+	}
+}
+
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
index a8dd39bf880bc..13aba13aacbec 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
@@ -64,14 +64,16 @@ export default function StatusLabel( { status, date, short } ) {
 				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: <time>%s</time>' ),
-					formattedDate
-				),
-				{ time: <time dateTime={ date } /> }
-			);
+			statusLabel = date
+				? createInterpolateElement(
+						sprintf(
+							/* translators: %s: is the formatted date and time on which the post is scheduled to be published. */
+							__( 'Scheduled: <time>%s</time>' ),
+							formattedDate
+						),
+						{ time: <time dateTime={ date } /> }
+				  )
+				: __( 'Scheduled' );
 			break;
 		case 'draft':
 			statusLabel = __( 'Draft' );

From 710e36c2e648d63400c7538a435ce8a91d0a331d Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Thu, 15 Jun 2023 15:16:45 +1000
Subject: [PATCH 13/37] default publish not draft

---
 .../components/sidebar-edit-mode/page-panels/publish-date.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/publish-date.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/publish-date.js
index 32cd99cca45b8..1bce555036823 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/publish-date.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/publish-date.js
@@ -35,7 +35,7 @@ export default function ChangeStatus( { postType, postId, status, date } ) {
 		try {
 			let newStatus = status;
 			if ( status === 'future' && new Date( newDate ) < new Date() ) {
-				newStatus = 'draft';
+				newStatus = 'publish';
 			} else if (
 				status === 'publish' &&
 				new Date( newDate ) > new Date()

From 01b0a076f7e1df53501ea96bc07b5ce057e0544a Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Thu, 15 Jun 2023 16:41:06 +1000
Subject: [PATCH 14/37] remove style import

---
 packages/edit-site/src/style.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 0ebad6f548656..e921cb70106f8 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -4,7 +4,6 @@
 @import "./components/block-editor/style.scss";
 @import "./components/canvas-spinner/style.scss";
 @import "./components/code-editor/style.scss";
-@import "./components/change-status/style.scss";
 @import "./components/global-styles/style.scss";
 @import "./components/global-styles/screen-revisions/style.scss";
 @import "./components/header-edit-mode/style.scss";

From 7dec51cc5df911dc65894df52265136114f83cd0 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Fri, 9 Jun 2023 17:05:14 +1000
Subject: [PATCH 15/37] add required inputs

---
 .../page-details.js                           |  14 ++
 .../publish-date.js                           |  75 +++++++++++
 .../status-label.js                           | 127 +++++++-----------
 3 files changed, 141 insertions(+), 75 deletions(-)
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
index 996e1c9377314..7bb7bb00b0ab5 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
@@ -17,6 +17,7 @@ import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
  * Internal dependencies
  */
 import StatusLabel from './status-label';
+import PublishDate from './publish-date';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
@@ -33,6 +34,19 @@ function getPageDetails( page ) {
 			label: __( 'Status' ),
 			value: (
 				<StatusLabel
+					postId={ page.id }
+					postType={ page.type }
+					status={ page?.password ? 'protected' : page.status }
+					date={ page?.date }
+				/>
+			),
+		},
+		{
+			label: __( 'Publish on' ),
+			value: (
+				<PublishDate
+					postId={ page.id }
+					postType={ page.type }
 					status={ page?.password ? 'protected' : page.status }
 					date={ page?.date }
 				/>
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js
new file mode 100644
index 0000000000000..2ad25a4dd5c99
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js
@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { dateI18n, getDate, getSettings } from '@wordpress/date';
+import { createInterpolateElement, useState } from '@wordpress/element';
+import { DateTimePicker, Button, Dropdown } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+
+export default function StatusLabel( { date: currentDate, postId, postType } ) {
+	const [ date, setDate ] = useState( currentDate );
+
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	async function saveDate( newDate ) {
+		setDate( newDate );
+		try {
+			await editEntityRecord( 'postType', postType, postId, {
+				date,
+			} );
+		} catch ( error ) {
+			setDate( currentDate );
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while updating the status' );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		}
+	}
+
+	const formattedDate = dateI18n(
+		getSettings().formats.date,
+		getDate( date )
+	);
+
+	const 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>' ),
+			formattedDate
+		),
+		{ time: <time dateTime={ date } /> }
+	);
+
+	return (
+		<div className="edit-site-sidebar-navigation-screen-page__status">
+			<Dropdown
+				className="my-container-class-name"
+				contentClassName="my-dropdown-content-classname"
+				popoverProps={ { placement: 'bottom-start' } }
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<Button
+						variant="primary"
+						onClick={ onToggle }
+						aria-expanded={ isOpen }
+					>
+						{ statusLabel }
+					</Button>
+				) }
+				renderContent={ () => (
+					<DateTimePicker
+						currentDate={ date }
+						onChange={ saveDate }
+					/>
+				) }
+			/>
+		</div>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
index 208d8adc59ab9..c329f87e81800 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
@@ -6,84 +6,40 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
-import { dateI18n, getDate, getSettings, humanTimeDiff } from '@wordpress/date';
-import { createInterpolateElement } from '@wordpress/element';
-import { Path, SVG } from '@wordpress/primitives';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { SelectControl } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
 
-const publishedIcon = (
-	<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-		<Path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm-1.067-5.6 4.2-5.667.8.6-4.8 6.467-3-2.267.6-.8 2.2 1.667Z"
-		/>
-	</SVG>
-);
+export default function StatusLabel( {
+	status: currentStatus,
+	postId,
+	postType,
+} ) {
+	const [ status, setStatus ] = useState( currentStatus );
 
-const draftIcon = (
-	<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-		<Path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M14.5 8a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8 4a4 4 0 0 0 0-8v8Z"
-		/>
-	</SVG>
-);
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
 
-const pendingIcon = (
-	<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-		<Path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M14.5 8a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z"
-		/>
-	</SVG>
-);
+	async function saveStatus( newStatus ) {
+		setStatus( newStatus );
+		try {
+			await editEntityRecord( 'postType', postType, postId, {
+				status,
+			} );
+		} catch ( error ) {
+			setStatus( currentStatus );
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while updating the status' );
 
-export default function StatusLabel( { status, date } ) {
-	const relateToNow = humanTimeDiff( date );
-	let statusLabel = '';
-	let statusIcon = pendingIcon;
-	switch ( status ) {
-		case 'publish':
-			statusLabel = createInterpolateElement(
-				sprintf(
-					/* translators: %s: is the relative time when the post was published. */
-					__( 'Published <time>%s</time>' ),
-					relateToNow
-				),
-				{ time: <time dateTime={ date } /> }
-			);
-			statusIcon = publishedIcon;
-			break;
-		case 'future':
-			const formattedDate = dateI18n(
-				getSettings().formats.date,
-				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>' ),
-					formattedDate
-				),
-				{ time: <time dateTime={ date } /> }
-			);
-			break;
-		case 'draft':
-			statusLabel = __( 'Draft' );
-			statusIcon = draftIcon;
-			break;
-		case 'pending':
-			statusLabel = __( 'Pending' );
-			break;
-		case 'private':
-			statusLabel = __( 'Private' );
-			break;
-		case 'protected':
-			statusLabel = __( 'Password protected' );
-			break;
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		}
 	}
 
 	return (
@@ -95,7 +51,28 @@ export default function StatusLabel( { status, date } ) {
 				}
 			) }
 		>
-			{ statusIcon } { statusLabel }
+			<SelectControl
+				onChange={ saveStatus }
+				value={ status }
+				options={ [
+					{
+						label: 'Published',
+						value: 'publish',
+					},
+					{
+						label: 'Draft',
+						value: 'draft',
+					},
+					{
+						label: 'Scheduled',
+						value: 'future',
+					},
+					{
+						label: 'Pending',
+						value: 'pending',
+					},
+				] }
+			/>
 		</div>
 	);
 }

From 368cdef030f0ac3e1d9189edff148384d2fe3bb2 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Mon, 12 Jun 2023 12:06:53 +1000
Subject: [PATCH 16/37] schedule date

---
 .../components/sidebar-navigation-screen-page/publish-date.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js
index 2ad25a4dd5c99..d99d58cb4a91c 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js
@@ -42,7 +42,7 @@ export default function StatusLabel( { date: currentDate, postId, postType } ) {
 	const 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>' ),
+			__( '<time>%s</time>' ),
 			formattedDate
 		),
 		{ time: <time dateTime={ date } /> }

From 12554e300e4554959ed6cc661ade440bfdfdf2a9 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Mon, 12 Jun 2023 16:41:59 +1000
Subject: [PATCH 17/37] add password and fix a few things

---
 .../page-details.js                           | 12 ++++
 .../password.js                               | 60 +++++++++++++++++++
 .../publish-date.js                           |  2 +-
 .../status-label.js                           |  6 +-
 4 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-page/password.js

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
index 7bb7bb00b0ab5..57d761852d0a5 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
@@ -18,6 +18,7 @@ import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
  */
 import StatusLabel from './status-label';
 import PublishDate from './publish-date';
+import Password from './password';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
@@ -52,6 +53,17 @@ function getPageDetails( page ) {
 				/>
 			),
 		},
+		{
+			label: __( 'Visibility' ),
+			value: (
+				<Password
+					postId={ page.id }
+					postType={ page.type }
+					status={ page.status }
+					password={ page.password }
+				/>
+			),
+		},
 		{
 			label: __( 'Slug' ),
 			value: <Truncate numberOfLines={ 1 }>{ page.slug }</Truncate>,
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/password.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/password.js
new file mode 100644
index 0000000000000..b91ad94234652
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/password.js
@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { ToggleControl, TextControl } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+
+export default function Password( {
+	password: currentPassword,
+	postId,
+	postType,
+} ) {
+	const [ showPassword, setShowPassword ] = useState( !! currentPassword );
+	const [ password, setPassword ] = useState( currentPassword );
+
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	async function savePassword( newPassword ) {
+		setPassword( newPassword );
+		try {
+			await editEntityRecord( 'postType', postType, postId, {
+				password: newPassword,
+			} );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while updating the password' );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		}
+	}
+
+	const handleTogglePassword = ( value ) => {
+		setShowPassword( value );
+		if ( ! value ) {
+			savePassword( '' );
+		}
+	};
+
+	return (
+		<div className="edit-site-sidebar-navigation-screen-page__status">
+			<ToggleControl
+				label="Hide behind a password"
+				checked={ showPassword }
+				type="password"
+				onChange={ handleTogglePassword }
+			/>
+			{ showPassword && (
+				<TextControl onChange={ savePassword } value={ password } />
+			) }
+		</div>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js
index d99d58cb4a91c..c04f5b2058199 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js
@@ -19,7 +19,7 @@ export default function StatusLabel( { date: currentDate, postId, postType } ) {
 		setDate( newDate );
 		try {
 			await editEntityRecord( 'postType', postType, postId, {
-				date,
+				date: newDate,
 			} );
 		} catch ( error ) {
 			setDate( currentDate );
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
index c329f87e81800..34c5a022aaf60 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
@@ -27,7 +27,7 @@ export default function StatusLabel( {
 		setStatus( newStatus );
 		try {
 			await editEntityRecord( 'postType', postType, postId, {
-				status,
+				status: newStatus,
 			} );
 		} catch ( error ) {
 			setStatus( currentStatus );
@@ -71,6 +71,10 @@ export default function StatusLabel( {
 						label: 'Pending',
 						value: 'pending',
 					},
+					{
+						label: 'Private',
+						value: 'private',
+					},
 				] }
 			/>
 		</div>

From 01f58b3b6b6f67e0b1332cf858b270dbe05ec267 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Tue, 13 Jun 2023 12:22:41 +1000
Subject: [PATCH 18/37] re-add status modal

---
 .../src/components/change-status/index.js     | 180 ++++++++++++++++++
 .../src/components/change-status/style.scss   |  69 +++++++
 .../sidebar-navigation-screen-page/index.js   |  16 +-
 packages/edit-site/src/style.scss             |   1 +
 4 files changed, 260 insertions(+), 6 deletions(-)
 create mode 100644 packages/edit-site/src/components/change-status/index.js
 create mode 100644 packages/edit-site/src/components/change-status/style.scss

diff --git a/packages/edit-site/src/components/change-status/index.js b/packages/edit-site/src/components/change-status/index.js
new file mode 100644
index 0000000000000..a65c2d7aee016
--- /dev/null
+++ b/packages/edit-site/src/components/change-status/index.js
@@ -0,0 +1,180 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Modal,
+	BaseControl,
+	CustomSelectControl,
+	ToggleControl,
+	DateTimePicker,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	TextControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+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';
+
+const STATUS_OPTIONS = [
+	{
+		name: __( 'Published' ),
+		value: 'publish',
+		key: 'publish',
+	},
+	{
+		name: __( 'Draft' ),
+		value: 'draft',
+		key: 'draft',
+	},
+	{
+		name: __( 'Pending' ),
+		value: 'pending',
+		key: 'pending',
+		__experimentalHint: __( 'Awaiting admin review' ),
+	},
+	{
+		name: __( 'Private' ),
+		value: 'private',
+		key: 'private',
+		__experimentalHint: __(
+			'Published, but only visible to admins and site editors'
+		),
+	},
+	{
+		name: __( 'Scheduled' ),
+		value: 'future',
+		key: 'future',
+		__experimentalHint: __( 'Publish automatically on a chosen date' ),
+	},
+];
+
+export default function ChangeStatus( { post } ) {
+	const [ isCreatingPage, setIsCreatingPage ] = useState( false );
+	const [ status, setStatus ] = useState( post.status );
+	const [ date, setDate ] = useState( post.date );
+	const [ showPassword, setShowPassword ] = useState( !! post.password );
+	const [ password, setPassword ] = useState( post.password );
+	const [ isOpen, setOpen ] = useState( false );
+	const openModal = () => setOpen( true );
+	const closeModal = () => setOpen( false );
+
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice, createSuccessNotice } =
+		useDispatch( noticesStore );
+
+	async function saveStatus( event ) {
+		event.preventDefault();
+
+		if ( isCreatingPage ) {
+			return;
+		}
+		setIsCreatingPage( true );
+		try {
+			await editEntityRecord( 'postType', post.type, post.id, {
+				status,
+				date,
+				password,
+			} );
+
+			createSuccessNotice( __( 'Updated status successfully' ), {
+				type: 'snackbar',
+			} );
+			setOpen( false );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while updating the status' );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		} finally {
+			setIsCreatingPage( false );
+		}
+	}
+
+	const handleTogglePassword = ( value ) => {
+		setShowPassword( value );
+		if ( ! value ) {
+			setPassword( '' );
+		}
+	};
+
+	return (
+		<>
+			<Button variant="secondary" onClick={ openModal }>
+				Change status
+			</Button>
+			{ isOpen && (
+				<Modal
+					title="Update status"
+					onRequestClose={ closeModal }
+					className="edit-site-change-status"
+				>
+					<VStack
+						className="edit-site-change-status__content"
+						spacing={ 5 }
+					>
+						<CustomSelectControl
+							value={
+								STATUS_OPTIONS.find(
+									( option ) => option.value === status
+								) || STATUS_OPTIONS[ 0 ]
+							}
+							label={ __( 'Status' ) }
+							options={ STATUS_OPTIONS }
+							onChange={ ( { selectedItem } ) => {
+								setStatus( selectedItem.value );
+							} }
+						/>
+						{ status === 'future' && (
+							<div className="edit-site-change-status__date-time-picker">
+								<DateTimePicker
+									className="components-datetime__time__one-row"
+									currentDate={ date }
+									onChange={ setDate }
+								/>
+							</div>
+						) }
+						<BaseControl
+							id={ `edit-site-change-status__password` }
+							label={ __( 'Password' ) }
+						>
+							<ToggleControl
+								label={ __( 'Hide behind a password' ) }
+								checked={ showPassword }
+								onChange={ handleTogglePassword }
+							/>
+							{ showPassword && (
+								<TextControl
+									onChange={ setPassword }
+									value={ password }
+									placeholder={ __( 'Enter your password' ) }
+									type="password"
+									help={ __(
+										'Anyone with the password will be able to access this page'
+									) }
+								/>
+							) }
+						</BaseControl>
+					</VStack>
+					<HStack
+						className="edit-site-change-status__footer"
+						alignment="right"
+					>
+						<Button variant="tertiary" onClick={ closeModal }>
+							Cancel
+						</Button>
+						<Button variant="primary" onClick={ saveStatus }>
+							Done
+						</Button>
+					</HStack>
+				</Modal>
+			) }
+		</>
+	);
+}
diff --git a/packages/edit-site/src/components/change-status/style.scss b/packages/edit-site/src/components/change-status/style.scss
new file mode 100644
index 0000000000000..ccfeb72bd700d
--- /dev/null
+++ b/packages/edit-site/src/components/change-status/style.scss
@@ -0,0 +1,69 @@
+.edit-site-change-status {
+	min-width: 480px;
+	min-height: 400px;
+	.components-modal__content {
+		padding: 0;
+		.components-modal__header + div {
+			display: flex;
+			flex-direction: column;
+			overflow: hidden;
+			height: 100%;
+
+		}
+	}
+	.components-custom-select-control__item {
+		&.has-hint {
+			grid-template-columns: auto 30px;
+			line-height: $default-line-height;
+			margin-bottom: 0;
+		}
+
+		.components-custom-select-control__item-hint {
+			grid-row: 2;
+			text-align: left;
+		}
+	}
+	.edit-site-change-status__content {
+		flex-grow: 1;
+		justify-content: flex-start;
+		overflow: auto;
+		padding: 0 $grid-unit-40 $grid-unit-40;
+		> div {
+			flex-shrink: 0;
+		}
+	}
+	.edit-site-change-status__footer {
+		flex-grow: 0;
+		padding: $grid-unit-20 $grid-unit-40 $grid-unit-20;
+		border-top: 1px solid $gray-100;
+	}
+}
+
+.edit-site-change-status__date-time-picker {
+	border-radius: $radius-block-ui;
+	border: 1px solid $gray-100;
+	padding: $grid-unit-20;
+	.components-datetime {
+		gap: $grid-unit-05;
+	}
+	.components-datetime__date {
+		margin-bottom: $grid-unit-10;
+	}
+	.components-datetime__time {
+		display: flex;
+		gap: $grid-unit-10;
+
+		fieldset:first-child {
+			.components-datetime__time-wrapper {
+				flex-direction: column;
+				align-items: flex-start;
+				> .components-flex-item {
+					display: none;
+				}
+			}
+		}
+		fieldset:last-child {
+			flex-grow: 1;
+		}
+	}
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
index 897c647cddae4..4951e35d03763 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
@@ -34,6 +34,7 @@ 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();
@@ -95,12 +96,15 @@ export default function SidebarNavigationScreenPage() {
 				</>
 			}
 			meta={
-				<ExternalLink
-					className="edit-site-sidebar-navigation-screen__page-link"
-					href={ record.link }
-				>
-					{ record.link.replace( /^(https?:\/\/)?/, '' ) }
-				</ExternalLink>
+				<VStack>
+					<ExternalLink
+						className="edit-site-sidebar-navigation-screen__page-link"
+						href={ record.link }
+					>
+						{ record.link.replace( /^(https?:\/\/)?/, '' ) }
+					</ExternalLink>
+					<ChangeStatus post={ record } />
+				</VStack>
 			}
 			content={
 				<>
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 6dde831d7273f..156bd5e2d958d 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -4,6 +4,7 @@
 @import "./components/block-editor/style.scss";
 @import "./components/canvas-spinner/style.scss";
 @import "./components/code-editor/style.scss";
+@import "./components/change-status/style.scss";
 @import "./components/global-styles/style.scss";
 @import "./components/global-styles/screen-revisions/style.scss";
 @import "./components/header-edit-mode/style.scss";

From 94031ebc4ed1880dc0838d159daf875acb5d4c8b Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Tue, 13 Jun 2023 13:12:57 +1000
Subject: [PATCH 19/37] update change status modal

---
 .../src/components/change-status/index.js     | 111 +++++++++++-------
 .../src/components/change-status/style.scss   |   5 +
 2 files changed, 75 insertions(+), 41 deletions(-)

diff --git a/packages/edit-site/src/components/change-status/index.js b/packages/edit-site/src/components/change-status/index.js
index a65c2d7aee016..579e80465351f 100644
--- a/packages/edit-site/src/components/change-status/index.js
+++ b/packages/edit-site/src/components/change-status/index.js
@@ -5,9 +5,9 @@ import {
 	Button,
 	Modal,
 	BaseControl,
-	CustomSelectControl,
 	ToggleControl,
 	DateTimePicker,
+	__experimentalText as Text,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	TextControl,
@@ -20,34 +20,29 @@ import { store as noticesStore } from '@wordpress/notices';
 
 const STATUS_OPTIONS = [
 	{
-		name: __( 'Published' ),
-		value: 'publish',
-		key: 'publish',
+		label: __( 'Draft' ),
+		value: 'draft',
+		hint: __( 'Not ready to publish' ),
 	},
 	{
-		name: __( 'Draft' ),
-		value: 'draft',
-		key: 'draft',
+		label: __( 'Private' ),
+		value: 'private',
+		hint: __( 'Published, but only visible to admins and site editors' ),
 	},
 	{
-		name: __( 'Pending' ),
+		label: __( 'Pending' ),
 		value: 'pending',
-		key: 'pending',
-		__experimentalHint: __( 'Awaiting admin review' ),
+		hint: __( 'Awaiting admin review' ),
 	},
 	{
-		name: __( 'Private' ),
-		value: 'private',
-		key: 'private',
-		__experimentalHint: __(
-			'Published, but only visible to admins and site editors'
-		),
+		label: __( 'Scheduled' ),
+		value: 'future',
+		hint: __( 'Publish automatically on a chosen date' ),
 	},
 	{
-		name: __( 'Scheduled' ),
-		value: 'future',
-		key: 'future',
-		__experimentalHint: __( 'Publish automatically on a chosen date' ),
+		label: __( 'Published' ),
+		value: 'publish',
+		hint: __( 'Anyone with the url can access' ),
 	},
 ];
 
@@ -79,9 +74,12 @@ export default function ChangeStatus( { post } ) {
 				password,
 			} );
 
-			createSuccessNotice( __( 'Updated status successfully' ), {
-				type: 'snackbar',
-			} );
+			createSuccessNotice(
+				__( 'Save your changes for your status to take affect' ),
+				{
+					type: 'snackbar',
+				}
+			);
 			setOpen( false );
 		} catch ( error ) {
 			const errorMessage =
@@ -119,18 +117,45 @@ export default function ChangeStatus( { post } ) {
 						className="edit-site-change-status__content"
 						spacing={ 5 }
 					>
-						<CustomSelectControl
-							value={
-								STATUS_OPTIONS.find(
-									( option ) => option.value === status
-								) || STATUS_OPTIONS[ 0 ]
-							}
+						<BaseControl
+							hideLabelFromVision
 							label={ __( 'Status' ) }
-							options={ STATUS_OPTIONS }
-							onChange={ ( { selectedItem } ) => {
-								setStatus( selectedItem.value );
-							} }
-						/>
+							id={ `edit-site-change-status__status` }
+							className={ 'components-radio-control' }
+						>
+							<VStack spacing={ 3 }>
+								{ STATUS_OPTIONS.map( ( option, index ) => (
+									<div
+										key={ `edit-site-change-status__status-${ index }` }
+										className="components-radio-control__option with-hint"
+									>
+										<input
+											id={ `edit-site-change-status__status-${ index }` }
+											className="components-radio-control__input"
+											type="radio"
+											name={ `edit-site-change-status__status` }
+											value={ option.value }
+											onChange={ ( e ) =>
+												setStatus( e.target.value )
+											}
+											checked={ option.value === status }
+										/>
+										<VStack spacing={ 1 }>
+											<label
+												htmlFor={ `edit-site-change-status__status-${ index }` }
+											>
+												{ option.label }
+											</label>
+											{ option.hint && (
+												<Text variant="muted">
+													{ option.hint }
+												</Text>
+											) }
+										</VStack>
+									</div>
+								) ) }
+							</VStack>
+						</BaseControl>
 						{ status === 'future' && (
 							<div className="edit-site-change-status__date-time-picker">
 								<DateTimePicker
@@ -145,7 +170,9 @@ export default function ChangeStatus( { post } ) {
 							label={ __( 'Password' ) }
 						>
 							<ToggleControl
-								label={ __( 'Hide behind a password' ) }
+								label={ __(
+									'Hide this page behind a password'
+								) }
 								checked={ showPassword }
 								onChange={ handleTogglePassword }
 							/>
@@ -153,11 +180,13 @@ export default function ChangeStatus( { post } ) {
 								<TextControl
 									onChange={ setPassword }
 									value={ password }
-									placeholder={ __( 'Enter your password' ) }
-									type="password"
-									help={ __(
-										'Anyone with the password will be able to access this page'
+									/* eslint-disable jsx-a11y/no-autofocus */
+									autoFocus
+									/* eslint-enable jsx-a11y/no-autofocus */
+									placeholder={ __(
+										'Enter a secure password'
 									) }
+									type="password"
 								/>
 							) }
 						</BaseControl>
@@ -167,10 +196,10 @@ export default function ChangeStatus( { post } ) {
 						alignment="right"
 					>
 						<Button variant="tertiary" onClick={ closeModal }>
-							Cancel
+							{ __( 'Cancel' ) }
 						</Button>
 						<Button variant="primary" onClick={ saveStatus }>
-							Done
+							{ __( 'Done' ) }
 						</Button>
 					</HStack>
 				</Modal>
diff --git a/packages/edit-site/src/components/change-status/style.scss b/packages/edit-site/src/components/change-status/style.scss
index ccfeb72bd700d..f4112a32e75f8 100644
--- a/packages/edit-site/src/components/change-status/style.scss
+++ b/packages/edit-site/src/components/change-status/style.scss
@@ -1,6 +1,11 @@
 .edit-site-change-status {
 	min-width: 480px;
 	min-height: 400px;
+	.components-radio-control__option.with-hint {
+		display: flex;
+		gap: $grid-unit-10;
+		align-items: center;
+	}
 	.components-modal__content {
 		padding: 0;
 		.components-modal__header + div {

From 658253801a53eaa23ebb8062fbe709ceeb985ef0 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Tue, 13 Jun 2023 13:16:55 +1000
Subject: [PATCH 20/37] revert in sidebar status change

---
 .../page-details.js                           |  26 ----
 .../password.js                               |  60 --------
 .../publish-date.js                           |  75 ----------
 .../status-label.js                           | 131 ++++++++++--------
 .../sidebar-navigation-screen-page/style.scss |   1 -
 5 files changed, 75 insertions(+), 218 deletions(-)
 delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-page/password.js
 delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
index 57d761852d0a5..996e1c9377314 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
@@ -17,8 +17,6 @@ import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
  * Internal dependencies
  */
 import StatusLabel from './status-label';
-import PublishDate from './publish-date';
-import Password from './password';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
@@ -35,35 +33,11 @@ function getPageDetails( page ) {
 			label: __( 'Status' ),
 			value: (
 				<StatusLabel
-					postId={ page.id }
-					postType={ page.type }
 					status={ page?.password ? 'protected' : page.status }
 					date={ page?.date }
 				/>
 			),
 		},
-		{
-			label: __( 'Publish on' ),
-			value: (
-				<PublishDate
-					postId={ page.id }
-					postType={ page.type }
-					status={ page?.password ? 'protected' : page.status }
-					date={ page?.date }
-				/>
-			),
-		},
-		{
-			label: __( 'Visibility' ),
-			value: (
-				<Password
-					postId={ page.id }
-					postType={ page.type }
-					status={ page.status }
-					password={ page.password }
-				/>
-			),
-		},
 		{
 			label: __( 'Slug' ),
 			value: <Truncate numberOfLines={ 1 }>{ page.slug }</Truncate>,
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/password.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/password.js
deleted file mode 100644
index b91ad94234652..0000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/password.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
-import { ToggleControl, TextControl } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as noticesStore } from '@wordpress/notices';
-
-export default function Password( {
-	password: currentPassword,
-	postId,
-	postType,
-} ) {
-	const [ showPassword, setShowPassword ] = useState( !! currentPassword );
-	const [ password, setPassword ] = useState( currentPassword );
-
-	const { editEntityRecord } = useDispatch( coreStore );
-	const { createErrorNotice } = useDispatch( noticesStore );
-
-	async function savePassword( newPassword ) {
-		setPassword( newPassword );
-		try {
-			await editEntityRecord( 'postType', postType, postId, {
-				password: newPassword,
-			} );
-		} catch ( error ) {
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __( 'An error occurred while updating the password' );
-
-			createErrorNotice( errorMessage, {
-				type: 'snackbar',
-			} );
-		}
-	}
-
-	const handleTogglePassword = ( value ) => {
-		setShowPassword( value );
-		if ( ! value ) {
-			savePassword( '' );
-		}
-	};
-
-	return (
-		<div className="edit-site-sidebar-navigation-screen-page__status">
-			<ToggleControl
-				label="Hide behind a password"
-				checked={ showPassword }
-				type="password"
-				onChange={ handleTogglePassword }
-			/>
-			{ showPassword && (
-				<TextControl onChange={ savePassword } value={ password } />
-			) }
-		</div>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js
deleted file mode 100644
index c04f5b2058199..0000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/publish-date.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { dateI18n, getDate, getSettings } from '@wordpress/date';
-import { createInterpolateElement, useState } from '@wordpress/element';
-import { DateTimePicker, Button, Dropdown } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as noticesStore } from '@wordpress/notices';
-
-export default function StatusLabel( { date: currentDate, postId, postType } ) {
-	const [ date, setDate ] = useState( currentDate );
-
-	const { editEntityRecord } = useDispatch( coreStore );
-	const { createErrorNotice } = useDispatch( noticesStore );
-
-	async function saveDate( newDate ) {
-		setDate( newDate );
-		try {
-			await editEntityRecord( 'postType', postType, postId, {
-				date: newDate,
-			} );
-		} catch ( error ) {
-			setDate( currentDate );
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __( 'An error occurred while updating the status' );
-
-			createErrorNotice( errorMessage, {
-				type: 'snackbar',
-			} );
-		}
-	}
-
-	const formattedDate = dateI18n(
-		getSettings().formats.date,
-		getDate( date )
-	);
-
-	const statusLabel = createInterpolateElement(
-		sprintf(
-			/* translators: %s: is the formatted date and time on which the post is scheduled to be published. */
-			__( '<time>%s</time>' ),
-			formattedDate
-		),
-		{ time: <time dateTime={ date } /> }
-	);
-
-	return (
-		<div className="edit-site-sidebar-navigation-screen-page__status">
-			<Dropdown
-				className="my-container-class-name"
-				contentClassName="my-dropdown-content-classname"
-				popoverProps={ { placement: 'bottom-start' } }
-				renderToggle={ ( { isOpen, onToggle } ) => (
-					<Button
-						variant="primary"
-						onClick={ onToggle }
-						aria-expanded={ isOpen }
-					>
-						{ statusLabel }
-					</Button>
-				) }
-				renderContent={ () => (
-					<DateTimePicker
-						currentDate={ date }
-						onChange={ saveDate }
-					/>
-				) }
-			/>
-		</div>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
index 34c5a022aaf60..208d8adc59ab9 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
@@ -6,40 +6,84 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
-import { SelectControl } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as noticesStore } from '@wordpress/notices';
+import { __, sprintf } from '@wordpress/i18n';
+import { dateI18n, getDate, getSettings, humanTimeDiff } from '@wordpress/date';
+import { createInterpolateElement } from '@wordpress/element';
+import { Path, SVG } from '@wordpress/primitives';
 
-export default function StatusLabel( {
-	status: currentStatus,
-	postId,
-	postType,
-} ) {
-	const [ status, setStatus ] = useState( currentStatus );
+const publishedIcon = (
+	<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm-1.067-5.6 4.2-5.667.8.6-4.8 6.467-3-2.267.6-.8 2.2 1.667Z"
+		/>
+	</SVG>
+);
 
-	const { editEntityRecord } = useDispatch( coreStore );
-	const { createErrorNotice } = useDispatch( noticesStore );
+const draftIcon = (
+	<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M14.5 8a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8 4a4 4 0 0 0 0-8v8Z"
+		/>
+	</SVG>
+);
 
-	async function saveStatus( newStatus ) {
-		setStatus( newStatus );
-		try {
-			await editEntityRecord( 'postType', postType, postId, {
-				status: newStatus,
-			} );
-		} catch ( error ) {
-			setStatus( currentStatus );
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __( 'An error occurred while updating the status' );
+const pendingIcon = (
+	<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M14.5 8a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z"
+		/>
+	</SVG>
+);
 
-			createErrorNotice( errorMessage, {
-				type: 'snackbar',
-			} );
-		}
+export default function StatusLabel( { status, date } ) {
+	const relateToNow = humanTimeDiff( date );
+	let statusLabel = '';
+	let statusIcon = pendingIcon;
+	switch ( status ) {
+		case 'publish':
+			statusLabel = createInterpolateElement(
+				sprintf(
+					/* translators: %s: is the relative time when the post was published. */
+					__( 'Published <time>%s</time>' ),
+					relateToNow
+				),
+				{ time: <time dateTime={ date } /> }
+			);
+			statusIcon = publishedIcon;
+			break;
+		case 'future':
+			const formattedDate = dateI18n(
+				getSettings().formats.date,
+				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>' ),
+					formattedDate
+				),
+				{ time: <time dateTime={ date } /> }
+			);
+			break;
+		case 'draft':
+			statusLabel = __( 'Draft' );
+			statusIcon = draftIcon;
+			break;
+		case 'pending':
+			statusLabel = __( 'Pending' );
+			break;
+		case 'private':
+			statusLabel = __( 'Private' );
+			break;
+		case 'protected':
+			statusLabel = __( 'Password protected' );
+			break;
 	}
 
 	return (
@@ -51,32 +95,7 @@ export default function StatusLabel( {
 				}
 			) }
 		>
-			<SelectControl
-				onChange={ saveStatus }
-				value={ status }
-				options={ [
-					{
-						label: 'Published',
-						value: 'publish',
-					},
-					{
-						label: 'Draft',
-						value: 'draft',
-					},
-					{
-						label: 'Scheduled',
-						value: 'future',
-					},
-					{
-						label: 'Pending',
-						value: 'pending',
-					},
-					{
-						label: 'Private',
-						value: 'private',
-					},
-				] }
-			/>
+			{ statusIcon } { statusLabel }
 		</div>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss
index c58e9f0939246..525d028f6fd29 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss
@@ -77,4 +77,3 @@
 		color: $gray-200;
 	}
 }
-

From 2c05b561ef63a82203398cccb60ab1f44bd04bf0 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Tue, 13 Jun 2023 15:33:09 +1000
Subject: [PATCH 21/37] refine a few status details

---
 .../src/components/change-status/index.js     | 35 +++++++---
 .../src/components/change-status/style.scss   |  4 +-
 .../sidebar-edit-mode/page-panels/index.js    | 68 +++++++++++++------
 .../sidebar-edit-mode/page-panels/style.scss  |  6 ++
 .../sidebar-navigation-screen-page/index.js   | 16 ++---
 .../page-details.js                           |  1 +
 .../status-label.js                           |  8 +--
 7 files changed, 91 insertions(+), 47 deletions(-)

diff --git a/packages/edit-site/src/components/change-status/index.js b/packages/edit-site/src/components/change-status/index.js
index 579e80465351f..efbf963b10c73 100644
--- a/packages/edit-site/src/components/change-status/index.js
+++ b/packages/edit-site/src/components/change-status/index.js
@@ -17,6 +17,10 @@ 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 = [
 	{
@@ -24,6 +28,11 @@ const STATUS_OPTIONS = [
 		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>
diff --git a/packages/edit-site/src/components/change-status/style.scss b/packages/edit-site/src/components/change-status/style.scss
index f4112a32e75f8..958b9dd1ad2b0 100644
--- a/packages/edit-site/src/components/change-status/style.scss
+++ b/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;
 				}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js
index bcf81a7aa7d75..c6f30156bb255 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js
+++ b/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' ) }>
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
index 58178303e48e5..cc6deef0703ae 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
+++ b/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;
+	}
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
index 4951e35d03763..897c647cddae4 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
+++ b/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={
 				<>
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
index 996e1c9377314..f01b7970f1996 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js
+++ b/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
 				/>
 			),
 		},
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
index 208d8adc59ab9..d451e08916584 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
+++ b/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 } /> }

From 41e15e9b4c9d0a3979d17a4444c366785fc68a41 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Wed, 14 Jun 2023 15:00:34 +1000
Subject: [PATCH 22/37] fix merge issues

---
 .../src/components/change-status/index.js     | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/edit-site/src/components/change-status/index.js b/packages/edit-site/src/components/change-status/index.js
index efbf963b10c73..5c399669d46d4 100644
--- a/packages/edit-site/src/components/change-status/index.js
+++ b/packages/edit-site/src/components/change-status/index.js
@@ -50,12 +50,18 @@ const STATUS_OPTIONS = [
 	},
 ];
 
-export default function ChangeStatus( { post } ) {
+export default function ChangeStatus( {
+	postType,
+	postId,
+	postStatus: initialStatus,
+	password: initialPassword,
+	date: initialDate,
+} ) {
 	const [ isCreatingPage, setIsCreatingPage ] = useState( false );
-	const [ status, setStatus ] = useState( post.status );
-	const [ date, setDate ] = useState( post.date );
-	const [ showPassword, setShowPassword ] = useState( !! post.password );
-	const [ password, setPassword ] = useState( post.password );
+	const [ status, setStatus ] = useState( initialStatus );
+	const [ date, setDate ] = useState( initialDate );
+	const [ showPassword, setShowPassword ] = useState( !! initialPassword );
+	const [ password, setPassword ] = useState( initialPassword );
 	const [ isOpen, setOpen ] = useState( false );
 	const openModal = () => setOpen( true );
 	const closeModal = () => setOpen( false );
@@ -72,7 +78,7 @@ export default function ChangeStatus( { post } ) {
 		}
 		setIsCreatingPage( true );
 		try {
-			await editEntityRecord( 'postType', post.type, post.id, {
+			await editEntityRecord( 'postType', postType, postId, {
 				status,
 				date,
 				password,
@@ -121,8 +127,8 @@ export default function ChangeStatus( { post } ) {
 				onClick={ openModal }
 			>
 				<StatusLabel
-					status={ post?.password ? 'protected' : post.status }
-					date={ post?.date }
+					status={ initialPassword ? 'protected' : initialStatus }
+					date={ initialDate }
 				/>
 			</Button>
 			{ isOpen && (

From fc295e07ae2928a0eaf594220af78cbef70be26f Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Wed, 14 Jun 2023 15:07:30 +1000
Subject: [PATCH 23/37] fix status label

---
 packages/edit-site/src/components/change-status/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/change-status/index.js b/packages/edit-site/src/components/change-status/index.js
index 5c399669d46d4..60aa2158aee7c 100644
--- a/packages/edit-site/src/components/change-status/index.js
+++ b/packages/edit-site/src/components/change-status/index.js
@@ -53,7 +53,7 @@ const STATUS_OPTIONS = [
 export default function ChangeStatus( {
 	postType,
 	postId,
-	postStatus: initialStatus,
+	status: initialStatus,
 	password: initialPassword,
 	date: initialDate,
 } ) {

From 96ba33fab519c2d74bb23947859991be0bfd11aa Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Wed, 14 Jun 2023 15:22:39 +1000
Subject: [PATCH 24/37] use null for status date

---
 packages/edit-site/src/components/change-status/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/change-status/index.js b/packages/edit-site/src/components/change-status/index.js
index 60aa2158aee7c..f5128c217f82b 100644
--- a/packages/edit-site/src/components/change-status/index.js
+++ b/packages/edit-site/src/components/change-status/index.js
@@ -113,8 +113,8 @@ export default function ChangeStatus( {
 	};
 
 	const handleStatus = ( value ) => {
-		if ( value === 'published' ) {
-			setDate( undefined );
+		if ( value === 'publish' ) {
+			setDate( null );
 		}
 		setStatus( value );
 	};

From 1fa27ab04578b5fb240fca3e2eaf3705d0e98de3 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Thu, 15 Jun 2023 11:53:50 +1000
Subject: [PATCH 25/37] handle empty date

---
 .../status-label.js                            | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
index d451e08916584..a8dd39bf880bc 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
@@ -47,14 +47,16 @@ export default function StatusLabel( { status, date, short } ) {
 	let statusIcon = pendingIcon;
 	switch ( status ) {
 		case 'publish':
-			statusLabel = createInterpolateElement(
-				sprintf(
-					/* translators: %s: is the relative time when the post was published. */
-					__( 'Published <time>%s</time>' ),
-					relateToNow
-				),
-				{ time: <time dateTime={ date } /> }
-			);
+			statusLabel = date
+				? createInterpolateElement(
+						sprintf(
+							/* translators: %s: is the relative time when the post was published. */
+							__( 'Published <time>%s</time>' ),
+							relateToNow
+						),
+						{ time: <time dateTime={ date } /> }
+				  )
+				: __( 'Published' );
 			statusIcon = publishedIcon;
 			break;
 		case 'future':

From 14e22540e3125d196c886a58daef969f10898796 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Thu, 15 Jun 2023 15:08:35 +1000
Subject: [PATCH 26/37] change to add fields instead of modal

---
 .../src/components/change-status/index.js     | 234 ------------------
 .../src/components/change-status/style.scss   |  72 ------
 .../sidebar-edit-mode/page-panels/index.js    |  18 +-
 .../page-panels/page-status.js                | 229 +++++++++++++++++
 .../page-panels/page-summary.js               |  35 +++
 .../page-panels/publish-date.js               |  93 +++++++
 .../sidebar-edit-mode/page-panels/style.scss  |  26 ++
 .../status-label.js                           |  18 +-
 8 files changed, 403 insertions(+), 322 deletions(-)
 delete mode 100644 packages/edit-site/src/components/change-status/index.js
 delete mode 100644 packages/edit-site/src/components/change-status/style.scss
 create mode 100644 packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
 create mode 100644 packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-summary.js
 create mode 100644 packages/edit-site/src/components/sidebar-edit-mode/page-panels/publish-date.js

diff --git a/packages/edit-site/src/components/change-status/index.js b/packages/edit-site/src/components/change-status/index.js
deleted file mode 100644
index f5128c217f82b..0000000000000
--- a/packages/edit-site/src/components/change-status/index.js
+++ /dev/null
@@ -1,234 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	Button,
-	Modal,
-	BaseControl,
-	ToggleControl,
-	DateTimePicker,
-	__experimentalText as Text,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	TextControl,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-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',
-		hint: __( 'Published, but only visible to admins and site editors' ),
-	},
-	{
-		label: __( 'Pending' ),
-		value: 'pending',
-		hint: __( 'Awaiting admin review' ),
-	},
-	{
-		label: __( 'Scheduled' ),
-		value: 'future',
-		hint: __( 'Publish automatically on a chosen date' ),
-	},
-];
-
-export default function ChangeStatus( {
-	postType,
-	postId,
-	status: initialStatus,
-	password: initialPassword,
-	date: initialDate,
-} ) {
-	const [ isCreatingPage, setIsCreatingPage ] = useState( false );
-	const [ status, setStatus ] = useState( initialStatus );
-	const [ date, setDate ] = useState( initialDate );
-	const [ showPassword, setShowPassword ] = useState( !! initialPassword );
-	const [ password, setPassword ] = useState( initialPassword );
-	const [ isOpen, setOpen ] = useState( false );
-	const openModal = () => setOpen( true );
-	const closeModal = () => setOpen( false );
-
-	const { editEntityRecord } = useDispatch( coreStore );
-	const { createErrorNotice, createSuccessNotice } =
-		useDispatch( noticesStore );
-
-	async function saveStatus( event ) {
-		event.preventDefault();
-
-		if ( isCreatingPage ) {
-			return;
-		}
-		setIsCreatingPage( true );
-		try {
-			await editEntityRecord( 'postType', postType, postId, {
-				status,
-				date,
-				password,
-			} );
-
-			createSuccessNotice(
-				__( 'Save your changes for your status to take affect' ),
-				{
-					type: 'snackbar',
-				}
-			);
-			setOpen( false );
-		} catch ( error ) {
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __( 'An error occurred while updating the status' );
-
-			createErrorNotice( errorMessage, {
-				type: 'snackbar',
-			} );
-		} finally {
-			setIsCreatingPage( false );
-		}
-	}
-
-	const handleTogglePassword = ( value ) => {
-		setShowPassword( value );
-		if ( ! value ) {
-			setPassword( '' );
-		}
-	};
-
-	const handleStatus = ( value ) => {
-		if ( value === 'publish' ) {
-			setDate( null );
-		}
-		setStatus( value );
-	};
-
-	return (
-		<>
-			<Button
-				className="edit-site-change-status__trigger"
-				variant="tertiary"
-				onClick={ openModal }
-			>
-				<StatusLabel
-					status={ initialPassword ? 'protected' : initialStatus }
-					date={ initialDate }
-				/>
-			</Button>
-			{ isOpen && (
-				<Modal
-					title="Update status"
-					onRequestClose={ closeModal }
-					className="edit-site-change-status"
-				>
-					<VStack
-						className="edit-site-change-status__content"
-						spacing={ 5 }
-					>
-						<BaseControl
-							hideLabelFromVision
-							label={ __( 'Status' ) }
-							id={ `edit-site-change-status__status` }
-							className={ 'components-radio-control' }
-						>
-							<VStack spacing={ 3 }>
-								{ STATUS_OPTIONS.map( ( option, index ) => (
-									<div
-										key={ `edit-site-change-status__status-${ index }` }
-										className="components-radio-control__option with-hint"
-									>
-										<input
-											id={ `edit-site-change-status__status-${ index }` }
-											className="components-radio-control__input"
-											type="radio"
-											name={ `edit-site-change-status__status` }
-											value={ option.value }
-											onChange={ ( e ) =>
-												handleStatus( e.target.value )
-											}
-											checked={ option.value === status }
-										/>
-										<VStack spacing={ 1 }>
-											<label
-												htmlFor={ `edit-site-change-status__status-${ index }` }
-											>
-												{ option.label }
-											</label>
-											{ option.hint && (
-												<Text variant="muted">
-													{ option.hint }
-												</Text>
-											) }
-										</VStack>
-									</div>
-								) ) }
-							</VStack>
-						</BaseControl>
-						{ status === 'future' && (
-							<div className="edit-site-change-status__date-time-picker">
-								<DateTimePicker
-									className="components-datetime__time__one-row"
-									currentDate={ date }
-									is12Hour
-									onChange={ setDate }
-								/>
-							</div>
-						) }
-						<BaseControl
-							id={ `edit-site-change-status__password` }
-							label={ __( 'Password' ) }
-						>
-							<ToggleControl
-								label={ __(
-									'Hide this page behind a password'
-								) }
-								checked={ showPassword }
-								onChange={ handleTogglePassword }
-							/>
-							{ showPassword && (
-								<TextControl
-									onChange={ setPassword }
-									value={ password }
-									/* eslint-disable jsx-a11y/no-autofocus */
-									autoFocus
-									/* eslint-enable jsx-a11y/no-autofocus */
-									placeholder={ __(
-										'Enter a secure password'
-									) }
-									type="password"
-								/>
-							) }
-						</BaseControl>
-					</VStack>
-					<HStack
-						className="edit-site-change-status__footer"
-						alignment="right"
-					>
-						<Button variant="tertiary" onClick={ closeModal }>
-							{ __( 'Cancel' ) }
-						</Button>
-						<Button variant="primary" onClick={ saveStatus }>
-							{ __( 'Done' ) }
-						</Button>
-					</HStack>
-				</Modal>
-			) }
-		</>
-	);
-}
diff --git a/packages/edit-site/src/components/change-status/style.scss b/packages/edit-site/src/components/change-status/style.scss
deleted file mode 100644
index 958b9dd1ad2b0..0000000000000
--- a/packages/edit-site/src/components/change-status/style.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-.edit-site-change-status {
-	width: 540px;
-	min-height: 400px;
-	.components-radio-control__option.with-hint {
-		display: flex;
-		gap: $grid-unit-10;
-		align-items: center;
-	}
-	.components-modal__content {
-		padding: 0;
-		.components-modal__header + div {
-			display: flex;
-			flex-direction: column;
-			overflow: hidden;
-			height: 100%;
-
-		}
-	}
-	.components-custom-select-control__item {
-		&.has-hint {
-			grid-template-columns: auto 30px;
-			line-height: $default-line-height;
-			margin-bottom: 0;
-		}
-
-		.components-custom-select-control__item-hint {
-			grid-row: 2;
-			text-align: left;
-		}
-	}
-	.edit-site-change-status__content {
-		flex-grow: 1;
-		justify-content: flex-start;
-		overflow: auto;
-		padding: 0 $grid-unit-40 $grid-unit-40;
-		> div {
-			flex-shrink: 0;
-		}
-	}
-	.edit-site-change-status__footer {
-		flex-grow: 0;
-		padding: $grid-unit-20 $grid-unit-40 $grid-unit-20;
-		border-top: 1px solid $gray-100;
-	}
-}
-
-.edit-site-change-status__date-time-picker {
-	border-radius: $radius-block-ui;
-	border: 1px solid $gray-100;
-	padding: $grid-unit-20;
-	.components-datetime {
-		gap: $grid-unit-05;
-	}
-	.components-datetime__date {
-		margin-bottom: $grid-unit-10;
-	}
-	.components-datetime__time {
-		display: flex;
-		gap: $grid-unit-10;
-
-		fieldset:first-child {
-			.components-datetime__time-wrapper {
-				> .components-flex-item {
-					display: none;
-				}
-			}
-		}
-		fieldset:last-child {
-			flex-grow: 1;
-		}
-	}
-}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js
index c6f30156bb255..69971d1ad413a 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js
@@ -19,7 +19,7 @@ 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 PageSummary from './page-summary';
 import EditTemplate from './edit-template';
 
 export default function PagePanels() {
@@ -65,17 +65,19 @@ export default function PagePanels() {
 									humanTimeDiff( modified )
 								) }
 							</Text>
-							<ChangeStatus
-								status={ status }
-								date={ date }
-								password={ password }
-								postId={ id }
-								postType={ type }
-							/>
 						</VStack>
 					}
 				/>
 			</PanelBody>
+			<PanelBody title={ __( 'Summary' ) }>
+				<PageSummary
+					status={ status }
+					date={ date }
+					password={ password }
+					postId={ id }
+					postType={ type }
+				/>
+			</PanelBody>
 			<PanelBody title={ __( 'Content' ) }>
 				<PageContent />
 			</PanelBody>
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
new file mode 100644
index 0000000000000..59443e3dc4fff
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
@@ -0,0 +1,229 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	BaseControl,
+	ToggleControl,
+	Dropdown,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	TextControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { useState, useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+/**
+ * Internal dependencies
+ */
+import StatusLabel from '../../sidebar-navigation-screen-page/status-label';
+
+const STATUS_OPTIONS = [
+	{
+		label: __( 'Draft' ),
+		value: 'draft',
+		hint: __( 'Not ready to publish.' ),
+	},
+	{
+		label: __( 'Pending' ),
+		value: 'pending',
+		hint: __( 'Waiting for review before publishing.' ),
+	},
+	{
+		label: __( 'Private' ),
+		value: 'private',
+		hint: __( 'Only visible to site admins and editors.' ),
+	},
+	{
+		label: __( 'Scheduled' ),
+		value: 'future',
+		hint: __( 'Publish automatically on a chosen date.' ),
+	},
+	{
+		label: __( 'Published' ),
+		value: 'publish',
+		hint: __( 'Visible to everyone.' ),
+	},
+];
+
+export default function PageStatus( {
+	postType,
+	postId,
+	status,
+	password,
+	date,
+} ) {
+	const [ showPassword, setShowPassword ] = useState( !! password );
+
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'bottom-end',
+		} ),
+		[ popoverAnchor ]
+	);
+
+	const saveStatus = async ( {
+		status: newStatus = status,
+		password: newPassword = password,
+		date: newDate = date,
+	} ) => {
+		try {
+			await editEntityRecord( 'postType', postType, postId, {
+				status: newStatus,
+				date: newDate,
+				password: newPassword,
+			} );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while updating the status' );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		}
+	};
+
+	const handleTogglePassword = ( value ) => {
+		setShowPassword( value );
+		if ( ! value ) {
+			saveStatus( { password: '' } );
+		}
+	};
+
+	const handleStatus = ( value ) => {
+		let newDate = date;
+		if ( value === 'publish' ) {
+			if ( new Date( date ) > new Date() ) {
+				newDate = null;
+			}
+		} else if ( value === 'future' ) {
+			if ( ! date || new Date( date ) < new Date() ) {
+				newDate = new Date();
+				newDate.setDate( newDate.getDate() + 7 );
+			}
+		}
+		saveStatus( {
+			status: value,
+			date: newDate,
+		} );
+	};
+
+	return (
+		<HStack className="edit-site-summary-field">
+			<Text className="edit-site-summary-field__label">
+				{ __( 'Status' ) }
+			</Text>
+			<Dropdown
+				contentClassName="edit-site-change-status__content"
+				popoverProps={ popoverProps }
+				focusOnMount
+				ref={ setPopoverAnchor }
+				renderToggle={ ( { onToggle } ) => (
+					<Button
+						className="edit-site-summary-field__trigger"
+						variant="tertiary"
+						onClick={ onToggle }
+					>
+						<StatusLabel
+							status={ password ? 'protected' : status }
+						/>
+					</Button>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<>
+						<InspectorPopoverHeader
+							title={ __( 'Status' ) }
+							onClose={ onClose }
+						/>
+						<VStack spacing={ 5 }>
+							<BaseControl
+								hideLabelFromVision
+								label={ __( 'Status' ) }
+								id={ `edit-site-change-status__status` }
+								className={ 'components-radio-control' }
+							>
+								<VStack spacing={ 3 }>
+									{ STATUS_OPTIONS.map( ( option, index ) => (
+										<div
+											key={ `edit-site-change-status__status-${ index }` }
+											className="components-radio-control__option with-hint"
+										>
+											<input
+												id={ `edit-site-change-status__status-${ index }` }
+												className="components-radio-control__input"
+												type="radio"
+												name={ `edit-site-change-status__status` }
+												value={ option.value }
+												onChange={ ( e ) =>
+													handleStatus(
+														e.target.value
+													)
+												}
+												checked={
+													option.value === status
+												}
+											/>
+											<VStack spacing={ 1 }>
+												<label
+													htmlFor={ `edit-site-change-status__status-${ index }` }
+												>
+													{ option.label }
+												</label>
+												{ option.hint && (
+													<Text variant="muted">
+														{ option.hint }
+													</Text>
+												) }
+											</VStack>
+										</div>
+									) ) }
+								</VStack>
+							</BaseControl>
+							<BaseControl
+								id={ `edit-site-change-status__password` }
+								label={ __( 'Password' ) }
+							>
+								<ToggleControl
+									label={ __(
+										'Hide this page behind a password'
+									) }
+									checked={ showPassword }
+									onChange={ handleTogglePassword }
+								/>
+								{ showPassword && (
+									<TextControl
+										onChange={ ( value ) =>
+											saveStatus( { password: value } )
+										}
+										value={ password }
+										/* eslint-disable jsx-a11y/no-autofocus */
+										autoFocus
+										/* eslint-enable jsx-a11y/no-autofocus */
+										placeholder={ __(
+											'Enter a secure password'
+										) }
+										type="password"
+									/>
+								) }
+							</BaseControl>
+						</VStack>
+					</>
+				) }
+			/>
+		</HStack>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-summary.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-summary.js
new file mode 100644
index 0000000000000..3dce743b298d4
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-summary.js
@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import PageStatus from './page-status';
+import PublishDate from './publish-date';
+
+export default function PageSummary( {
+	status,
+	date,
+	password,
+	postId,
+	postType,
+} ) {
+	return (
+		<VStack>
+			<PageStatus
+				status={ status }
+				date={ date }
+				password={ password }
+				postId={ postId }
+				postType={ postType }
+			/>
+			<PublishDate
+				status={ status }
+				date={ date }
+				postId={ postId }
+				postType={ postType }
+			/>
+		</VStack>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/publish-date.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/publish-date.js
new file mode 100644
index 0000000000000..32cd99cca45b8
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/publish-date.js
@@ -0,0 +1,93 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Dropdown,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { useState, useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+import { __experimentalPublishDateTimePicker as PublishDateTimePicker } from '@wordpress/block-editor';
+import { humanTimeDiff } from '@wordpress/date';
+
+export default function ChangeStatus( { postType, postId, status, date } ) {
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'bottom-end',
+		} ),
+		[ popoverAnchor ]
+	);
+
+	const saveDate = async ( newDate ) => {
+		try {
+			let newStatus = status;
+			if ( status === 'future' && new Date( newDate ) < new Date() ) {
+				newStatus = 'draft';
+			} else if (
+				status === 'publish' &&
+				new Date( newDate ) > new Date()
+			) {
+				newStatus = 'future';
+			}
+			await editEntityRecord( 'postType', postType, postId, {
+				status: newStatus,
+				date: newDate,
+			} );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while updating the status' );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		}
+	};
+
+	const relateToNow = date ? humanTimeDiff( date ) : __( 'Immediately' );
+
+	return (
+		<HStack className="edit-site-summary-field">
+			<Text className="edit-site-summary-field__label">
+				{ __( 'Publish' ) }
+			</Text>
+			<Dropdown
+				contentClassName="edit-site-change-status__content"
+				popoverProps={ popoverProps }
+				focusOnMount
+				ref={ setPopoverAnchor }
+				renderToggle={ ( { onToggle } ) => (
+					<Button
+						className="edit-site-summary-field__trigger"
+						variant="tertiary"
+						onClick={ onToggle }
+					>
+						{ relateToNow }
+					</Button>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<PublishDateTimePicker
+						currentDate={ date }
+						is12Hour
+						onClose={ onClose }
+						onChange={ saveDate }
+					/>
+				) }
+			/>
+		</HStack>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
index cc6deef0703ae..c7c3c0c192d98 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
@@ -14,3 +14,29 @@
 		margin-left: -$grid-unit-15;
 	}
 }
+
+
+.edit-site-change-status__content {
+	.components-popover__content {
+		min-width: 320px;
+		padding: $grid-unit-20;
+	}
+	.components-radio-control__option.with-hint {
+		display: flex;
+		gap: $grid-unit-10;
+		align-items: center;
+	}
+}
+
+.edit-site-summary-field {
+	.components-dropdown {
+		flex-grow: 1;
+	}
+	.edit-site-summary-field__trigger {
+		width: 100%;
+	}
+	.edit-site-summary-field__label {
+		width: 30%;
+	}
+}
+
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
index a8dd39bf880bc..13aba13aacbec 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/status-label.js
@@ -64,14 +64,16 @@ export default function StatusLabel( { status, date, short } ) {
 				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: <time>%s</time>' ),
-					formattedDate
-				),
-				{ time: <time dateTime={ date } /> }
-			);
+			statusLabel = date
+				? createInterpolateElement(
+						sprintf(
+							/* translators: %s: is the formatted date and time on which the post is scheduled to be published. */
+							__( 'Scheduled: <time>%s</time>' ),
+							formattedDate
+						),
+						{ time: <time dateTime={ date } /> }
+				  )
+				: __( 'Scheduled' );
 			break;
 		case 'draft':
 			statusLabel = __( 'Draft' );

From 053c3cf5d2bb64415f570bb92c872a363de8accb Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Thu, 15 Jun 2023 15:16:45 +1000
Subject: [PATCH 27/37] default publish not draft

---
 .../components/sidebar-edit-mode/page-panels/publish-date.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/publish-date.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/publish-date.js
index 32cd99cca45b8..1bce555036823 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/publish-date.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/publish-date.js
@@ -35,7 +35,7 @@ export default function ChangeStatus( { postType, postId, status, date } ) {
 		try {
 			let newStatus = status;
 			if ( status === 'future' && new Date( newDate ) < new Date() ) {
-				newStatus = 'draft';
+				newStatus = 'publish';
 			} else if (
 				status === 'publish' &&
 				new Date( newDate ) > new Date()

From a3949c2cdf1f8203188cade7bcfe02e3b1fa2757 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Thu, 15 Jun 2023 16:41:06 +1000
Subject: [PATCH 28/37] remove style import

---
 packages/edit-site/src/style.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 156bd5e2d958d..6dde831d7273f 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -4,7 +4,6 @@
 @import "./components/block-editor/style.scss";
 @import "./components/canvas-spinner/style.scss";
 @import "./components/code-editor/style.scss";
-@import "./components/change-status/style.scss";
 @import "./components/global-styles/style.scss";
 @import "./components/global-styles/screen-revisions/style.scss";
 @import "./components/header-edit-mode/style.scss";

From 3e51dffb73dbf27fd6494494e022f2517a98115a Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Fri, 16 Jun 2023 14:59:27 +1000
Subject: [PATCH 29/37] remove css

---
 .../components/sidebar-edit-mode/page-panels/style.scss    | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
index c7c3c0c192d98..8aa44049ab697 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
@@ -9,13 +9,6 @@
 	justify-content: center;
 }
 
-.edit-site-sidebar-card__description {
-	.edit-site-change-status__trigger {
-		margin-left: -$grid-unit-15;
-	}
-}
-
-
 .edit-site-change-status__content {
 	.components-popover__content {
 		min-width: 320px;

From d07a14344eb46b84b64f7daf263c8b2ae6f71339 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Tue, 20 Jun 2023 09:57:15 +1000
Subject: [PATCH 30/37] only autofocus password field if empty

---
 .../components/sidebar-edit-mode/page-panels/page-status.js   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
index 59443e3dc4fff..6fc9707995fb1 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
@@ -159,7 +159,7 @@ export default function PageStatus( {
 								<VStack spacing={ 3 }>
 									{ STATUS_OPTIONS.map( ( option, index ) => (
 										<div
-											key={ `edit-site-change-status__status-${ index }` }
+											key={ option.value }
 											className="components-radio-control__option with-hint"
 										>
 											<input
@@ -211,7 +211,7 @@ export default function PageStatus( {
 										}
 										value={ password }
 										/* eslint-disable jsx-a11y/no-autofocus */
-										autoFocus
+										autoFocus={ ! password }
 										/* eslint-enable jsx-a11y/no-autofocus */
 										placeholder={ __(
 											'Enter a secure password'

From ff96c4ca76edc8e6db24f010afd8234c42f50ac8 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Tue, 20 Jun 2023 10:32:15 +1000
Subject: [PATCH 31/37] aria label on status popover

---
 .../src/components/sidebar-edit-mode/page-panels/page-status.js  | 1 +
 .../src/components/sidebar-edit-mode/page-panels/publish-date.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
index 6fc9707995fb1..3512c138dd5d9 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
@@ -69,6 +69,7 @@ export default function PageStatus( {
 			// Anchor the popover to the middle of the entire row so that it doesn't
 			// move around when the label changes.
 			anchor: popoverAnchor,
+			ariaLabel: __( 'Change status' ),
 			placement: 'bottom-end',
 		} ),
 		[ popoverAnchor ]
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/publish-date.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/publish-date.js
index 1bce555036823..a3e97f0e5f79c 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/publish-date.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/publish-date.js
@@ -26,6 +26,7 @@ export default function ChangeStatus( { postType, postId, status, date } ) {
 			// Anchor the popover to the middle of the entire row so that it doesn't
 			// move around when the label changes.
 			anchor: popoverAnchor,
+			ariaLabel: __( 'Change publish date' ),
 			placement: 'bottom-end',
 		} ),
 		[ popoverAnchor ]

From 9e28a27c02b998fbbfc57a1d2ba0cfdebcfc29f1 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Tue, 20 Jun 2023 10:42:58 +1000
Subject: [PATCH 32/37] remove end line


From ca88703e3bae80d61c907422a10837f06b1cba45 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Tue, 20 Jun 2023 12:30:39 +1000
Subject: [PATCH 33/37] create radio with help component

---
 .../page-panels/page-status.js                | 67 ++++++++++---------
 1 file changed, 34 insertions(+), 33 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
index 3512c138dd5d9..ce4e9e0a989c5 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
@@ -13,7 +13,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
-import { useState, useMemo } from '@wordpress/element';
+import { useState, useMemo, useId } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
 import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
@@ -158,39 +158,13 @@ export default function PageStatus( {
 								className={ 'components-radio-control' }
 							>
 								<VStack spacing={ 3 }>
-									{ STATUS_OPTIONS.map( ( option, index ) => (
-										<div
+									{ STATUS_OPTIONS.map( ( option ) => (
+										<RadioWithHelp
 											key={ option.value }
-											className="components-radio-control__option with-hint"
-										>
-											<input
-												id={ `edit-site-change-status__status-${ index }` }
-												className="components-radio-control__input"
-												type="radio"
-												name={ `edit-site-change-status__status` }
-												value={ option.value }
-												onChange={ ( e ) =>
-													handleStatus(
-														e.target.value
-													)
-												}
-												checked={
-													option.value === status
-												}
-											/>
-											<VStack spacing={ 1 }>
-												<label
-													htmlFor={ `edit-site-change-status__status-${ index }` }
-												>
-													{ option.label }
-												</label>
-												{ option.hint && (
-													<Text variant="muted">
-														{ option.hint }
-													</Text>
-												) }
-											</VStack>
-										</div>
+											option={ option }
+											checked={ option.value === status }
+											onChange={ handleStatus }
+										/>
 									) ) }
 								</VStack>
 							</BaseControl>
@@ -228,3 +202,30 @@ export default function PageStatus( {
 		</HStack>
 	);
 }
+
+const RadioWithHelp = ( { option, onChange, checked } ) => {
+	const id = useId();
+
+	return (
+		<div
+			key={ option.value }
+			className="components-radio-control__option with-hint"
+		>
+			<input
+				id={ `${ id }-${ option.value }` }
+				className="components-radio-control__input"
+				type="radio"
+				name={ `edit-site-change-status__status` }
+				value={ option.value }
+				onChange={ ( e ) => onChange( e.target.value ) }
+				checked={ checked }
+			/>
+			<VStack spacing={ 1 }>
+				<label htmlFor={ `${ id }-${ option.value }` }>
+					{ option.label }
+				</label>
+				{ option.hint && <Text variant="muted">{ option.hint }</Text> }
+			</VStack>
+		</div>
+	);
+};

From d0b09cc41ff0b452f24633de87c3a86d009d69f9 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Tue, 20 Jun 2023 12:55:03 +1000
Subject: [PATCH 34/37] adjust to use radiocontrol and hide password

---
 .../page-panels/page-status.js                | 156 +++++++++---------
 .../sidebar-edit-mode/page-panels/style.scss  |  14 +-
 2 files changed, 88 insertions(+), 82 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
index ce4e9e0a989c5..5569708d4dedb 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
@@ -10,10 +10,11 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	TextControl,
+	RadioControl,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
-import { useState, useMemo, useId } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
 import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
@@ -24,29 +25,55 @@ import StatusLabel from '../../sidebar-navigation-screen-page/status-label';
 
 const STATUS_OPTIONS = [
 	{
-		label: __( 'Draft' ),
+		label: (
+			<>
+				{ __( 'Draft' ) }
+				<Text variant="muted">{ __( 'Not ready to publish.' ) }</Text>
+			</>
+		),
 		value: 'draft',
-		hint: __( 'Not ready to publish.' ),
 	},
 	{
-		label: __( 'Pending' ),
+		label: (
+			<>
+				{ __( 'Pending' ) }
+				<Text variant="muted">
+					{ __( 'Waiting for review before publishing.' ) }
+				</Text>
+			</>
+		),
 		value: 'pending',
-		hint: __( 'Waiting for review before publishing.' ),
 	},
 	{
-		label: __( 'Private' ),
+		label: (
+			<>
+				{ __( 'Private' ) }
+				<Text variant="muted">
+					{ __( 'Only visible to site admins and editors.' ) }
+				</Text>
+			</>
+		),
 		value: 'private',
-		hint: __( 'Only visible to site admins and editors.' ),
 	},
 	{
-		label: __( 'Scheduled' ),
+		label: (
+			<>
+				{ __( 'Scheduled' ) }
+				<Text variant="muted">
+					{ __( 'Publish automatically on a chosen date.' ) }
+				</Text>
+			</>
+		),
 		value: 'future',
-		hint: __( 'Publish automatically on a chosen date.' ),
 	},
 	{
-		label: __( 'Published' ),
+		label: (
+			<>
+				{ __( 'Published' ) }
+				<Text variant="muted">{ __( 'Visible to everyone.' ) }</Text>
+			</>
+		),
 		value: 'publish',
-		hint: __( 'Visible to everyone.' ),
 	},
 ];
 
@@ -107,6 +134,7 @@ export default function PageStatus( {
 
 	const handleStatus = ( value ) => {
 		let newDate = date;
+		let newPassword = password;
 		if ( value === 'publish' ) {
 			if ( new Date( date ) > new Date() ) {
 				newDate = null;
@@ -116,10 +144,14 @@ export default function PageStatus( {
 				newDate = new Date();
 				newDate.setDate( newDate.getDate() + 7 );
 			}
+		} else if ( value === 'private' && password ) {
+			setShowPassword( false );
+			newPassword = '';
 		}
 		saveStatus( {
 			status: value,
 			date: newDate,
+			password: newPassword,
 		} );
 	};
 
@@ -151,50 +183,45 @@ export default function PageStatus( {
 							onClose={ onClose }
 						/>
 						<VStack spacing={ 5 }>
-							<BaseControl
+							<RadioControl
+								className="edit-site-change-status__options"
 								hideLabelFromVision
 								label={ __( 'Status' ) }
-								id={ `edit-site-change-status__status` }
-								className={ 'components-radio-control' }
-							>
-								<VStack spacing={ 3 }>
-									{ STATUS_OPTIONS.map( ( option ) => (
-										<RadioWithHelp
-											key={ option.value }
-											option={ option }
-											checked={ option.value === status }
-											onChange={ handleStatus }
-										/>
-									) ) }
-								</VStack>
-							</BaseControl>
-							<BaseControl
-								id={ `edit-site-change-status__password` }
-								label={ __( 'Password' ) }
-							>
-								<ToggleControl
-									label={ __(
-										'Hide this page behind a password'
-									) }
-									checked={ showPassword }
-									onChange={ handleTogglePassword }
-								/>
-								{ showPassword && (
-									<TextControl
-										onChange={ ( value ) =>
-											saveStatus( { password: value } )
-										}
-										value={ password }
-										/* eslint-disable jsx-a11y/no-autofocus */
-										autoFocus={ ! password }
-										/* eslint-enable jsx-a11y/no-autofocus */
-										placeholder={ __(
-											'Enter a secure password'
+								options={ STATUS_OPTIONS }
+								onChange={ handleStatus }
+								selected={ status }
+							/>
+							{ status !== 'private' && (
+								<BaseControl
+									id={ `edit-site-change-status__password` }
+									label={ __( 'Password' ) }
+								>
+									<ToggleControl
+										label={ __(
+											'Hide this page behind a password'
 										) }
-										type="password"
+										checked={ showPassword }
+										onChange={ handleTogglePassword }
 									/>
-								) }
-							</BaseControl>
+									{ showPassword && (
+										<TextControl
+											onChange={ ( value ) =>
+												saveStatus( {
+													password: value,
+												} )
+											}
+											value={ password }
+											/* eslint-disable jsx-a11y/no-autofocus */
+											autoFocus={ ! password }
+											/* eslint-enable jsx-a11y/no-autofocus */
+											placeholder={ __(
+												'Enter a secure password'
+											) }
+											type="password"
+										/>
+									) }
+								</BaseControl>
+							) }
 						</VStack>
 					</>
 				) }
@@ -202,30 +229,3 @@ export default function PageStatus( {
 		</HStack>
 	);
 }
-
-const RadioWithHelp = ( { option, onChange, checked } ) => {
-	const id = useId();
-
-	return (
-		<div
-			key={ option.value }
-			className="components-radio-control__option with-hint"
-		>
-			<input
-				id={ `${ id }-${ option.value }` }
-				className="components-radio-control__input"
-				type="radio"
-				name={ `edit-site-change-status__status` }
-				value={ option.value }
-				onChange={ ( e ) => onChange( e.target.value ) }
-				checked={ checked }
-			/>
-			<VStack spacing={ 1 }>
-				<label htmlFor={ `${ id }-${ option.value }` }>
-					{ option.label }
-				</label>
-				{ option.hint && <Text variant="muted">{ option.hint }</Text> }
-			</VStack>
-		</div>
-	);
-};
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
index 8aa44049ab697..062c70c4b7ce0 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
@@ -14,10 +14,16 @@
 		min-width: 320px;
 		padding: $grid-unit-20;
 	}
-	.components-radio-control__option.with-hint {
-		display: flex;
-		gap: $grid-unit-10;
-		align-items: center;
+	.edit-site-change-status__options {
+		.components-base-control__field > .components-v-stack {
+			gap: $grid-unit-10;
+		}
+		label {
+			.components-text {
+				display: block;
+				margin-left: $radio-input-size + $grid-unit-05;
+			}
+		}
 	}
 }
 

From d4d7fde0a1aa63f381710c5151a0edbca76ebd10 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Tue, 20 Jun 2023 12:57:37 +1000
Subject: [PATCH 35/37] radio label alignment

---
 .../src/components/sidebar-edit-mode/page-panels/style.scss     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
index 062c70c4b7ce0..0a618d9ff53d3 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
@@ -21,7 +21,7 @@
 		label {
 			.components-text {
 				display: block;
-				margin-left: $radio-input-size + $grid-unit-05;
+				margin-left: $radio-input-size + 6;
 			}
 		}
 	}

From 7cf6f3cef4d8e87bc9b1845862c7a74bd0fe6090 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Tue, 20 Jun 2023 13:02:09 +1000
Subject: [PATCH 36/37] add form wrapper

---
 .../page-panels/page-status.js                | 80 ++++++++++---------
 1 file changed, 41 insertions(+), 39 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
index 5569708d4dedb..2a34c98ba923d 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
@@ -182,47 +182,49 @@ export default function PageStatus( {
 							title={ __( 'Status' ) }
 							onClose={ onClose }
 						/>
-						<VStack spacing={ 5 }>
-							<RadioControl
-								className="edit-site-change-status__options"
-								hideLabelFromVision
-								label={ __( 'Status' ) }
-								options={ STATUS_OPTIONS }
-								onChange={ handleStatus }
-								selected={ status }
-							/>
-							{ status !== 'private' && (
-								<BaseControl
-									id={ `edit-site-change-status__password` }
-									label={ __( 'Password' ) }
-								>
-									<ToggleControl
-										label={ __(
-											'Hide this page behind a password'
-										) }
-										checked={ showPassword }
-										onChange={ handleTogglePassword }
-									/>
-									{ showPassword && (
-										<TextControl
-											onChange={ ( value ) =>
-												saveStatus( {
-													password: value,
-												} )
-											}
-											value={ password }
-											/* eslint-disable jsx-a11y/no-autofocus */
-											autoFocus={ ! password }
-											/* eslint-enable jsx-a11y/no-autofocus */
-											placeholder={ __(
-												'Enter a secure password'
+						<form>
+							<VStack spacing={ 5 }>
+								<RadioControl
+									className="edit-site-change-status__options"
+									hideLabelFromVision
+									label={ __( 'Status' ) }
+									options={ STATUS_OPTIONS }
+									onChange={ handleStatus }
+									selected={ status }
+								/>
+								{ status !== 'private' && (
+									<BaseControl
+										id={ `edit-site-change-status__password` }
+										label={ __( 'Password' ) }
+									>
+										<ToggleControl
+											label={ __(
+												'Hide this page behind a password'
 											) }
-											type="password"
+											checked={ showPassword }
+											onChange={ handleTogglePassword }
 										/>
-									) }
-								</BaseControl>
-							) }
-						</VStack>
+										{ showPassword && (
+											<TextControl
+												onChange={ ( value ) =>
+													saveStatus( {
+														password: value,
+													} )
+												}
+												value={ password }
+												/* eslint-disable jsx-a11y/no-autofocus */
+												autoFocus={ ! password }
+												/* eslint-enable jsx-a11y/no-autofocus */
+												placeholder={ __(
+													'Enter a secure password'
+												) }
+												type="password"
+											/>
+										) }
+									</BaseControl>
+								) }
+							</VStack>
+						</form>
 					</>
 				) }
 			/>

From 6c55aa105f0c205b241652f521f8c2eef9f3067d Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Tue, 20 Jun 2023 13:55:10 +1000
Subject: [PATCH 37/37] aria label

---
 .../src/components/sidebar-edit-mode/page-panels/page-status.js | 2 +-
 .../components/sidebar-edit-mode/page-panels/publish-date.js    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
index 2a34c98ba923d..8910cb1968c3e 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
@@ -96,7 +96,7 @@ export default function PageStatus( {
 			// Anchor the popover to the middle of the entire row so that it doesn't
 			// move around when the label changes.
 			anchor: popoverAnchor,
-			ariaLabel: __( 'Change status' ),
+			'aria-label': __( 'Change status' ),
 			placement: 'bottom-end',
 		} ),
 		[ popoverAnchor ]
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/publish-date.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/publish-date.js
index a3e97f0e5f79c..d000394f6816b 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/publish-date.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/publish-date.js
@@ -26,7 +26,7 @@ export default function ChangeStatus( { postType, postId, status, date } ) {
 			// Anchor the popover to the middle of the entire row so that it doesn't
 			// move around when the label changes.
 			anchor: popoverAnchor,
-			ariaLabel: __( 'Change publish date' ),
+			'aria-label': __( 'Change publish date' ),
 			placement: 'bottom-end',
 		} ),
 		[ popoverAnchor ]