Events: Show upcoming events close to the visitor

Author: iandunn

public_html/wp-content/themes/wporg-events-2023/images/close.svg

@@ -1,7 +1,7 @@
 <?php
 /**
- * Title: Events List Filters
- * Slug: wporg-events-2023/event-list-filters
+ * Title: Event List Filters
+ * Slug: wporg-events-2023/event-list-filters-with-nearby
  * Inserter: no
  */
 
@@ -14,6 +14,18 @@
 		<!-- wp:search {"showLabel":false,"placeholder":"Search events...","width":100,"widthUnit":"%","buttonText":"Search","buttonPosition":"button-inside","buttonUseIcon":true,"className":"is-style-secondary-search-control"} /-->
 	</div> <!-- /wp:group -->
 
+	<!-- wp:html {"className":"wporg-events__nearby-chips"} -->
+	<div class="wp-block-buttons wporg-events__nearby-chips">
+		<button id="wporg-events__see-global">
+			Showing events near me
+		</button>
+
+		<button id="wporg-events__see-nearby" class="wporg-events__hidden">
+			Showing global events
+		</button>
+	</div>
+	<!-- /wp:html -->
+
 	<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"className":"wporg-query-filters","layout":{"type":"flex","flexWrap":"nowrap"}} -->
 	<div class="wp-block-group wporg-query-filters">
 		<!-- wp:wporg/query-filter {"key":"format_type","multiple":false} /-->

public_html/wp-content/themes/wporg-events-2023/images/location.svg

@@ -13,9 +13,10 @@
 <h2 class="wp-block-heading has-inter-font-family has-medium-font-size" style="font-style:normal;font-weight:700">Upcoming events</h2>
 <!-- /wp:heading -->
 
-<!-- wp:pattern {"slug":"wporg-events-2023/event-list-filters"} /-->
+<!-- wp:pattern {"slug":"wporg-events-2023/event-list-filters-with-nearby"} /-->
 
-<!-- wp:wporg/event-list {"limit": "10"} /-->
+<!-- wp:wporg/event-list {"events":"nearby","id":"front-event-list-nearby","limit": "10"} /-->
+<!-- wp:wporg/event-list {"events":"all-upcoming","id":"front-event-list-global","className":"wporg-events__hidden","limit": "10"} /-->
 
 <!-- wp:buttons {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}}}} -->
 <div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--30)"><!-- wp:button {"className":"is-style-outline"} -->

public_html/wp-content/themes/wporg-events-2023/patterns/events-list-filters.php renamed to public_html/wp-content/themes/wporg-events-2023/patterns/event-list-filters-with-nearby.php

@@ -10,3 +10,13 @@ body {
 		max-width: var(--wp--custom--layout--wide-size) !important;
 	}
 }
+
+.wporg-events__hidden {
+	display: none;
+}
+
+.wporg-marker-list__loading {
+	/* The final height could be anywhere between 50px and 750px, so split the difference in order to minimize the
+	 * amount of layout shift. */
+	height: 350px;
+}

public_html/wp-content/themes/wporg-events-2023/patterns/front-events.php

@@ -0,0 +1,16 @@
+.wporg-events__nearby-chips {
+	button::before {
+		content: "";
+		width: 24px;
+		height: 24px;
+		display: inline-block;
+	}
+
+	#wporg-events__see-global::before {
+		background-image: url( 'images/close.svg' );
+	}
+
+	#wporg-events__see-nearby::before {
+		background-image: url( 'images/location.svg' );
+	}
+}

public_html/wp-content/themes/wporg-events-2023/postcss/base/layout.pcss

@@ -11,6 +11,9 @@
 @import "base/layout.pcss";
 @import "footer/community-callout.pcss";
 
+/* Patterns */
+@import "patterns/event-list-filters-with-nearby.pcss";
+
 /* Pages */
 @import "page/misc.pcss";
 @import "page/front-page/cover.pcss";

public_html/wp-content/themes/wporg-events-2023/postcss/patterns/event-list-filters-with-nearby.pcss

@@ -24,6 +24,7 @@
 	},
 	"supports": {
 		"align": true,
+		"anchor": true,
 		"color": {
 			"background": true,
 			"text": true
@@ -38,5 +39,6 @@
 			"lineHeight": true
 		}
 	},
-	"editorScript": "file:./index.js"
+	"editorScript": "file:./index.js",
+	"viewScript" : "file:./view.js"
 }

public_html/wp-content/themes/wporg-events-2023/postcss/style.pcss

@@ -10,9 +10,10 @@
 use WordPressdotorg\Events_2023;
 use WP_Block;
 use WordPressdotorg\MU_Plugins\Google_Map;
+use WP_Community_Events;
 
 add_action( 'init', __NAMESPACE__ . '\init' );
-
+add_action( 'enqueue_block_assets', __NAMESPACE__ . '\enqueue_assets' );
 
 /**
  * Registers the block using the metadata loaded from the `block.json` file.
@@ -30,6 +31,28 @@ function init() {
 	);
 }
 
+/**
+ * Enqueue scripts and styles.
+ */
+function enqueue_assets() {
+	require_once ABSPATH . 'wp-admin/includes/class-wp-community-events.php';
+
+	$payload = array(
+		'ip'     => WP_Community_Events::get_unsafe_client_ip(),
+		'number' => 10,
+	);
+
+	if ( is_user_logged_in() ) {
+		$payload['locale'] = get_user_locale( get_current_user_id() );
+	}
+
+	wp_add_inline_script(
+		'wporg-event-list-view-script',
+		'localEventsPayload = ' . wp_json_encode( $payload ) . ';',
+		'before'
+	);
+}
+
 /**
  * Render the block content.
  *
@@ -40,11 +63,30 @@ function init() {
  * @return string Returns the block markup.
  */
 function render( $attributes, $content, $block ) {
+	if ( 'nearby' === $attributes['events'] ) {
+		$content = get_nearby_events_markup();
+	} else {
+		$content = get_global_events_markup( $attributes['events'], $attributes['limit'], $attributes['groupByMonth'] );
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'id' => $attributes['id'] ?? '' ) );
+
+	return sprintf(
+		'<div %1$s>%2$s</div>',
+		$wrapper_attributes,
+		do_blocks( $content )
+	);
+}
+
+/**
+ * Get markup for a list of global events.
+ */
+function get_global_events_markup( string $filter, int $limit, bool $group_by_month ): string {
 	$facets = Events_2023\get_query_var_facets();
-	$events = Google_Map\get_events( $attributes['events'], 0, 0, $facets );
+	$events = Google_Map\get_events( $filter, 0, 0, $facets );
 
 	// Get all the filters that are currently applied.
-	$filtered_events = array_slice( filter_events( $events ), 0, (int) $attributes['limit'] );
+	$filtered_events = array_slice( filter_events( $events ), 0, $limit );
 
 	// The results are not guaranteed to be in order, so sort them.
 	usort( $filtered_events,
@@ -57,7 +99,7 @@ function ( $a, $b ) {
 		return get_no_result_view();
 	}
 
-	if ( (bool) $attributes['groupByMonth'] ) {
+	if ( $group_by_month ) {
 		// Group events by month year.
 		$grouped_events = array();
 		foreach ( $filtered_events as $event ) {
@@ -74,12 +116,46 @@ function ( $a, $b ) {
 		$content = get_list_markup( $filtered_events );
 	}
 
-	$wrapper_attributes = get_block_wrapper_attributes();
-	return sprintf(
-		'<div %1$s>%2$s</div>',
-		$wrapper_attributes,
-		do_blocks( $content )
-	);
+	return $content;
+}
+
+/**
+ * Get markup for a list of nearby events.
+ *
+ * The events themselves are populated by an XHR, to avoid blocking the TTFB with an external HTTP request. See `view.js`.
+ */
+function get_nearby_events_markup(): string {
+	ob_start();
+
+	?>
+
+	<p class="wporg-marker-list__loading">
+		Loading nearby events...
+		<img
+			src="<?php echo esc_url( includes_url( 'images/spinner-2x.gif' ) ); ?>"
+			width="20"
+			height="20"
+			alt=""
+		/>
+	</p>
+
+	<?php
+	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- The called function escapes it.
+	echo get_list_markup( array() );
+	?>
+
+	<!-- wp:wporg/notice {"type":"warning","className":"wporg-marker-list__no-results wporg-events__hidden"} -->
+	<div class="wp-block-wporg-notice is-warning-notice wporg-marker-list__no-results wporg-events__hidden">
+		<p>
+			There are no events scheduled near you at the moment. You can <a href="<?php echo esc_url( home_url( 'upcoming-events/' ) ); ?>">browse global events</a>, or
+			<a href="https://make.wordpress.org/community/handbook/meetup-organizer/welcome/" class="external-link">learn how to organize an event in your area</a>.
+		</p>
+	</div>
+	<!-- /wp:wporg/notice -->
+
+	<?php
+
+	return ob_get_clean();
 }
 
 /**