Design updates to the Publish popover (DateTimePicker)

packages/block-editor/src/components/index.js

@@ -147,6 +147,7 @@ export { default as useBlockDisplayInformation } from './use-block-display-infor
 export { default as __unstableIframe } from './iframe';
 export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursive-renders';
 export { default as __experimentalBlockPatternsList } from './block-patterns-list';
+export { default as __experimentalPublishDateTimePicker } from './publish-date-time-picker';
 
 /*
  * State Related Components

packages/block-editor/src/components/publish-date-time-picker/README.md

@@ -0,0 +1,52 @@
+# `PublishDateTimePicker`
+
+`<PublishDateTimePicker />` is a component used to select the date and time that
+a post will be published. It wraps the `<DateTimePicker />` component found in
+`@wordpress/components` and adds additional post-specific controls.
+
+See [the documentation for DateTimePicker](/packages/components/src/date-time)
+for more information.
+
+## Usage
+
+```jsx
+import { Dropdown, Button } from '@wordpress/components';
+import { __experimentalPublishDateTimePicker as PublishDateTimePicker } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+
+const MyDateTimePicker = () => {
+	const [ date, setDate ] = useState( new Date() );
+
+	return (
+		<Dropdown
+			renderToggle={ ( { isOpen, onToggle } ) => (
+				<Button
+					onClick={ onToggle }
+					aria-expanded={ isOpen }
+				>
+					Select post date
+				</Button>
+			) }
+			renderContent={ ( { onClose } ) => (
+				<PublishDateTimePicker
+					currentDate={ date }
+					onChange={ ( newDate ) => setDate( newDate ) }
+					onClose={ onClose }
+				/>
+			) }
+		/>
+	);
+};
+```
+
+## Props
+
+`PublishDateTimePicker` supports all of the props that
+[`DateTimePicker`](/packages/components/src/date-time#Props) supports, plus:
+
+### onClose
+
+Called when the user presses the close button.
+
+- Type: `Function`
+- Required: Yes

packages/block-editor/src/components/publish-date-time-picker/index.js

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	DateTimePicker,
+	__experimentalHStack as HStack,
+	__experimentalSpacer as Spacer,
+	Button,
+} from '@wordpress/components';
+import { closeSmall } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { forwardRef } from '@wordpress/element';
+
+function PublishDateTimePicker(
+	{ onClose, onChange, ...additionalProps },
+	ref
+) {
+	return (
+		<div ref={ ref } className="block-editor-publish-date-time-picker">
+			{ /* TODO: This header is essentially the same as the one in <PostVisiblity />. DRY it up. */ }
+			<HStack className="block-editor-publish-date-time-picker__header">
+				<h2 className="block-editor-publish-date-time-picker__heading">
+					{ __( 'Publish' ) }
+				</h2>
+				<Spacer />
+				<Button
+					className="block-editor-publish-date-time-picker__reset"
+					variant="tertiary"
+					onClick={ () => onChange?.( null ) }
+				>
+					{ __( 'Now' ) }
+				</Button>
+				<Button
+					className="block-editor-publish-date-time-picker__close"
+					icon={ closeSmall }
+					label={ __( 'Close' ) }
+					onClick={ onClose }
+				/>
+			</HStack>
+			<DateTimePicker
+				__nextRemoveHelpButton
+				__nextRemoveResetButton
+				onChange={ onChange }
+				{ ...additionalProps }
+			/>
+		</div>
+	);
+}
+
+export default forwardRef( PublishDateTimePicker );

packages/block-editor/src/components/publish-date-time-picker/style.scss

@@ -0,0 +1,20 @@
+.block-editor-publish-date-time-picker__header {
+	margin-bottom: 1em;
+}
+
+.block-editor-publish-date-time-picker__heading {
+	font-size: $default-font-size;
+	margin: 0;
+}
+
+.block-editor-publish-date-time-picker__reset {
+	height: $icon-size;
+	margin: 0;
+	text-decoration: underline;
+}
+
+[class].block-editor-publish-date-time-picker__close {
+	height: $icon-size;
+	min-width: $icon-size;
+	padding: 0;
+}

packages/block-editor/src/style.scss

@@ -42,6 +42,7 @@
 @import "./components/media-placeholder/style.scss";
 @import "./components/multi-selection-inspector/style.scss";
 @import "./components/plain-text/style.scss";
+@import "./components/publish-date-time-picker/style.scss";
 @import "./components/responsive-block-control/style.scss";
 @import "./components/rich-text/style.scss";
 @import "./components/skip-to-selected-block/style.scss";

packages/block-library/src/post-date/edit.js

@@ -18,13 +18,13 @@ import {
 	InspectorControls,
 	useBlockProps,
 	__experimentalDateFormatPicker as DateFormatPicker,
+	__experimentalPublishDateTimePicker as PublishDateTimePicker,
 } from '@wordpress/block-editor';
 import {
 	Dropdown,
 	ToolbarGroup,
 	ToolbarButton,
 	ToggleControl,
-	DateTimePicker,
 	PanelBody,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
@@ -101,13 +101,14 @@ export default function PostDateEdit( {
 					<ToolbarGroup>
 						<Dropdown
 							popoverProps={ { anchorRef: timeRef.current } }
-							renderContent={ () => (
-								<DateTimePicker
+							renderContent={ ( { onClose } ) => (
+								<PublishDateTimePicker
 									currentDate={ date }
 									onChange={ setDate }
 									is12Hour={ is12HourFormat(
 										siteTimeFormat
 									) }
+									onClose={ onClose }
 								/>
 							) }
 							renderToggle={ ( { isOpen, onToggle } ) => {

packages/components/CHANGELOG.md

@@ -11,6 +11,8 @@
 -   `SelectControl`: Add `__nextHasNoMarginBottom` prop for opting into the new margin-free styles ([#41269](https://github.com/WordPress/gutenberg/pull/41269)).
 -   `ColorPicker`: Strip leading hash character from hex values pasted into input. ([#41223](https://github.com/WordPress/gutenberg/pull/41223))
 -   `ColorPicker`: Display detailed color inputs by default. ([#41222](https://github.com/WordPress/gutenberg/pull/41222))
+-   Updated design for the `DateTimePicker`, `DatePicker` and `TimePicker` components ([#41097](https://github.com/WordPress/gutenberg/pull/41097)).
+-   `DateTimePicker`: Add `__nextRemoveHelpButton` and `__nextRemoveResetButton` for opting into new behaviour where there is no Help and Reset button ([#41097](https://github.com/WordPress/gutenberg/pull/41097)).
 
 ### Internal
 

packages/components/src/date-time/README.md

@@ -26,6 +26,8 @@ const MyDateTimePicker = () => {
 			currentDate={ date }
 			onChange={ ( newDate ) => setDate( newDate ) }
 			is12Hour={ true }
+			__nextRemoveHelpButton
+			__nextRemoveResetButton
 		/>
 	);
 };
@@ -74,3 +76,17 @@ List of events to show in the date picker. Each event will appear as a dot on th
 
 -   Type: `Array`
 -   Required: No
+
+### `__nextRemoveHelpButton`: `boolean`
+
+Start opting in to not displaying a Help button which will become the default in a future version.
+
+- Required: No
+- Default: `false`
+
+### `__nextRemoveResetButton`: `boolean`
+
+Start opting in to not displaying a Reset button which will become the default in a future version.
+
+- Required: No
+- Default: `false`