Block Library: Add features to the Post Date block.

packages/block-library/src/post-date/block.json

@@ -1,4 +1,9 @@
 {
 	"name": "core/post-date",
-	"category": "layout"
+	"category": "layout",
+	"attributes": {
+		"format": {
+			"type": "string"
+		}
+	}
 }

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

@@ -2,25 +2,95 @@
  * WordPress dependencies
  */
 import { useEntityProp, useEntityId } from '@wordpress/core-data';
+import { useState } from '@wordpress/element';
 import { __experimentalGetSettings, dateI18n } from '@wordpress/date';
+import { BlockControls, InspectorControls } from '@wordpress/block-editor';
+import {
+	ToolbarGroup,
+	ToolbarButton,
+	Popover,
+	DateTimePicker,
+	PanelBody,
+	CustomSelectControl,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-function PostDateDisplay() {
-	const [ date ] = useEntityProp( 'postType', 'post', 'date' );
+function PostDateEditor( { format, setAttributes } ) {
+	const [ siteFormat ] = useEntityProp( 'root', 'site', 'date_format' );
+	const [ date, setDate ] = useEntityProp( 'postType', 'post', 'date' );
+	const [ isPickerOpen, setIsPickerOpen ] = useState( false );
 	const settings = __experimentalGetSettings();
-
+	// To know if the current time format is a 12 hour time, look for "a".
+	// Also make sure this "a" is not escaped by a "/".
+	const is12Hour = /a(?!\\)/i.test(
+		settings.formats.time
+			.toLowerCase() // Test only for the lower case "a".
+			.replace( /\\\\/g, '' ) // Replace "//" with empty strings.
+			.split( '' )
+			.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;
 	return date ? (
 		<time dateTime={ dateI18n( 'c', date ) }>
-			{ dateI18n( settings.formats.date, date ) }
+			<BlockControls>
+				<ToolbarGroup>
+					<ToolbarButton
+						icon="edit"
+						title={ __( 'Change Date' ) }
+						onClick={ () =>
+							setIsPickerOpen(
+								( _isPickerOpen ) => ! _isPickerOpen
+							)
+						}
+					/>
+				</ToolbarGroup>
+			</BlockControls>
+			{ dateI18n( resolvedFormat, date ) }
+			{ isPickerOpen && (
+				<Popover onClose={ setIsPickerOpen.bind( null, false ) }>
+					<DateTimePicker
+						currentDate={ date }
+						onChange={ setDate }
+						is12Hour={ is12Hour }
+					/>
+				</Popover>
+			) }
+			<InspectorControls>
+				<PanelBody title={ __( 'Format settings' ) }>
+					<CustomSelectControl
+						hideLabelFromVision
+						label={ __( 'Date Format' ) }
+						options={ formatOptions }
+						onChange={ ( { selectedItem } ) =>
+							setAttributes( {
+								format: selectedItem.key,
+							} )
+						}
+						value={ formatOptions.find(
+							( option ) => option.key === resolvedFormat
+						) }
+					/>
+				</PanelBody>
+			</InspectorControls>
 		</time>
 	) : (
 		__( 'No Date' )
 	);
 }
 
-export default function PostDateEdit() {
+export default function PostDateEdit( {
+	attributes: { format },
+	setAttributes,
+} ) {
 	if ( ! useEntityId( 'postType', 'post' ) ) {
 		return 'Post Date Placeholder';
 	}
-	return <PostDateDisplay />;
+	return <PostDateEditor format={ format } setAttributes={ setAttributes } />;
 }

packages/block-library/src/post-date/index.php

@@ -8,14 +8,19 @@
 /**
  * Renders the `core/post-date` block on the server.
  *
+ * @param array $attributes The block attributes.
+ *
  * @return string Returns the filtered post date for the current post wrapped inside "time" tags.
  */
-function render_block_core_post_date() {
+function render_block_core_post_date( $attributes ) {
 	$post = gutenberg_get_post_from_context();
 	if ( ! $post ) {
 		return '';
 	}
-	return '<time datetime="' . get_the_date( 'c', $post ) . '">' . get_the_date( '', $post ) . '</time>';
+	return '<time datetime="'
+		. get_the_date( 'c', $post ) . '">'
+		. get_the_date( isset( $attributes['format'] ) ? $attributes['format'] : '', $post )
+		. '</time>';
 }
 
 /**
@@ -25,6 +30,11 @@ function register_block_core_post_date() {
 	register_block_type(
 		'core/post-date',
 		array(
+			'attributes'      => array(
+				'format' => array(
+					'type' => 'string',
+				),
+			),
 			'render_callback' => 'render_block_core_post_date',
 		)
 	);