Events: Swap out google maps on homepage for event list. (#1133)

WordPress · Dec 7, 2023 · eb2aa33 · eb2aa33
1 parent c8b020d
commit eb2aa33
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 29 deletions.
diff --git a/public_html/wp-content/themes/wporg-events-2023/patterns/front-events.php b/public_html/wp-content/themes/wporg-events-2023/patterns/front-events.php
@@ -15,7 +15,7 @@
 
 <!-- wp:pattern {"slug":"wporg-events-2023/event-list-filters"} /-->
 
-<!-- wp:wporg/google-map {"id":"all-upcoming-list","apiKey":"WORDCAMP_DEV_GOOGLE_MAPS_API_KEY","filterSlug":"all-upcoming","showMap":false,"showSearch":false,"listDisplayLimit":10} /-->
+<!-- wp:wporg/event-list {"limit": "10"} /-->
 
 <!-- wp:buttons {"style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}}}} -->
 <div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--40)"><!-- wp:button {"className":"is-style-outline"} -->

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
@@ -13,6 +13,10 @@
 			"type": "string",
 			"default": "all-upcoming"
 		},
+		"groupByMonth": {
+			"type": "boolean",
+			"default": false
+		},
 		"limit": {
 			"type": "number",
 			"default": 100

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
@@ -45,43 +45,59 @@ function render( $attributes, $content, $block ) {
 	// Get all the filters that are currently applied.
 	$filtered_events = array_slice( filter_events( $events ), 0, (int) $attributes['limit'] );
 
-	// Group events by month year.
-	$grouped_events = array();
-	foreach ( $filtered_events as $event ) {
-		$event_month_year                      = gmdate('F Y', esc_html( $event->timestamp) );
-		$grouped_events[ $event_month_year ][] = $event;
-	}
-
-	foreach ( $grouped_events as $month_year => $events ) {
-		$content .= get_section_title( $month_year );
-		$content .= '<ul class="wporg-marker-list__container">';
-
-		foreach ( $events as $event ) {
-			$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 .= sprintf(
-				'<time class="wporg-marker-list-item__date-time" date-time="%1$s" title="%1$s"><span class="wporg-google-map__date">%2$s</span><span class="wporg-google-map__time">%3$s</span></time>',
-				gmdate( 'c', esc_html( $event->timestamp ) ),
-				gmdate( 'l, M j', esc_html( $event->timestamp ) ),
-				esc_html( gmdate('H:i', $event->timestamp) . ' UTC' ),
-			);
-			$content .= '</li>';
+	if ( (bool) $attributes['groupByMonth'] ) {
+		// Group events by month year.
+		$grouped_events = array();
+		foreach ( $filtered_events as $event ) {
+			$event_month_year                      = gmdate( 'F Y', esc_html( $event->timestamp ) );
+			$grouped_events[ $event_month_year ][] = $event;
 		}
 
-		$content .= '</ul>';
+		$content = '';
+		foreach ( $grouped_events as $month_year => $events ) {
+			$content .= get_section_title( $month_year );
+			$content .= get_list_markup( $events );
+		}
+	} else {
+		$content = get_list_markup( $filtered_events );
 	}
 
-	$wrapper_attributes = get_block_wrapper_attributes( array(
-		'class' => 'wp-block-wporg-google-map',
-	) );
+	$wrapper_attributes = get_block_wrapper_attributes();
 	return sprintf(
 		'<div %1$s>%2$s</div>',
 		$wrapper_attributes,
 		do_blocks( $content )
 	);
 }
 
+/**
+ * Returns the event-list markup.
+ *
+ * @param array $events Array of events.
+ *
+ * @return string
+ */
+function get_list_markup( $events ) {
+	$block_markup = '<ul class="wporg-marker-list__container">';
+
+	foreach ( $events as $event ) {
+		$block_markup .= '<li class="wporg-marker-list-item">';
+		$block_markup .= '<h3 class="wporg-marker-list-item__title"><a class="external-link" href="' . esc_url( $event->url ) . '">' . esc_html( $event->title ) . '</a></h3>';
+		$block_markup .= '<div class="wporg-marker-list-item__location">' . esc_html( $event->location ) . '</div>';
+		$block_markup .= sprintf(
+			'<time class="wporg-marker-list-item__date-time" date-time="%1$s" title="%1$s"><span class="wporg-google-map__date">%2$s</span><span class="wporg-google-map__time">%3$s</span></time>',
+			gmdate( 'c', esc_html( $event->timestamp ) ),
+			gmdate( 'l, M j', esc_html( $event->timestamp ) ),
+			esc_html( gmdate('H:i', $event->timestamp) . ' UTC' ),
+		);
+		$block_markup .= '</li>';
+	}
+
+	$block_markup .= '</ul>';
+
+	return $block_markup;
+}
+
 /**
  * Get the query var facts and sanitize them.
  *

diff --git a/public_html/wp-content/themes/wporg-events-2023/templates/page-upcoming.html b/public_html/wp-content/themes/wporg-events-2023/templates/page-upcoming.html
@@ -13,7 +13,7 @@
 		<!-- /wp:group -->
 
 		<!-- wp:pattern {"slug":"wporg-events-2023/event-list-filters"} /-->
-		<!-- wp:wporg/event-list {"limit": "500"} /-->
+		<!-- wp:wporg/event-list {"groupByMonth":"true","limit":"500"} /-->
 	</div>
 	<!-- /wp:group -->
 </main>

diff --git a/public_html/wp-content/themes/wporg-events-2023/templates/search.html b/public_html/wp-content/themes/wporg-events-2023/templates/search.html
@@ -11,7 +11,7 @@
 		style="padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--edge-space)">
 
 		<!-- wp:pattern {"slug":"wporg-events-2023/event-list-filters"} /-->
-		<!-- wp:wporg/event-list {"limit": "500"} /-->
+		<!-- wp:wporg/event-list {"groupByMonth":"true","limit":"500"} /-->
 	</div>
 	<!-- /wp:group -->
 </main>