From c7f5f957bd719d66d193210ba969ff8e46c37c7f Mon Sep 17 00:00:00 2001
From: ren <18050944+renintw@users.noreply.github.com>
Date: Thu, 7 Dec 2023 04:04:17 +0900
Subject: [PATCH] Events: Convert event-list timestamp.

Convert server-side Unix timestamps to a human-readable format and client-side timezone for the block WordPress Event List.
---
 .../wporg-events-2023/src/event-list/block.json   |  3 ++-
 .../wporg-events-2023/src/event-list/index.php    |  2 +-
 .../wporg-events-2023/src/event-list/view.js      | 15 +++++++++++++++
 3 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 public_html/wp-content/themes/wporg-events-2023/src/event-list/view.js

diff --git a/public_html/wp-content/themes/wporg-events-2023/src/event-list/block.json b/public_html/wp-content/themes/wporg-events-2023/src/event-list/block.json
index e90c17ef3b..f8c71d12a1 100644
--- a/public_html/wp-content/themes/wporg-events-2023/src/event-list/block.json
+++ b/public_html/wp-content/themes/wporg-events-2023/src/event-list/block.json
@@ -31,5 +31,6 @@
 		}
 	},
 	"editorScript": "file:./index.js",
-	"style": "file:./style-index.css"
+	"style": "file:./style-index.css",
+	"viewScript": "file:./view.js"
 }
diff --git a/public_html/wp-content/themes/wporg-events-2023/src/event-list/index.php b/public_html/wp-content/themes/wporg-events-2023/src/event-list/index.php
index 2f20dd6ba3..4552590efc 100644
--- a/public_html/wp-content/themes/wporg-events-2023/src/event-list/index.php
+++ b/public_html/wp-content/themes/wporg-events-2023/src/event-list/index.php
@@ -59,7 +59,7 @@ function render( $attributes, $content, $block ) {
 		$content .= '<li class="wporg-marker-list-item">';
 		$content .= '<h3 class="wporg-marker-list-item__title"><a class="external-link" href="' . esc_url( $event->url ) . ' ">' . esc_html( $event->title ) . '</a></h3>';
 		$content .= '<div class="wporg-marker-list-item__location">' . esc_html( $event->location ) . '</div>';
-		$content .= '<div class="wporg-marker-list-item__date-time">' . esc_html( $event->timestamp ) . '</div>';
+		$content .= '<div class="wporg-marker-list-item__date-time" data-wc-events-list-timestamp="' . esc_html( $event->timestamp ) . '"></div>';
 		$content .= '</li>';
 	}
 
diff --git a/public_html/wp-content/themes/wporg-events-2023/src/event-list/view.js b/public_html/wp-content/themes/wporg-events-2023/src/event-list/view.js
new file mode 100644
index 0000000000..71abb6bc25
--- /dev/null
+++ b/public_html/wp-content/themes/wporg-events-2023/src/event-list/view.js
@@ -0,0 +1,15 @@
+// Converts server-side Unix timestamps to a human-readable format and client-side timezone.
+window.addEventListener( 'load', () => {
+	const timeElements = document.querySelectorAll( '.wporg-marker-list__container .wporg-marker-list-item__date-time' );
+
+	timeElements.forEach( ( element ) => {
+		const timestamp = element.getAttribute( 'data-wc-events-list-timestamp' );
+		const options = {
+			year: 'numeric',
+			month: 'long',
+			day: 'numeric',
+		};
+		const localDate = new Date( parseInt( timestamp ) * 1000 ).toLocaleString( 'en-US', options );
+		element.textContent = localDate;
+	} );
+} );