create private components to hide the popover actions and add styles

WordPress · May 29, 2024 · afa798b · afa798b
1 parent 4ebfa05
commit afa798b
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 15 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
@@ -11,20 +11,24 @@ import { getSettings } from '@wordpress/date';
  */
 import InspectorPopoverHeader from '../inspector-popover-header';
 
-function PublishDateTimePicker(
-	{ onClose, onChange, ...additionalProps },
+export function PublishDateTimePicker(
+	{ onClose, onChange, showPopoverHeaderActions, ...additionalProps },
 	ref
 ) {
 	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
@@ -36,4 +40,16 @@ function PublishDateTimePicker(
 	);
 }
 
-export default forwardRef( PublishDateTimePicker );
+export const PrivatePublishDateTimePicker = forwardRef( PublishDateTimePicker );
+
+function PublicPublishDateTimePicker( props, ref ) {
+	return (
+		<PrivatePublishDateTimePicker
+			{ ...props }
+			showPopoverHeaderActions
+			ref={ ref }
+		/>
+	);
+}
+
+export default forwardRef( PublicPublishDateTimePicker );
diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
@@ -40,6 +40,7 @@ import {
 import { requiresWrapperOnCopy } from './components/writing-flow/utils';
 import { PrivateRichText } from './components/rich-text/';
 import { PrivateBlockPopover } from './components/block-popover';
+import { PrivatePublishDateTimePicker } from './components/publish-date-time-picker';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -80,4 +81,5 @@ lock( privateApis, {
 	PrivateRichText,
 	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,11 @@ 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 />;
+}
+
+export function PrivatePostSchedule( { onClose, showPopoverHeaderActions } ) {
 	const { postDate, postType } = useSelect(
 		( select ) => ( {
 			postDate: select( editorStore ).getEditedPostAttribute( 'date' ),
@@ -77,7 +84,7 @@ export default function PostSchedule( { onClose } ) {
 	);
 
 	return (
-		<PublishDateTimePicker
+		<PrivatePublishDateTimePicker
 			currentDate={ postDate }
 			onChange={ onUpdateDate }
 			is12Hour={ is12HourTime }
@@ -86,6 +93,7 @@ export default function PostSchedule( { onClose } ) {
 				setPreviewedMonth( parseISO( date ) )
 			}
 			onClose={ onClose }
+			showPopoverHeaderActions={ showPopoverHeaderActions }
 		/>
 	);
 }
diff --git a/packages/editor/src/components/post-status/index.js b/packages/editor/src/components/post-status/index.js
@@ -27,7 +27,7 @@ import {
 	NAVIGATION_POST_TYPE,
 } from '../../store/constants';
 import PostPanelRow from '../post-panel-row';
-import PostSchedule from '../post-schedule';
+import { PrivatePostSchedule } from '../post-schedule';
 import { store as editorStore } from '../../store';
 
 const labels = {
@@ -228,7 +228,15 @@ export default function PostStatus() {
 												: status
 										}
 									/>
-									{ status === 'future' && <PostSchedule /> }
+									{ status === 'future' && (
+										<div className="editor-change-status__publish-date-wrapper">
+											<PrivatePostSchedule
+												showPopoverHeaderActions={
+													false
+												}
+											/>
+										</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;
 }