From 2e813e4cd260ed0ffd44c935b0438e24098d9349 Mon Sep 17 00:00:00 2001
From: epiqueras <epiquerass@gmail.com>
Date: Thu, 23 Jan 2020 20:55:32 -0500
Subject: [PATCH 1/3] Block Library: Add features to the Post Date block.

---
 .../block-library/src/post-date/block.json    |  7 ++-
 packages/block-library/src/post-date/edit.js  | 55 +++++++++++++++++--
 .../block-library/src/post-date/index.php     | 14 ++++-
 3 files changed, 67 insertions(+), 9 deletions(-)

diff --git a/packages/block-library/src/post-date/block.json b/packages/block-library/src/post-date/block.json
index 3e14e60aaf3e49..4944de0ff2668f 100644
--- a/packages/block-library/src/post-date/block.json
+++ b/packages/block-library/src/post-date/block.json
@@ -1,4 +1,9 @@
 {
 	"name": "core/post-date",
-	"category": "layout"
+	"category": "layout",
+	"attributes": {
+		"format": {
+			"type": "string"
+		}
+	}
 }
diff --git a/packages/block-library/src/post-date/edit.js b/packages/block-library/src/post-date/edit.js
index b677d57d002b82..4667f4f090b82f 100644
--- a/packages/block-library/src/post-date/edit.js
+++ b/packages/block-library/src/post-date/edit.js
@@ -3,24 +3,67 @@
  */
 import { useEntityProp, useEntityId } from '@wordpress/core-data';
 import { __experimentalGetSettings, dateI18n } from '@wordpress/date';
+import { Popover, DateTimePicker, ToolbarGroup } from '@wordpress/components';
+import { BlockControls } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
-function PostDateDisplay() {
-	const [ date ] = useEntityProp( 'postType', 'post', 'date' );
+function PostDateEditor( { format, setAttributes, isSelected } ) {
+	const [ siteFormat ] = useEntityProp( 'root', 'site', 'date_format' );
+	const [ date, setDate ] = useEntityProp( 'postType', 'post', 'date' );
 	const settings = __experimentalGetSettings();
-
+	const is12Hour = /a(?!\\)/i.test(
+		settings.formats.time
+			.toLowerCase()
+			.replace( /\\\\/g, '' )
+			.split( '' )
+			.reverse()
+			.join( '' )
+	);
 	return date ? (
 		<time dateTime={ dateI18n( 'c', date ) }>
-			{ dateI18n( settings.formats.date, date ) }
+			{ dateI18n( format || siteFormat || settings.formats.date, date ) }
+			{ isSelected && (
+				<Popover>
+					<DateTimePicker
+						currentDate={ date }
+						onChange={ setDate }
+						is12Hour={ is12Hour }
+					/>
+				</Popover>
+			) }
+			<BlockControls>
+				<ToolbarGroup
+					icon="edit"
+					title={ __( 'Date Format' ) }
+					controls={ Object.keys( settings.formats ).map( ( formatKey ) => ( {
+						title: dateI18n( settings.formats[ formatKey ], date ),
+						onClick() {
+							setAttributes( { format: settings.formats[ formatKey ] } );
+						},
+						isActive: settings.formats[ formatKey ] === format,
+					} ) ) }
+					isCollapsed
+				/>
+			</BlockControls>
 		</time>
 	) : (
 		__( 'No Date' )
 	);
 }
 
-export default function PostDateEdit() {
+export default function PostDateEdit( {
+	attributes: { format },
+	setAttributes,
+	isSelected,
+} ) {
 	if ( ! useEntityId( 'postType', 'post' ) ) {
 		return 'Post Date Placeholder';
 	}
-	return <PostDateDisplay />;
+	return (
+		<PostDateEditor
+			format={ format }
+			setAttributes={ setAttributes }
+			isSelected={ isSelected }
+		/>
+	);
 }
diff --git a/packages/block-library/src/post-date/index.php b/packages/block-library/src/post-date/index.php
index 25914a0fe62557..56052e0d00a0e6 100644
--- a/packages/block-library/src/post-date/index.php
+++ b/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',
 		)
 	);

From 7d510fc34c97eebd46b6d8a4cb0af47e5a067559 Mon Sep 17 00:00:00 2001
From: epiqueras <epiquerass@gmail.com>
Date: Mon, 17 Feb 2020 10:41:20 -0800
Subject: [PATCH 2/3] Block Library: Redesign new Post Date block features.

---
 packages/block-library/src/post-date/edit.js | 81 +++++++++++++-------
 1 file changed, 53 insertions(+), 28 deletions(-)

diff --git a/packages/block-library/src/post-date/edit.js b/packages/block-library/src/post-date/edit.js
index 4667f4f090b82f..4ef5a6d6d584d7 100644
--- a/packages/block-library/src/post-date/edit.js
+++ b/packages/block-library/src/post-date/edit.js
@@ -2,14 +2,23 @@
  * WordPress dependencies
  */
 import { useEntityProp, useEntityId } from '@wordpress/core-data';
+import { useState } from '@wordpress/element';
 import { __experimentalGetSettings, dateI18n } from '@wordpress/date';
-import { Popover, DateTimePicker, ToolbarGroup } from '@wordpress/components';
-import { BlockControls } from '@wordpress/block-editor';
+import { BlockControls, InspectorControls } from '@wordpress/block-editor';
+import {
+	ToolbarGroup,
+	ToolbarButton,
+	Popover,
+	DateTimePicker,
+	PanelBody,
+	CustomSelectControl,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-function PostDateEditor( { format, setAttributes, isSelected } ) {
+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();
 	const is12Hour = /a(?!\\)/i.test(
 		settings.formats.time
@@ -19,11 +28,31 @@ function PostDateEditor( { format, setAttributes, isSelected } ) {
 			.reverse()
 			.join( '' )
 	);
+	const formatOptions = Object.keys( settings.formats ).map(
+		( formatKey ) => ( {
+			key: settings.formats[ formatKey ],
+			name: dateI18n( settings.formats[ formatKey ], date ),
+		} )
+	);
+	const resolvedFormat = format || siteFormat || settings.formats.date;
 	return date ? (
 		<time dateTime={ dateI18n( 'c', date ) }>
-			{ dateI18n( format || siteFormat || settings.formats.date, date ) }
-			{ isSelected && (
-				<Popover>
+			<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 }
@@ -31,20 +60,23 @@ function PostDateEditor( { format, setAttributes, isSelected } ) {
 					/>
 				</Popover>
 			) }
-			<BlockControls>
-				<ToolbarGroup
-					icon="edit"
-					title={ __( 'Date Format' ) }
-					controls={ Object.keys( settings.formats ).map( ( formatKey ) => ( {
-						title: dateI18n( settings.formats[ formatKey ], date ),
-						onClick() {
-							setAttributes( { format: settings.formats[ formatKey ] } );
-						},
-						isActive: settings.formats[ formatKey ] === format,
-					} ) ) }
-					isCollapsed
-				/>
-			</BlockControls>
+			<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' )
@@ -54,16 +86,9 @@ function PostDateEditor( { format, setAttributes, isSelected } ) {
 export default function PostDateEdit( {
 	attributes: { format },
 	setAttributes,
-	isSelected,
 } ) {
 	if ( ! useEntityId( 'postType', 'post' ) ) {
 		return 'Post Date Placeholder';
 	}
-	return (
-		<PostDateEditor
-			format={ format }
-			setAttributes={ setAttributes }
-			isSelected={ isSelected }
-		/>
-	);
+	return <PostDateEditor format={ format } setAttributes={ setAttributes } />;
 }

From b7854bbd47a29035005786282af7f92911d504d8 Mon Sep 17 00:00:00 2001
From: epiqueras <epiquerass@gmail.com>
Date: Fri, 21 Feb 2020 06:22:57 -0800
Subject: [PATCH 3/3] Comments and Style

---
 packages/block-library/src/post-date/edit.js | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/post-date/edit.js b/packages/block-library/src/post-date/edit.js
index 4ef5a6d6d584d7..5c04fe66cbb091 100644
--- a/packages/block-library/src/post-date/edit.js
+++ b/packages/block-library/src/post-date/edit.js
@@ -20,18 +20,20 @@ function PostDateEditor( { format, setAttributes } ) {
 	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()
-			.replace( /\\\\/g, '' )
+			.toLowerCase() // Test only for the lower case "a".
+			.replace( /\\\\/g, '' ) // Replace "//" with empty strings.
 			.split( '' )
 			.reverse()
-			.join( '' )
+			.join( '' ) // Reverse the string and test for "a" not followed by a slash.
 	);
-	const formatOptions = Object.keys( settings.formats ).map(
-		( formatKey ) => ( {
-			key: settings.formats[ formatKey ],
-			name: dateI18n( settings.formats[ formatKey ], date ),
+	const formatOptions = Object.values( settings.formats ).map(
+		( formatOption ) => ( {
+			key: formatOption,
+			name: dateI18n( formatOption, date ),
 		} )
 	);
 	const resolvedFormat = format || siteFormat || settings.formats.date;