Editor: render publish date control when the status is future(sched…

…uled) (#62070) Co-authored-by: ntsekouras <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: annezazu <[email protected]>
WordPress · May 30, 2024 · db6c907 · db6c907
1 parent d8c5b71
commit db6c907
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 20 deletions.
diff --git a/packages/block-editor/src/components/publish-date-time-picker/index.js b/packages/block-editor/src/components/publish-date-time-picker/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { DateTimePicker } from '@wordpress/components';
+import { DateTimePicker, TimePicker } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { forwardRef } from '@wordpress/element';
 import { getSettings } from '@wordpress/date';
@@ -11,23 +11,34 @@ import { getSettings } from '@wordpress/date';
  */
 import InspectorPopoverHeader from '../inspector-popover-header';
 
-function PublishDateTimePicker(
- { onClose, onChange, ...additionalProps },
+export function PublishDateTimePicker(
+ {
+ onClose,
+ onChange,
+ showPopoverHeaderActions,
+ isCompact,
+ ...additionalProps
+ },
  ref
 ) {
+ const DatePickerComponent = isCompact ? TimePicker : DateTimePicker;
  return (
  <div ref={ ref } className="block-editor-publish-date-time-picker">
  <InspectorPopoverHeader
  title={ __( 'Publish' ) }
- actions={ [
- {
- label: __( 'Now' ),
- onClick: () => onChange?.( null ),
- },
- ] }
+ actions={
+ showPopoverHeaderActions
+ ? [
+ {
+ label: __( 'Now' ),
+ onClick: () => onChange?.( null ),
+ },
+ ]
+ : undefined
+ }
  onClose={ onClose }
  />
- <DateTimePicker
+ <DatePickerComponent
  startOfWeek={ getSettings().l10n.startOfWeek }
  onChange={ onChange }
  { ...additionalProps }
@@ -36,4 +47,17 @@ function PublishDateTimePicker(
  );
 }
 
-export default forwardRef( PublishDateTimePicker );
+export const PrivatePublishDateTimePicker = forwardRef( PublishDateTimePicker );
+
+function PublicPublishDateTimePicker( props, ref ) {
+ return (
+ <PrivatePublishDateTimePicker
+ { ...props }
+ showPopoverHeaderActions
+ isCompact={ false }
+ ref={ ref }
+ />
+ );
+}
+
+export default forwardRef( PublicPublishDateTimePicker );
diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
@@ -41,6 +41,7 @@ import { requiresWrapperOnCopy } from './components/writing-flow/utils';
 import { PrivateRichText } from './components/rich-text/';
 import { PrivateBlockPopover } from './components/block-popover';
 import { PrivateInserterLibrary } from './components/inserter/library';
+import { PrivatePublishDateTimePicker } from './components/publish-date-time-picker';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -82,4 +83,5 @@ lock( privateApis, {
  PrivateInserterLibrary,
  reusableBlocksSelectKey,
  PrivateBlockPopover,
+ PrivatePublishDateTimePicker,
 } );
diff --git a/packages/editor/src/components/post-schedule/index.js b/packages/editor/src/components/post-schedule/index.js
@@ -8,14 +8,17 @@ import { parseISO, endOfMonth, startOfMonth } from 'date-fns';
  */
 import { getSettings } from '@wordpress/date';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { __experimentalPublishDateTimePicker as PublishDateTimePicker } from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { useState, useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { PrivatePublishDateTimePicker } = unlock( blockEditorPrivateApis );
 
 /**
  * Renders the PostSchedule component. It allows the user to schedule a post.
@@ -25,7 +28,21 @@ import { store as editorStore } from '../../store';
  *
  * @return {Component} The component to be rendered.
  */
-export default function PostSchedule( { onClose } ) {
+export default function PostSchedule( props ) {
+ return (
+ <PrivatePostSchedule
+ { ...props }
+ showPopoverHeaderActions
+ isCompact={ false }
+ />
+ );
+}
+
+export function PrivatePostSchedule( {
+ onClose,
+ showPopoverHeaderActions,
+ isCompact,
+} ) {
  const { postDate, postType } = useSelect(
  ( select ) => ( {
  postDate: select( editorStore ).getEditedPostAttribute( 'date' ),
@@ -77,7 +94,7 @@ export default function PostSchedule( { onClose } ) {
  );
 
  return (
- <PublishDateTimePicker
+ <PrivatePublishDateTimePicker
  currentDate={ postDate }
  onChange={ onUpdateDate }
  is12Hour={ is12HourTime }
@@ -86,6 +103,8 @@ export default function PostSchedule( { onClose } ) {
  setPreviewedMonth( parseISO( date ) )
  }
  onClose={ onClose }
+ isCompact={ isCompact }
+ showPopoverHeaderActions={ showPopoverHeaderActions }
  />
  );
 }
diff --git a/packages/editor/src/components/post-status/index.js b/packages/editor/src/components/post-status/index.js
@@ -27,6 +27,7 @@ import {
  NAVIGATION_POST_TYPE,
 } from '../../store/constants';
 import PostPanelRow from '../post-panel-row';
+import { PrivatePostSchedule } from '../post-schedule';
 import { store as editorStore } from '../../store';
 
 const labels = {
@@ -174,11 +175,6 @@ export default function PostStatus() {
  let newPassword = password;
  if ( status === 'future' && 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 );
- }
  }
  if ( value === 'private' && password ) {
  newPassword = '';
@@ -232,6 +228,16 @@ export default function PostStatus() {
  : status
  }
  />
+ { status === 'future' && (
+ <div className="editor-change-status__publish-date-wrapper">
+ <PrivatePostSchedule
+ showPopoverHeaderActions={
+ false
+ }
+ isCompact
+ />
+ </div>
+ ) }
  { status !== 'private' && (
  <VStack
  as="fieldset"

diff --git a/packages/editor/src/components/post-status/style.scss b/packages/editor/src/components/post-status/style.scss
@@ -6,7 +6,8 @@
  }
 }
 
-.editor-change-status__password-fieldset {
+.editor-change-status__password-fieldset,
+.editor-change-status__publish-date-wrapper {
  border-top: $border-width solid $gray-200;
  padding-top: $grid-unit-20;
 }