Events: Use a showcase like approach for the events list/archive (#1124)

* Try using a php block that queries.

* Example query filtering.

* add block build script.

* Add the patterns

* Hook in another filter.

* Rename template.

* Some minor updates.

* Add the month filter

* Add in Past Events template

* update menu links

* pass filter values to map block

* Add map block. Isn't yet connected to country list.

* Update copy.

* Harmonize spacing.

* Make font size smaller for past events.

* Update post title spacing.

* Update search layout.

* fix upcoming spacing.

* Update the filters to show the item count on archives.

* Fix the template widths.

* Update event list UI.

* Update the menu text based on designs.

* combine build/watch scripts for convenience

* use get_events for filtering and caching

* add missing template part

* update upcoming events slug

* add country filter values

* add all months

* schedule crons to prime cache

* apply coding standards

---------

Co-authored-by: Ian Dunn <[email protected]>

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

@@ -5,10 +5,19 @@
 
 require_once __DIR__ . '/inc/city-landing-pages.php';
 
+// Block files.
+require_once __DIR__ . '/src/event-list/index.php';
+
 add_action( 'after_setup_theme', __NAMESPACE__ . '\theme_support' );
 add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\enqueue_assets' );
 add_filter( 'wporg_block_navigation_menus', __NAMESPACE__ . '\add_site_navigation_menus' );
+add_filter( 'wporg_query_filter_options_format_type', __NAMESPACE__ . '\get_format_type_options' );
+add_filter( 'wporg_query_filter_options_event_type', __NAMESPACE__ . '\get_event_type_options' );
+add_filter( 'wporg_query_filter_options_month', __NAMESPACE__ . '\get_month_options' );
+add_filter( 'wporg_query_filter_options_country', __NAMESPACE__ . '\get_country_options' );
+add_action( 'wporg_query_filter_in_form', __NAMESPACE__ . '\inject_other_filters' );
 
+add_filter( 'query_vars', __NAMESPACE__ . '\add_query_vars' );
 
 /**
  * Register theme supports.
@@ -36,13 +45,174 @@ function add_site_navigation_menus( $menus ) {
 	return array(
 		'local-navigation' => array(
 			array(
-				'label' => __( 'All Events', 'wordcamporg' ),
-				'url' => '/upcoming-events/',
+				'label' => __( 'Upcoming events', 'wordcamporg' ),
+				'url' => '/upcoming/',
 			),
 			array(
-				'label' => __( 'Organize an Event', 'wordcamporg' ),
-				'url' => '/organize-an-event/',
+				'label' => __( 'Organize an event', 'wordcamporg' ),
+				'url' => '/organize-events/',
 			),
 		),
 	);
 }
+
+/**
+ * Sets up our Query filter for country.
+ *
+ * @return array
+ */
+function get_country_options( array $options ): array {
+	global $wp_query;
+	$selected = isset( $wp_query->query['country'] ) ? (array) $wp_query->query['country'] : array();
+
+	$countries = wcorg_get_countries();
+
+	// Re-index to match the format expected by the query-filters block.
+	$countries = array_combine( array_keys( $countries ), array_column( $countries, 'name' ) );
+
+	return array(
+		'label' => __( 'Country', 'wporg' ),
+		'title' => __( 'Country', 'wporg' ),
+		'key' => 'country',
+		'action' => home_url( '/upcoming/' ),
+		'options' => $countries,
+		'selected' => $selected,
+	);
+}
+
+/**
+ * Sets up our Query filter for event_type.
+ *
+ * @return array
+ */
+function get_event_type_options( array $options ): array {
+	global $wp_query;
+	$selected = isset( $wp_query->query['event_type'] ) ? (array) $wp_query->query['event_type'] : array();
+	$count    = count( $selected );
+	$label    = sprintf(
+		/* translators: The dropdown label for filtering, %s is the selected term count. */
+		_n( 'Type <span>%s</span>', 'Type <span>%s</span>', $count, 'wporg' ),
+		$count
+	);
+
+	return array(
+		'label' => $label,
+		'title' => __( 'Type', 'wporg' ),
+		'key' => 'event_type',
+		'action' => home_url( '/upcoming/' ),
+		'options' => array(
+			'meetup'   => 'Meetup',
+			'wordcamp' => 'WordCamp',
+		),
+		'selected' => $selected,
+	);
+}
+
+/**
+ * Sets up our Query filter for format_type.
+ *
+ * @return array
+ */
+function get_format_type_options( array $options ): array {
+	global $wp_query;
+	$selected = isset( $wp_query->query['format_type'] ) ? (array) $wp_query->query['format_type'] : array();
+	$count    = count( $selected );
+	$label    = sprintf(
+		/* translators: The dropdown label for filtering, %s is the selected term count. */
+		_n( 'Format <span>%s</span>', 'Format <span>%s</span>', $count, 'wporg' ),
+		$count
+	);
+
+	return array(
+		'label' => $label,
+		'title' => __( 'Format', 'wporg' ),
+		'key' => 'format_type',
+		'action' => home_url( '/upcoming/' ),
+		'options' => array(
+			'online'    => 'Online',
+			'in-person' => 'In Person',
+		),
+		'selected' => $selected,
+	);
+}
+
+/**
+ * Sets up our Query filter for month.
+ *
+ * @return array
+ */
+function get_month_options( array $options ): array {
+	global $wp_query;
+	$selected = isset( $wp_query->query['month'] ) ? (array) $wp_query->query['month'] : array();
+	$count    = count( $selected );
+	$label    = sprintf(
+		/* translators: The dropdown label for filtering, %s is the selected term count. */
+		_n( 'Month <span>%s</span>', 'Month <span>%s</span>', $count, 'wporg' ),
+		$count
+	);
+
+	$months = array();
+
+	for ( $i = 1; $i <= 12; $i++ ) {
+		$month = strtotime( "2023-$i-1" );
+		$months[ gmdate( 'm', $month ) ] = gmdate( 'F', $month );
+	}
+
+	return array(
+		'label' => $label,
+		'title' => __( 'Month', 'wporg' ),
+		'key' => 'month',
+		'action' => home_url( '/upcoming/' ),
+		'options' => $months,
+		'selected' => $selected,
+	);
+}
+
+/**
+ * Add in our custom query vars.
+ */
+function add_query_vars( $query_vars ) {
+	$query_vars[] = 'format_type';
+	$query_vars[] = 'event_type';
+	$query_vars[] = 'month';
+	$query_vars[] = 'country';
+
+	return $query_vars;
+}
+
+
+/**
+ * Add in the other existing filters as hidden inputs in the filter form.
+ *
+ * Enables combining filters by building up the correct URL on submit,
+ * for example sites using a tag, a category, and matching a search term:
+ *   ?tag[]=cuisine&cat[]=3&s=wordpress`
+ *
+ * @param string $key The key for the current filter.
+ */
+function inject_other_filters( $key ) {
+	global $wp_query;
+
+	$query_vars = array( 'event_type', 'format_type', 'month', 'country' );
+
+	foreach ( $query_vars as $query_var ) {
+		if ( ! isset( $wp_query->query[ $query_var ] ) ) {
+			continue;
+		}
+
+		if ( $key === $query_var ) {
+			continue;
+		}
+
+		$values = (array) $wp_query->query[ $query_var ];
+
+		foreach ( $values as $value ) {
+			printf( '<input type="hidden" name="%s[]" value="%s" />', esc_attr( $query_var ), esc_attr( $value ) );
+		}
+	}
+
+	// Pass through search query.
+	if ( isset( $wp_query->query['s'] ) ) {
+		printf( '<input type="hidden" name="s" value="%s" />', esc_attr( $wp_query->query['s'] ) );
+	}
+}

public_html/wp-content/themes/wporg-events-2023/package.json

@@ -4,6 +4,7 @@
 	"description": "Description: Includes templates for the homepage, event archives, etc",
 	"license": "GPL-2.0-or-later",
 	"devDependencies": {
+		"@wordpress/scripts": "^26.18.0",
 		"cssnano": "^6.0.1",
 		"postcss": "^8.4.31",
 		"postcss-cli": "^10.1.0",
@@ -13,8 +14,9 @@
 	},
 	"scripts": {
 		"start": "npm run watch",
-		"watch": "npm run build -- --watch",
-		"build": "postcss postcss/style.pcss postcss/editor.pcss --dir . --ext css",
+		"watch": "wp-scripts start & npm run build:css -- --watch",
+		"build": "wp-scripts build && npm run build:css",
+		"build:css": "postcss postcss/style.pcss postcss/editor.pcss --dir . --ext css",
 		"lint:js": "echo 'There is no JS, but this is required to make the `linter.yml` workflow pass. See https://github.com/yarnpkg/yarn/issues/6739, https://github.com/yarnpkg/yarn/issues/6894.'",
 		"lint:css": "wp-scripts lint-style 'postcss/*.pcss'"
 	}

public_html/wp-content/themes/wporg-events-2023/parts/event-filters.html

@@ -0,0 +1,7 @@
+<!-- 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} /-->
+	<!-- wp:wporg/query-filter {"key":"event_type","multiple":false} /-->
+	<!-- wp:wporg/query-filter {"key":"month","multiple":false} /-->
+	<!-- wp:wporg/query-filter {"key":"country","multiple":false} /-->
+</div> <!-- /wp:group -->

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

@@ -0,0 +1,18 @@
+<?php
+/**
+ * Title: Events List Filters
+ * Slug: wporg-events-2023/event-list-filters
+ * Inserter: no
+ */
+
+?>
+
+<!-- wp:group {"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
+<div class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)">
+	<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap"}} -->
+	<div class="wp-block-group">
+		<!-- 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:template-part {"slug":"event-filters"} /-->
+</div> <!-- /wp:group -->

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

@@ -8,8 +8,8 @@
 ?>
 
 <!-- wp:group {"className":"alignwide wporg-events__cover","layout":{"type":"constrained"}} -->
-<div class="wp-block-group alignwide wporg-events__cover"><!-- wp:columns {"align":"wide","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|30"}}}} -->
-<div class="wp-block-columns alignwide" style="margin-bottom:var(--wp--preset--spacing--30)"><!-- wp:column {"verticalAlignment":"bottom","width":"50%"} -->
+<div class="wp-block-group alignwide wporg-events__cover"><!-- wp:columns {"align":"wide","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"}}}} -->
+<div class="wp-block-columns alignwide" style="margin-bottom:var(--wp--preset--spacing--40)"><!-- wp:column {"verticalAlignment":"bottom","width":"50%"} -->
 <div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:50%"><!-- wp:heading {"level":1,"style":{"elements":{"link":{"color":{"text":"var:preset|color|charcoal-0"}}},"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"textColor":"charcoal-0","fontSize":"heading-2"} -->
 <h1 class="wp-block-heading has-charcoal-0-color has-text-color has-link-color has-heading-2-font-size" style="margin-top:var(--wp--preset--spacing--20)"><em>Meet the community</em> behind WordPress</h1>
 <!-- /wp:heading -->
@@ -25,8 +25,8 @@
 <!-- /wp:columns --></div>
 <!-- /wp:group -->
 
-<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space"}}},"className":"wporg-events__stats","layout":{"type":"constrained"}} -->
-<div class="wp-block-group alignwide wporg-events__stats" style="padding-right:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space)"><!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|30"}}}} -->
+<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space"},"margin":{"top":"0","bottom":"0"}}},"className":"wporg-events__stats","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignwide wporg-events__stats" style="margin-top:0;margin-bottom:0;padding-right:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space)"><!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|30"}}}} -->
 <div class="wp-block-columns alignwide"><!-- wp:column {"width":"33.34%","fontSize":"medium","fontFamily":"eb-garamond"} -->
 <div class="wp-block-column has-eb-garamond-font-family has-medium-font-size" style="flex-basis:33.34%"><!-- wp:group {"style":{"border":{"radius":"2px","width":"1px"},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|30"}}},"borderColor":"light-grey-1","layout":{"type":"constrained"}} -->
 <div class="wp-block-group has-border-color has-light-grey-1-border-color" style="border-width:1px;border-radius:2px;padding-top:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--30)"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|charcoal-0"}}}},"textColor":"charcoal-0","fontSize":"heading-6"} -->
@@ -46,9 +46,9 @@
 <!-- wp:column {"width":"33.33%","fontSize":"medium","fontFamily":"eb-garamond"} -->
 <div class="wp-block-column has-eb-garamond-font-family has-medium-font-size" style="flex-basis:33.33%"><!-- wp:group {"style":{"border":{"radius":"2px","width":"1px"},"spacing":{"padding":{"left":"var:preset|spacing|30","top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}},"borderColor":"light-grey-1","layout":{"type":"constrained"}} -->
 <div class="wp-block-group has-border-color has-light-grey-1-border-color" style="border-width:1px;border-radius:2px;padding-top:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--30)"><!-- wp:paragraph {"style":{"layout":{"selfStretch":"fit","flexSize":null},"elements":{"link":{"color":{"text":"var:preset|color|charcoal-0"}}}},"textColor":"charcoal-0","fontSize":"heading-6"} -->
-<p class="has-charcoal-0-color has-text-color has-link-color has-heading-6-font-size">540,537 members</p>
+<p class="has-charcoal-0-color has-text-color has-link-color has-heading-6-font-size">540,537 attendees</p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:group --></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns --></div>
-<!-- /wp:group -->
+<!-- /wp:group -->

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

@@ -13,11 +13,13 @@
 <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:wporg/google-map {"id":"all-upcoming-list","apiKey":"WORDCAMP_DEV_GOOGLE_MAPS_API_KEY","filterSlug":"all-upcoming","showMap":false,"showSearch":false,"listDisplayLimit":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"} -->
-<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="/upcoming-events/">Browse
+<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="/upcoming/">Browse
 				events</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons --></div>

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

@@ -165,7 +165,7 @@
 
 <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"right","orientation":"horizontal"},"style":{"layout":{"selfStretch":"fill","flexSize":null}}} -->
 <div class="wp-block-buttons"><!-- wp:button {"className":"has-custom-width is-style-outline-on-dark"} -->
-<div class="wp-block-button has-custom-width is-style-outline-on-dark"><a class="wp-block-button__link wp-element-button" href="/upcoming-events/">Browse events</a></div>
+<div class="wp-block-button has-custom-width is-style-outline-on-dark"><a class="wp-block-button__link wp-element-button" href="/upcoming/">Browse events</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons --></div>
 <!-- /wp:group --></div>

public_html/wp-content/themes/wporg-events-2023/patterns/page-upcoming-see-past-events.php

@@ -0,0 +1,16 @@
+<?php
+/**
+ * Title: Upcoming: See Past Events link
+ * Slug: wporg-events-2023/page-upcoming-see-past-events
+ * Inserter: no
+ */
+
+?>
+
+<!-- wp:paragraph {"fontSize":"small"} -->
+<p class="has-small-font-size">
+	<a href="<?php echo esc_url( home_url( '/past-events/' ) ); ?>">
+		See past events
+	</a>
+</p>
+<!-- /wp:paragraph -->

public_html/wp-content/themes/wporg-events-2023/postcss/blocks/wporg-google-map.pcss

@@ -36,13 +36,17 @@
 	}
 
 	.wporg-marker-list-item__title {
+		margin: 0;
 		font-family: var(--wp--preset--font-family--inter);
 		font-size: var(--wp--preset--font-size--normal);
 		line-height: var(--wp--custom--body--typography--line-height);
-
 		--wp--preset--spacing--30: 0;
 	}
 
+	.wporg-marker-list-item__title a {
+		text-decoration: none;
+	}
+
 	.wporg-marker-list-item__date-time {
 		@media (--medium) {
 			display: block;

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

@@ -8,3 +8,7 @@
 		display: none;
 	}
 }
+
+body .is-layout-flex.page-upcoming-title-past-wrapper {
+	align-items: baseline;
+}

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

@@ -0,0 +1,35 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "wporg/event-list",
+	"version": "0.1.0",
+	"title": "WordPress Events List",
+	"category": "design",
+	"icon": "list-view",
+	"description": "List of WordPress Events",
+	"textdomain": "wporg",
+	"attributes": {
+		"events": {
+			"type": "string",
+			"default": "all-upcoming"
+		}
+	},
+	"supports": {
+		"align": true,
+		"color": {
+			"background": true,
+			"text": true
+		},
+		"spacing": {
+			"margin": [ "top", "bottom" ],
+			"padding": true,
+			"blockGap": false
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		}
+	},
+	"editorScript": "file:./index.js",
+	"style": "file:./style-index.css"
+}