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.

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"
 }

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>';
 	}
 

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;
+	} );
+} );