Added datetime formatting to Events List block.

build/blocks/events-list/block.json

@@ -21,6 +21,10 @@
         "showVenue": true
       }
     },
+    "datetimeFormat": {
+      "type": "string",
+      "default": "D, M j, Y, g:i a T"
+    },
     "maxNumberOfEvents": {
       "type": "integer",
       "default": 5

build/blocks/events-list/events-list.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'wp-api-fetch', 'wp-components', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => '3604abe8943f95554574');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-api-fetch', 'wp-components', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => '102d9ce24cd27f5a1b3d');

build/blocks/events-list/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-core-data', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '4fec9a94e4a16f2a0a93');
+<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-core-data', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '7d75b0853ccb1fee0c70');

includes/core/classes/class-rest-api.php

@@ -232,6 +232,9 @@ protected function events_list_route(): array {
 						'required'          => true,
 						'validate_callback' => array( $this, 'validate_number' ),
 					),
+					'datetime_format' => array(
+						'required' => false,
+					),
 					'topics'          => array(
 						'required' => false,
 					),
@@ -520,6 +523,7 @@ public function events_list( WP_REST_Request $request ): WP_REST_Response {
 		$params          = $request->get_params();
 		$event_list_type = $params['event_list_type'];
 		$max_number      = $this->max_number( (int) $params['max_number'], 5 );
+		$datetime_format = ! empty( $params['datetime_format'] ) ? $params['datetime_format'] : 'D, M j, Y, g:i a T';
 		$posts           = array();
 		$topics          = array();
 		$venues          = array();
@@ -550,8 +554,8 @@ static function( $slug ): string {
 				$venue_information = $event->get_venue_information();
 				$posts[]           = array(
 					'ID'                       => $post_id,
-					'datetime_start'           => $event->get_datetime_start(),
-					'datetime_end'             => $event->get_datetime_end(),
+					'datetime_start'           => $event->get_datetime_start( $datetime_format ),
+					'datetime_end'             => $event->get_datetime_end( $datetime_format ),
 					'permalink'                => get_the_permalink( $post_id ),
 					'title'                    => get_the_title( $post_id ),
 					'excerpt'                  => get_the_excerpt( $post_id ),

src/blocks/events-list/block.json

@@ -21,6 +21,10 @@
 				"showVenue": true
 			}
 		},
+		"datetimeFormat": {
+			"type": "string",
+			"default": "D, M j, Y, g:i a T"
+		},
 		"maxNumberOfEvents": {
 			"type": "integer",
 			"default": 5

src/blocks/events-list/edit.js

@@ -3,6 +3,7 @@
  */
 import { includes } from 'lodash';
 import classnames from 'classnames';
+import HtmlReactParser from 'html-react-parser';
 
 /**
  * WordPress dependencies.
@@ -188,6 +189,19 @@ const Edit = (props) => {
 					</ButtonGroup>
 				</PanelBody>
 				<PanelBody>
+					<TextControl
+						label={__('Date & time format', 'gatherpress')}
+						value={attributes.datetimeFormat}
+						help={HtmlReactParser(
+							__(
+								'For more information read the <a href="https://wordpress.org/documentation/article/customize-date-and-time-format/">Documentation on date and time formatting</a>.',
+								'gatherpress'
+							)
+						)}
+						onChange={(newVal) =>
+							setAttributes({ datetimeFormat: newVal })
+						}
+					/>
 					<RangeControl
 						label={__(
 							'Maximum number of events to display',
@@ -362,6 +376,7 @@ const Edit = (props) => {
 					<EventsList
 						eventOptions={attributes.eventOptions}
 						maxNumberOfEvents={attributes.maxNumberOfEvents}
+						datetimeFormat={attributes.datetimeFormat}
 						type={attributes.type}
 						topics={attributes.topics}
 						venues={attributes.venues}

src/blocks/events-list/events-list.js

@@ -47,6 +47,7 @@ domReady(() => {
 				}
 				type={attrs.type ?? 'upcoming'}
 				maxNumberOfEvents={attrs.maxNumberOfEvents ?? 5}
+				datetimeFormat={attrs.datetimeFormat ?? 'D, M j, Y, g:i a T'}
 				topics={attrs.topics ?? []}
 			/>
 		);

src/components/EventsList.js

@@ -31,7 +31,14 @@ import apiFetch from '@wordpress/api-fetch';
  * @return {JSX.Element} The rendered React component.
  */
 const EventsList = (props) => {
-	const { eventOptions, maxNumberOfEvents, type, topics, venues } = props;
+	const {
+		eventOptions,
+		maxNumberOfEvents,
+		datetimeFormat,
+		type,
+		topics,
+		venues,
+	} = props;
 	const [events, setEvents] = useState([]);
 	const [loaded, setLoaded] = useState(false);
 	const renderEvents = events.map((event) => {
@@ -84,15 +91,15 @@ const EventsList = (props) => {
 		 */
 		if (getFromGlobal('is_user_logged_in')) {
 			apiFetch({
-				path: `/gatherpress/v1/event/events-list?event_list_type=${type}&max_number=${maxNumberOfEvents}&topics=${topicsString}&venues=${venuesString}`,
+				path: `/gatherpress/v1/event/events-list?event_list_type=${type}&max_number=${maxNumberOfEvents}&datetime_format=${datetimeFormat}&topics=${topicsString}&venues=${venuesString}`,
 			}).then((data) => {
 				setLoaded(true);
 				setEvents(data);
 			});
 		} else {
 			const endpoint =
 				getFromGlobal('event_rest_api') +
-				`/events-list?event_list_type=${type}&max_number=${maxNumberOfEvents}&topics=${topicsString}&venues=${venuesString}`;
+				`/events-list?event_list_type=${type}&max_number=${maxNumberOfEvents}&datetime_format=${datetimeFormat}&topics=${topicsString}&venues=${venuesString}`;
 
 			/**
 			 * Not using apiFetch helper here as it will use X-Wp-Nonce and cache it when page caching is on causing a 403.
@@ -108,7 +115,7 @@ const EventsList = (props) => {
 					setEvents(data);
 				});
 		}
-	}, [setEvents, maxNumberOfEvents, type, topics, venues]);
+	}, [setEvents, maxNumberOfEvents, datetimeFormat, type, topics, venues]);
 
 	return (
 		<div className={`gp-${type}-events-list`}>