Blocks: Improve date display for schedule & sessions across timezones (…

…#696) * Blocks: Use format when calculating values for Schedule block `wp.date.format` will respect the client's timezone, and show the date in the viewer's timezone. The current `dateI18n` approach always uses the site timezone, which can be confusing for regional and online events. * Prefix the grid rules with the date In some cases, if a session spans later than midnight and ends at the same time as an earlier timeslot, it can cause the sessions to overlap because the grid slot is already defined. Prepending the date fixes this, since separate days have separate grid systems. * Add timezone to the sessions in Session and Speakers blocks This is mostly a workaround, instead of showing the user's time, but it's an improvement * Display row-heading date with timezone
WordPress · Sep 17, 2021 · e6072a6 · e6072a6
1 parent bc1e644
commit e6072a6
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 21 deletions.
diff --git a/public_html/wp-content/mu-plugins/blocks/source/blocks/schedule/data.js b/public_html/wp-content/mu-plugins/blocks/source/blocks/schedule/data.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { dateI18n } from '@wordpress/date';
+import { format } from '@wordpress/date';
 
 /**
  * Internal dependencies
@@ -447,7 +447,7 @@ function filterSessionsByChosenDays( sessions, chosenDays ) {
 	}
 
 	return sessions.filter( ( session ) => {
-		const date = dateI18n( DATE_SLUG_FORMAT, session.derived.startTime );
+		const date = format( DATE_SLUG_FORMAT, session.derived.startTime );
 		return chosenDays.includes( date );
 	} );
 

diff --git a/public_html/wp-content/mu-plugins/blocks/source/blocks/schedule/inspector-controls.js b/public_html/wp-content/mu-plugins/blocks/source/blocks/schedule/inspector-controls.js
@@ -3,7 +3,7 @@
  */
 import { InspectorControls } from '@wordpress/block-editor';
 import { CheckboxControl, PanelBody, ToggleControl } from '@wordpress/components';
-import { dateI18n, format } from '@wordpress/date';
+import { format } from '@wordpress/date';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -68,7 +68,7 @@ export default function ScheduleInspectorControls(
  */
 function getDisplayedDays( sessions ) {
 	let uniqueDays = sessions.reduce( ( accumulatingDays, session ) => {
-		accumulatingDays[ dateI18n( DATE_SLUG_FORMAT, session.derived.startTime ) ] = true;
+		accumulatingDays[ format( DATE_SLUG_FORMAT, session.derived.startTime ) ] = true;
 
 		return accumulatingDays;
 	}, {} );

diff --git a/public_html/wp-content/mu-plugins/blocks/source/blocks/schedule/schedule-grid.js b/public_html/wp-content/mu-plugins/blocks/source/blocks/schedule/schedule-grid.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { dateI18n, format } from '@wordpress/date';
+import { format } from '@wordpress/date';
 import { __, _x } from '@wordpress/i18n';
 import { createContext, useContext } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -77,7 +77,7 @@ function groupSessionsByDate( sessions ) {
 			return groups;
 		}
 
-		const date = dateI18n( 'Y-m-d', session.derived.startTime );
+		const date = format( 'Y-m-d', session.derived.startTime );
 
 		if ( date ) {
 			groups[ date ] = groups[ date ] || [];
@@ -386,7 +386,7 @@ function renderGridTemplateRows( startEndTimes ) {
 	startEndTimes.sort(); // Put them in chronological order.
 
 	const timeList = startEndTimes.reduce( ( accumulatingTimes, time ) => {
-		const formattedTime = dateI18n( 'Hi', time );
+		const formattedTime = format( 'dHi', time );
 
 		return accumulatingTimes += `[time-${ formattedTime }] auto `;
 	}, '' );

diff --git a/public_html/wp-content/mu-plugins/blocks/source/blocks/schedule/session.js b/public_html/wp-content/mu-plugins/blocks/source/blocks/schedule/session.js
@@ -7,7 +7,7 @@ import { isEqual } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { dateI18n } from '@wordpress/date';
+import { format } from '@wordpress/date';
 import { __, sprintf } from '@wordpress/i18n';
 import { createInterpolateElement, useContext } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -88,8 +88,8 @@ export function Session( { session, displayedTracks, showCategories, overlapsAno
 	`;
 
 	const gridRow = `
-		time-${ dateI18n( 'Hi', startTime ) } /
-		time-${ dateI18n( 'Hi', endTime ) }
+		time-${ format( 'dHi', startTime ) } /
+		time-${ format( 'dHi', endTime ) }
 	`;
 
 	return (
@@ -111,7 +111,8 @@ export function Session( { session, displayedTracks, showCategories, overlapsAno
 			</h4>
 
 			<p>
-				{ dateI18n( timeFormat, startTime ) } - { dateI18n( timeFormat, endTime ) }
+				{ format( timeFormat, startTime ) } -
+				{ format( timeFormat, endTime ) }
 			</p>
 
 			{ speakers.length > 0 && renderSpeakers( speakers, renderEnvironment ) }

diff --git a/public_html/wp-content/mu-plugins/blocks/source/blocks/schedule/sessions.js b/public_html/wp-content/mu-plugins/blocks/source/blocks/schedule/sessions.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { dateI18n } from '@wordpress/date';
+import { format } from '@wordpress/date';
 import { useContext } from '@wordpress/element';
 
 /**
@@ -26,8 +26,7 @@ import { sortBySlug } from './data';
  * @return {Element}
  */
 export function Sessions( { sessions, displayedTracks, overlappingSessions } ) {
-	const { attributes, settings } = useContext( ScheduleGridContext );
-	const { time_format: timeFormat } = settings;
+	const { attributes } = useContext( ScheduleGridContext );
 
 	const sessionsByTimeSlot = groupSessionsByTimeSlot( sessions );
 	const overlappingSessionIds = overlappingSessions.map( ( session ) => session.id );
@@ -42,18 +41,19 @@ export function Sessions( { sessions, displayedTracks, overlappingSessions } ) {
 		const endTime = parseInt( timeSlots[ i + 1 ] ) || 0;
 
 		const gridRow = `
-			time-${ dateI18n( 'Hi', startTime ) } /
-			time-${ dateI18n( 'Hi', endTime ) }
+			time-${ format( 'dHi', startTime ) } /
+			time-${ format( 'dHi', endTime ) }
 		`;
 
 		const classes = classnames(
 			'wordcamp-schedule__time-slot-header',
 			sessionsByTimeSlot[ currentSlot ].length ? 'has-sessions' : 'is-empty'
 		);
 
+		const date = new Date( startTime );
 		timeGroups.push(
 			<h3 key={ startTime } className={ classes } style={ { gridRow } }>
-				{ dateI18n( timeFormat, startTime ) }
+				{ date.toLocaleTimeString( [], { timeZoneName: 'short', hour: 'numeric', minute: '2-digit' } ) }
 			</h3>
 		);
 

diff --git a/public_html/wp-content/mu-plugins/blocks/source/blocks/sessions/view.php b/public_html/wp-content/mu-plugins/blocks/source/blocks/sessions/view.php
@@ -78,7 +78,7 @@ function( $speaker ) {
 							/* translators: 1: A date; 2: A time; 3: A location; */
 							esc_html__( '%1$s at %2$s in %3$s', 'wordcamporg' ),
 							esc_html( wp_date( get_option( 'date_format' ), $session->_wcpt_session_time ) ),
-							esc_html( wp_date( get_option( 'time_format' ), $session->_wcpt_session_time ) ),
+							esc_html( wp_date( get_option( 'time_format' ) . ' T', $session->_wcpt_session_time ) ),
 							sprintf(
 								'<span class="wordcamp-sessions__track slug-%s">%s</span>',
 								esc_attr( $tracks[0]->slug ),
@@ -91,7 +91,7 @@ function( $speaker ) {
 							/* translators: 1: A date; 2: A time; */
 							esc_html__( '%1$s at %2$s', 'wordcamporg' ),
 							esc_html( wp_date( get_option( 'date_format' ), $session->_wcpt_session_time ) ),
-							esc_html( wp_date( get_option( 'time_format' ), $session->_wcpt_session_time ) )
+							esc_html( wp_date( get_option( 'time_format' ) . ' T', $session->_wcpt_session_time ) )
 						);
 					endif; ?>
 				</div>

diff --git a/public_html/wp-content/mu-plugins/blocks/source/blocks/speakers/view.php b/public_html/wp-content/mu-plugins/blocks/source/blocks/speakers/view.php
@@ -68,7 +68,7 @@
 										/* translators: 1: A date; 2: A time; 3: A location; */
 										esc_html__( '%1$s at %2$s in %3$s', 'wordcamporg' ),
 										esc_html( wp_date( get_option( 'date_format' ), $session->_wcpt_session_time ) ),
-										esc_html( wp_date( get_option( 'time_format' ), $session->_wcpt_session_time ) ),
+										esc_html( wp_date( get_option( 'time_format' ) . ' T', $session->_wcpt_session_time ) ),
 										esc_html( $tracks[0]->name )
 									);
 								?>
@@ -79,7 +79,7 @@
 										/* translators: 1: A date; 2: A time; */
 										esc_html__( '%1$s at %2$s', 'wordcamporg' ),
 										esc_html( wp_date( get_option( 'date_format' ), $session->_wcpt_session_time ) ),
-										esc_html( wp_date( get_option( 'time_format' ), $session->_wcpt_session_time ) )
+										esc_html( wp_date( get_option( 'time_format' ) . ' T', $session->_wcpt_session_time ) )
 									);
 								?>
 							<?php endif; ?>