Extract header used in PostVisibility and PublishDateTimePicker to a new InspectorPopoverHeader component

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

@@ -149,6 +149,7 @@ 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';
+export { default as __experimentalInspectorPopoverHeader } from './inspector-popover-header';
 
 /*
  * State Related Components

packages/block-editor/src/components/inspector-popover-header/README.md

@@ -0,0 +1,76 @@
+# `InspectorPopoverHeader`
+
+`<InspectorPopoverHeader />` renders a header that is suitable for use in an
+inspector sidebar popover. For example, it is used to implement the Visibility,
+Publish, Author, etc. popovers in the post sidebar. It displays a title,
+optional action buttons, an optional close button, and optional help text.
+
+## Usage
+
+```jsx
+const MyPostDatePopover = () => {
+	return (
+		<Dropdown
+			renderToggle={ ( { isOpen, onToggle } ) => (
+				<Button
+					onClick={ onToggle }
+					aria-expanded={ isOpen }
+				>
+					Select post date
+				</Button>
+			) }
+			renderContent={ ( { onClose } ) => (
+				<>
+					<InspectorPopoverHeader
+						title="Post date"
+						actions={ [
+							{
+								label: 'Reset',
+								onClick: () => {},
+							},
+						] }
+						onClose={ onClose }
+					/>
+					Place form for editing post date here
+				</>
+			) }
+		/>
+	);
+};
+```
+
+## Props
+
+### title
+
+Title to display in the header.
+
+- Type: `String`
+- Required: Yes
+
+### actions
+
+Array of actions to display in the header as a row of buttons. Each item in the
+array must be an object and contains:
+
+- `label`: String. Required. The action button's label.
+- `icon`: Element. Optional. If specified, an icon button will be shown.
+- `onClick`: Function. Optional. Called when the action button is clicked.
+
+- Type: `Array`
+- Required: No
+
+### onClose
+
+Called when the user presses the close button. If not provided, no close button
+will appear.
+
+- Type: `Function`
+- Required: No
+
+## help
+
+Help text to display at the bottom of the header.
+
+- Type: `String`
+- Required: No

packages/block-editor/src/components/inspector-popover-header/index.js

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
+	__experimentalSpacer as Spacer,
+	Button,
+	__experimentalText as Text,
+} from '@wordpress/components';
+import { closeSmall } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+export default function InspectorPopoverHeader( {
+	title,
+	help,
+	actions = [],
+	onClose,
+} ) {
+	return (
+		<VStack className="block-editor-inspector-popover-header" spacing={ 4 }>
+			<HStack alignment="center">
+				<Heading
+					className="block-editor-inspector-popover-header__heading"
+					level={ 2 }
+					size={ 13 }
+				>
+					{ title }
+				</Heading>
+				<Spacer />
+				{ actions.map( ( { label, icon, onClick } ) => (
+					<Button
+						key={ label }
+						className="block-editor-inspector-popover-header__action"
+						label={ label }
+						icon={ icon }
+						variant={ ! icon && 'tertiary' }
+						onClick={ onClick }
+					>
+						{ ! icon && label }
+					</Button>
+				) ) }
+				{ onClose && (
+					<Button
+						className="block-editor-inspector-popover-header__action"
+						label={ __( 'Close' ) }
+						icon={ closeSmall }
+						onClick={ onClose }
+					/>
+				) }
+			</HStack>
+			{ help && <Text>{ help }</Text> }
+		</VStack>
+	);
+}

packages/block-editor/src/components/inspector-popover-header/style.scss

@@ -0,0 +1,16 @@
+.block-editor-inspector-popover-header {
+	margin-bottom: $grid-unit-20;
+}
+
+[class].block-editor-inspector-popover-header__action {
+	height: $icon-size;
+
+	&.has-icon {
+		min-width: $icon-size;
+		padding: 0;
+	}
+
+	&:not(.has-icon) {
+		text-decoration: underline;
+	}
+}

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

@@ -49,4 +49,4 @@ const MyDateTimePicker = () => {
 Called when the user presses the close button.
 
 - Type: `Function`
-- Required: Yes
+- Required: No

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

@@ -1,42 +1,31 @@
 /**
  * WordPress dependencies
  */
-import {
-	DateTimePicker,
-	__experimentalHStack as HStack,
-	__experimentalSpacer as Spacer,
-	Button,
-} from '@wordpress/components';
-import { closeSmall } from '@wordpress/icons';
+import { DateTimePicker } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { forwardRef } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import InspectorPopoverHeader from '../inspector-popover-header';
+
 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>
+			<InspectorPopoverHeader
+				title={ __( 'Publish' ) }
+				actions={ [
+					{
+						label: __( 'Now' ),
+						onClick: () => onChange?.( null ),
+					},
+				] }
+				onClose={ onClose }
+			/>
 			<DateTimePicker
 				__nextRemoveHelpButton
 				__nextRemoveResetButton

packages/block-editor/src/style.scss

@@ -35,14 +35,14 @@
 @import "./components/image-size-control/style.scss";
 @import "./components/inner-blocks/style.scss";
 @import "./components/inserter-list-item/style.scss";
+@import "./components/inspector-popover-header/style.scss";
 @import "./components/justify-content-control/style.scss";
 @import "./components/link-control/style.scss";
 @import "./components/list-view/style.scss";
 @import "./components/media-replace-flow/style.scss";
 @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/e2e-tests/specs/editor/various/datepicker.test.js

@@ -138,7 +138,9 @@ describe.each( [ [ 'UTC-10' ], [ 'UTC' ], [ 'UTC+10' ] ] )(
 			await page.click( '.edit-post-post-schedule__toggle' );
 
 			// Clear the date.
-			await page.click( '.block-editor-publish-date-time-picker__reset' );
+			await page.click(
+				'.block-editor-publish-date-time-picker button[aria-label="Now"]'
+			);
 
 			const publishingDate = await getPublishingDate();
 

packages/edit-post/src/components/sidebar/post-visibility/style.scss

@@ -11,4 +11,5 @@
 .edit-post-post-visibility__dialog .components-popover__content {
 	// sidebar width - padding - horizontal borders
 	width: $sidebar-width - $grid-unit-20 - $border-width * 2;
+	padding: $grid-unit-20;
 }

packages/editor/src/components/post-visibility/index.js

@@ -6,11 +6,10 @@ import { useState } from '@wordpress/element';
 import {
 	VisuallyHidden,
 	__experimentalConfirmDialog as ConfirmDialog,
-	Button,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { close as closeIcon } from '@wordpress/icons';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -71,19 +70,15 @@ export default function PostVisibility( { onClose } ) {
 
 	return (
 		<>
-			<Button
-				className="editor-post-visibility__close"
-				isSmall
-				icon={ closeIcon }
-				onClick={ onClose }
+			<InspectorPopoverHeader
+				title={ __( 'Visibility' ) }
+				help={ __( 'Control how this post is viewed.' ) }
+				onClose={ onClose }
 			/>
 			<fieldset className="editor-post-visibility__fieldset">
-				<legend className="editor-post-visibility__legend">
+				<VisuallyHidden as="legend">
 					{ __( 'Visibility' ) }
-				</legend>
-				<p className="editor-post-visibility__description">
-					{ __( 'Control how this post is viewed.' ) }
-				</p>
+				</VisuallyHidden>
 				<PostVisibilityChoice
 					instanceId={ instanceId }
 					value="public"

packages/editor/src/components/post-visibility/style.scss

@@ -1,21 +1,4 @@
-.editor-post-visibility__close {
-	position: absolute;
-	right: $grid-unit-20;
-	top: $grid-unit-20;
-}
-
 .editor-post-visibility__fieldset {
-	padding: $grid-unit-10;
-
-	.editor-post-visibility__legend {
-		font-weight: 600;
-		padding: 1em 0 0 0;
-	}
-
-	.editor-post-visibility__description {
-		margin-top: 0.5em;
-	}
-
 	.editor-post-visibility__radio[type="radio"] {
 		@include radio-control;
 		margin-top: 2px;