From eb424b280f48c74d07b85a283966d1acd1d1b7eb Mon Sep 17 00:00:00 2001 From: Saxon Fletcher Date: Tue, 13 Jun 2023 15:33:09 +1000 Subject: [PATCH] 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 | 19 +++++++--- .../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, 59 insertions(+), 30 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 ( <> - { isOpen && ( - setStatus( e.target.value ) + handleStatus( e.target.value ) } checked={ option.value === status } /> @@ -161,6 +179,7 @@ export default function ChangeStatus( { post } ) { 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 c2df78f4185af..45a43e8677704 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 @@ -3,6 +3,7 @@ */ import { PanelBody, + __experimentalText as Text, __experimentalVStack as VStack, Button, } from '@wordpress/components'; @@ -21,6 +22,7 @@ import { store as editSiteStore } from '../../../store'; import useEditedEntityRecord from '../../use-edited-entity-record'; import SidebarCard from '../sidebar-card'; import PageContent from './page-content'; +import ChangeStatus from '../../change-status'; export default function PagePanels() { const context = useSelect( @@ -54,11 +56,18 @@ export default function PagePanels() { + + { sprintf( + // translators: %s: Human-readable time difference, e.g. "2 days ago". + __( 'Last edited %s' ), + humanTimeDiff( page.modified ) + ) } + + + + } /> 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={ - - - { record.link.replace( /^(https?:\/\/)?/, '' ) } - - - + + { record.link.replace( /^(https?:\/\/)?/, '' ) } + } 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 ) { ), }, 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 = ( ); -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 ' ), + __( 'Scheduled: ' ), formattedDate ), { time: