Events: Show upcoming events close to the visitor

public_html/wp-content/themes/wporg-events-2023/functions.php

@@ -9,6 +9,7 @@
 
 // Block files.
 require_once __DIR__ . '/src/event-list/index.php';
+require_once __DIR__ . '/src/event-list-chips/index.php';
 
 add_action( 'after_setup_theme', __NAMESPACE__ . '\theme_support' );
 add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\enqueue_assets' );

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

@@ -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,8 @@
 		<!-- 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:wporg/event-list-chips /-->
+
 	<!-- 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/patterns/front-events.php

@@ -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":"event-list-nearby","limit": "10"} /-->
+<!-- wp:wporg/event-list {"events":"all-upcoming","id":"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/postcss/patterns/event-list-filters-with-nearby.pcss

@@ -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/style.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/src/event-list-chips/block.json

@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "wporg/event-list-chips",
+	"version": "0.1.0",
+	"title": "WordPress Events List Chips",
+	"category": "design",
+	"icon": "list-view",
+	"description": "Chips for filtering results from the wporg/event-list block",
+	"textdomain": "wporg",
+	"supports": {
+		"anchor": true
+	},
+	"editorScript": "file:./index.js"
+}

public_html/wp-content/themes/wporg-events-2023/src/event-list-chips/edit.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+
+import { useBlockProps } from '@wordpress/block-editor';
+import { Disabled } from '@wordpress/components';
+import ServerSideRender from '@wordpress/server-side-render';
+
+export default function Edit( { attributes, name } ) {
+	return (
+		<div { ...useBlockProps() }>
+			<Disabled>
+				<ServerSideRender block={ name } attributes={ attributes } />
+			</Disabled>
+		</div>
+	);
+}

public_html/wp-content/themes/wporg-events-2023/src/event-list-chips/index.js

@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import Edit from './edit';
+import metadata from './block.json';
+
+registerBlockType( metadata.name, {
+	edit: Edit,
+	save: () => null,
+} );

public_html/wp-content/themes/wporg-events-2023/src/event-list-chips/index.php

@@ -0,0 +1,52 @@
+<?php
+/**
+ * Block Name: WordPress Event List Chips
+ * Description: Chips for filtering results from the wporg/event-list block.
+ */
+
+namespace WordPressdotorg\Theme\Events_2023\WordPress_Event_List_Chips;
+use WP_Block;
+
+add_action( 'init', __NAMESPACE__ . '\init' );
+
+/**
+ * Register the block.
+ */
+function init() {
+	register_block_type(
+		dirname( __DIR__, 2 ) . '/build/event-list-chips',
+		array(
+			'render_callback' => __NAMESPACE__ . '\render',
+		)
+	);
+}
+
+/**
+ * Render the block content.
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ *
+ * @return string Returns the block markup.
+ */
+function render( $attributes, $content, $block ) {
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'id' => $attributes['id'] ?? '' ) );
+
+	ob_start();
+	?>
+
+	<div <?php echo $wrapper_attributes; ?>>
+		<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>
+
+	<?php
+
+	return ob_get_clean();
+}

public_html/wp-content/themes/wporg-events-2023/src/event-list/block.json

@@ -24,6 +24,7 @@
 	},
 	"supports": {
 		"align": true,
+		"anchor": true,
 		"color": {
 			"background": true,
 			"text": true

public_html/wp-content/themes/wporg-events-2023/src/event-list/edit.js

@@ -7,6 +7,11 @@ import ServerSideRender from '@wordpress/server-side-render';
 import { useBlockProps } from '@wordpress/block-editor';
 
 export default function Edit( { attributes, name } ) {
+	// Global events are a more consistent preview of this block than nearby events, which may or may not have any results.
+	// This also avoids having to enqueue `view.js`.
+	attributes.events = 'all-upcoming';
+	attributes.limit  = 10;
+
 	return (
 		<div { ...useBlockProps() }>
 			<Disabled>

public_html/wp-content/themes/wporg-events-2023/src/event-list/index.php

@@ -11,6 +11,7 @@
 use WordPressdotorg\Events_2023;
 use WP_Block;
 use WordPressdotorg\MU_Plugins\Google_Map;
+use WP_Community_Events;
 
 add_action( 'init', __NAMESPACE__ . '\init' );
 
@@ -41,11 +42,34 @@ 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'] );
+	}
+
+	$extra_attributes = array(
+		'id' => $attributes['id'] ?? '',
+		'class' => 'wporg-event-list__filter-' . $attributes['events']
+	);
+	$wrapper_attributes = get_block_wrapper_attributes( $extra_attributes );
+
+	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,
@@ -73,7 +97,7 @@ function ( $event ) {
 
 	$payload = array(
 		'events'       => $filtered_events,
-		'groupByMonth' => $attributes['groupByMonth'],
+		'groupByMonth' => $group_by_month,
 	);
 
 	wp_add_inline_script(
@@ -84,12 +108,23 @@ function ( $event ) {
 		'before'
 	);
 
+	$content = wp_kses_post( get_loading_markup( 'Loading global events...' ) );
+	$content .= '<ul class="wporg-marker-list__container"></ul>';
+
+	return $content;
+}
+
+/**
+ * Get the markup for the loading indicator.
+ */
+function get_loading_markup( string $text ): string {
 	ob_start();
 
 	?>
 
 	<p class="wporg-marker-list__loading">
-		Loading global events...
+		<?php echo esc_html( $text ); ?>
+
 		<img
 			src="<?php echo esc_url( includes_url( 'images/spinner-2x.gif' ) ); ?>"
 			width="20"
@@ -100,15 +135,64 @@ function ( $event ) {
 
 	<?php
 
-	$content = ob_get_clean();
+	return ob_get_clean();
+}
+
+/**
+ * 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();
+
+	require_once ABSPATH . 'wp-admin/includes/class-wp-community-events.php';
 
-	$wrapper_attributes = get_block_wrapper_attributes();
+	$payload = array(
+		'ip'     => WP_Community_Events::get_unsafe_client_ip(),
+		'number' => 10,
+	);
 
-	return sprintf(
-		'<div %1$s>%2$s</div>',
-		$wrapper_attributes,
-		do_blocks( $content )
+	if ( is_user_logged_in() ) {
+		$payload['locale'] = get_user_locale( get_current_user_id() );
+	}
+
+	wp_add_inline_script(
+		// See note `get_global_events_markup()` about keeping this in sync.
+		'wporg-event-list-view-script-2',
+		'localEventsPayload = ' . wp_json_encode( $payload ) . ';',
+		'before'
 	);
+
+	?>
+
+	<!-- 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 -->
+
+	<!-- wp:wporg/notice {"type":"warning","className":"wporg-marker-list__not-many-results wporg-events__hidden"} -->
+	<div class="wp-block-wporg-notice is-warning-notice wporg-marker-list__not-many-results wporg-events__hidden">
+		<p>
+			Want more events?
+			<a href="https://make.wordpress.org/community/handbook/meetup-organizer/welcome/" class="external-link">
+				You can help organize the next one!
+			</a>
+		</p>
+	</div>
+	<!-- /wp:wporg/notice -->
+
+	<?php echo wp_kses_post( get_loading_markup( 'Loading nearby events...' ) ); ?>
+
+	<ul class="wporg-marker-list__container"></ul>
+
+	<?php
+
+	return ob_get_clean();
 }
 
 /**