Add custom date format controls

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

@@ -2,15 +2,17 @@
  * WordPress dependencies
  */
 import { useEntityProp } from '@wordpress/core-data';
-import { __experimentalGetSettings, dateI18n } from '@wordpress/date';
+import { dateI18n } from '@wordpress/date';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
-import {
-	PanelBody,
-	CustomSelectControl,
-	ToggleControl,
-} from '@wordpress/components';
+import { PanelBody, ToggleControl } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import DateFormatControls from '../post-date/date-format-controls';
+import { useDateFormat } from '../post-date/util';
+
 /**
  * Renders the `core/post-comment-date` block on the editor.
  *
@@ -32,32 +34,17 @@ export default function Edit( {
 } ) {
 	const blockProps = useBlockProps( { className } );
 	const [ date ] = useEntityProp( 'root', 'comment', 'date', commentId );
-	const [ siteDateFormat ] = useEntityProp( 'root', 'site', 'date_format' );
-
-	const settings = __experimentalGetSettings();
-	const formatOptions = Object.values( settings.formats ).map(
-		( formatOption ) => ( {
-			key: formatOption,
-			name: dateI18n( formatOption, date || new Date() ),
-		} )
-	);
-	const resolvedFormat = format || siteDateFormat || settings.formats.date;
+	const resolvedFormat = useDateFormat( format );
 
 	const inspectorControls = (
 		<InspectorControls>
 			<PanelBody title={ __( 'Format settings' ) }>
-				<CustomSelectControl
-					hideLabelFromVision
-					label={ __( 'Date Format' ) }
-					options={ formatOptions }
-					onChange={ ( { selectedItem } ) =>
-						setAttributes( {
-							format: selectedItem.key,
-						} )
+				<DateFormatControls
+					format={ format }
+					date={ date }
+					setFormat={ ( newFormat ) =>
+						setAttributes( { format: newFormat } )
 					}
-					value={ formatOptions.find(
-						( option ) => option.key === resolvedFormat
-					) }
 				/>
 			</PanelBody>
 			<PanelBody title={ __( 'Link settings' ) }>

packages/block-library/src/post-date/date-format-controls.js

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	CustomSelectControl,
+	TextControl,
+	PanelRow,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useDateFormatOptions, useDateFormat } from './util';
+
+export default function DateFormatControls( { format, setFormat, date } ) {
+	const formatOptions = useDateFormatOptions( date );
+	const resolvedFormat = useDateFormat( format );
+
+	const [ selectedFormat, setSelectedFormat ] = useState(
+		formatOptions[ resolvedFormat ] ? resolvedFormat : 'custom'
+	);
+
+	return (
+		<>
+			<PanelRow>
+				<CustomSelectControl
+					hideLabelFromVision
+					label={ __( 'Date Format' ) }
+					options={ Object.values( formatOptions ) }
+					onChange={ ( { selectedItem } ) => {
+						if ( selectedItem.key !== 'custom' ) {
+							setFormat( selectedItem.key );
+						}
+						setSelectedFormat( selectedItem.key );
+					} }
+					value={ formatOptions[ selectedFormat ] }
+				/>
+			</PanelRow>
+			{ selectedFormat === 'custom' && (
+				<PanelRow>
+					<TextControl
+						label={ __( 'Custom format' ) }
+						value={ format }
+						onChange={ setFormat }
+					/>
+				</PanelRow>
+			) }
+		</>
+	);
+}

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

@@ -22,19 +22,23 @@ import {
 	ToggleControl,
 	DateTimePicker,
 	PanelBody,
-	CustomSelectControl,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { edit } from '@wordpress/icons';
 import { DOWN } from '@wordpress/keycodes';
 
+/**
+ * Internal dependencies
+ */
+import DateFormatControls from './date-format-controls';
+import { useDateFormat } from './util';
+
 export default function PostDateEdit( {
 	attributes: { textAlign, format, isLink },
 	context: { postId, postType, queryId },
 	setAttributes,
 } ) {
 	const isDescendentOfQueryLoop = !! queryId;
-	const [ siteFormat ] = useEntityProp( 'root', 'site', 'date_format' );
 	const [ date, setDate ] = useEntityProp(
 		'postType',
 		postType,
@@ -52,13 +56,7 @@ export default function PostDateEdit( {
 			.reverse()
 			.join( '' ) // Reverse the string and test for "a" not followed by a slash.
 	);
-	const formatOptions = Object.values( settings.formats ).map(
-		( formatOption ) => ( {
-			key: formatOption,
-			name: dateI18n( formatOption, date ),
-		} )
-	);
-	const resolvedFormat = format || siteFormat || settings.formats.date;
+	const resolvedFormat = useDateFormat( format );
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
@@ -129,18 +127,12 @@ export default function PostDateEdit( {
 
 			<InspectorControls>
 				<PanelBody title={ __( 'Format settings' ) }>
-					<CustomSelectControl
-						hideLabelFromVision
-						label={ __( 'Date Format' ) }
-						options={ formatOptions }
-						onChange={ ( { selectedItem } ) =>
-							setAttributes( {
-								format: selectedItem.key,
-							} )
+					<DateFormatControls
+						format={ format }
+						date={ date }
+						setFormat={ ( newFormat ) =>
+							setAttributes( { format: newFormat } )
 						}
-						value={ formatOptions.find(
-							( option ) => option.key === resolvedFormat
-						) }
 					/>
 				</PanelBody>
 				<PanelBody title={ __( 'Link settings' ) }>

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

@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalGetSettings, dateI18n } from '@wordpress/date';
+import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useEntityProp } from '@wordpress/core-data';
+
+/**
+ * @typedef FormatOption
+ * @property {string} key  Date format. (e.g. 'F j, Y')
+ * @property {string} name String to display to a user for format given by key.
+ */
+
+/**
+ * Returns an object that maps format keys (e.g. 'F j, Y') to options usable in
+ * the CustomSelectElement for that format.
+ *
+ * @param {*} date Date value to format.
+ * @return {Object<string, FormatOption>} Format options.
+ */
+export function useDateFormatOptions( date ) {
+	const settings = __experimentalGetSettings();
+	const formatOptions = useMemo( () => {
+		const o = Object.values( settings.formats ).reduce(
+			( acc, formatOption ) => {
+				return {
+					...acc,
+					[ formatOption ]: {
+						key: formatOption,
+						name: dateI18n( formatOption, date ),
+					},
+				};
+			},
+			{}
+		);
+		o.custom = { key: 'custom', name: __( 'Custom' ) };
+		return o;
+	}, [ settings.formats ] );
+	return formatOptions;
+}
+
+/**
+ * Get the date format (e.g. 'F j, Y'), which is set, in that order of priority,
+ * by: the format parameter, WordPress settings, or a default from @wordpress/date.
+ *
+ * @param {string} format Current format set by block attributes.
+ * @return {string} Date format resolved against defaults.
+ */
+export function useDateFormat( format ) {
+	const settings = __experimentalGetSettings();
+	const [ siteFormat ] = useEntityProp( 'root', 'site', 'date_format' );
+	return format || siteFormat || settings.formats.date;
+}