Events: Use a showcase like approach for the events list/archive

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

@@ -5,10 +5,18 @@
 
 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_event_type', __NAMESPACE__ . '\get_event_type_options' );
+add_filter( 'wporg_query_filter_options_format_type', __NAMESPACE__ . '\get_format_type_options' );
+add_filter( 'wporg_query_filter_options_month', __NAMESPACE__ . '\get_month_options' );
+add_action( 'wporg_query_filter_in_form', __NAMESPACE__ . '\inject_other_filters' );
 
+add_filter( 'query_vars', __NAMESPACE__ . '\add_query_vars' );
 
 /**
  * Register theme supports.
@@ -46,3 +54,130 @@ function add_site_navigation_menus( $menus ) {
 		),
 	);
 }
+
+/**
+ * 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-events/' ),
+		'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-events/' ),
+		'options' => array(
+			'meetup'   => 'Online',
+			'wordcamp' => '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
+	);
+
+	return array(
+		'label' => $label,
+		'title' => __( 'Month', 'wporg' ),
+		'key' => 'month',
+		'action' => home_url( '/upcoming-events/' ),
+		'options' => array(
+			'01'   => 'January',
+			'02'   => 'February',
+		),
+		'selected' => $selected,
+	);
+}
+
+/**
+ * Add in our custom query vars.
+ */
+function add_query_vars( $query_vars ) {
+	$query_vars[] = 'event_type';
+	$query_vars[] = 'format_type';
+	$query_vars[] = 'month';
+	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' );
+	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

@@ -12,6 +12,7 @@
 		"postcss-preset-env": "^9.3.0"
 	},
 	"scripts": {
+		"build:block": "wp-scripts build",
 		"start": "npm run watch",
 		"watch": "npm run build -- --watch",
 		"build": "postcss postcss/style.pcss postcss/editor.pcss --dir . --ext css",

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

@@ -0,0 +1,26 @@
+<?php
+/**
+ * Title: Events List Filters
+ * Slug: wporg-events-2023/event-list-filters
+ * Inserter: no
+ */
+
+?>
+
+<!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
+<div class="wp-block-group alignwide">
+		<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap"}} -->
+		<div class="wp-block-group">
+			<!-- wp:search {"showLabel":false,"placeholder":"<?php esc_html_e( 'Search events...', 'wporg' ); ?>","width":100,"widthUnit":"%","buttonText":"<?php esc_html_e( 'Search', 'wporg' ); ?>","buttonPosition":"button-inside","buttonUseIcon":true,"className":"is-style-secondary-search-control"} /-->
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","flexWrap":"nowrap"},"className":"wporg-query-filters"} -->
+		<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} /-->
+		</div>
+		<!-- /wp:group -->
+	</div>
+	<!-- /wp:group -->

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

@@ -13,6 +13,8 @@
 <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"}}}} -->

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

@@ -0,0 +1,29 @@
+{
+	"$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",
+	"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"
+}

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

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

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

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

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

@@ -0,0 +1,119 @@
+<?php
+/**
+ * Block Name: WordPress Event List
+ * Description: List of WordPress Events.
+ *
+ * @package wporg
+ */
+
+namespace WordPressdotorg\Theme\Events_2023\WordPress_Event_List;
+
+use function WordPressdotorg\MU_Plugins\Google_Map\{get_all_upcoming_events};
+
+add_action( 'init', __NAMESPACE__ . '\init' );
+
+/**
+ * Registers the block using the metadata loaded from the `block.json` file.
+ * Behind the scenes, it registers also all assets so they can be enqueued
+ * through the block editor in the corresponding context.
+ *
+ * @see https://developer.wordpress.org/reference/functions/register_block_type/
+ */
+function init() {
+	register_block_type(
+		dirname( dirname( __DIR__ ) ) . '/build/event-list',
+		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 ) {
+
+	// Get all the events
+	$events = get_event_list();
+
+	// Get all the filters that are currently applied.
+	$filtered_events = array_slice( filter_events( $events ), 0, 10);
+
+	// loop through events output markup using gutenberg blocks
+	$content = '<ul class="wporg-marker-list__container">';
+
+	foreach ( $filtered_events as $event ) {
+		$content .= '<li class="wporg-marker-list-item">';
+		$content .= '<h3 class="wporg-marker-list-item__title">' . $event->title . '</h3>';
+		$content .= '<div class="wporg-marker-list-item__location">' . $event->location . '</div>';
+		$content .= '<div class="wporg-marker-list-item__date-time">' . $event->timestamp . '</div>';
+		$content .= '</li>';
+	}
+
+	$content .= '</ul>';
+
+	$wrapper_attributes = get_block_wrapper_attributes();
+	return sprintf(
+		'<div %1$s>%2$s</div>',
+		$wrapper_attributes,
+		do_blocks( $content )
+	);
+}
+
+/**
+ * Get a list of the currently-applied filters.
+ *
+ * @param boolean $include_search Whether the result should include the search term.
+ *
+ * @return array
+ */
+function filter_events( $events ) {
+	global $wp_query;
+
+	$taxes = array(
+		'map_type' => 'map_type',
+	);
+	$terms = array();
+
+	// Get the terms
+	foreach ( $taxes as $query_var => $taxonomy ) {
+
+		if ( ! isset( $wp_query->query[ $query_var ] ) ) {
+			continue;
+		}
+
+		$values = (array) $wp_query->query[ $query_var ];
+		foreach ( $values as $value ) {
+			$terms[] = $value;
+		}
+	}
+
+	if ( empty( $terms ) ) {
+		return $events;
+	}
+
+	$filtered_events = array();
+	foreach ( $events as $event ) {
+		// Assuming each event has a 'type' property
+		if ( isset($event->type) && in_array($event->type, $terms) ) {
+			$filtered_events[] = $event;
+		}
+	}
+
+	return $filtered_events;
+}
+
+/**
+ * Retrieves event list based on the filters.
+ *
+ * @return array
+ */
+function get_event_list(): array {
+	return get_all_upcoming_events();
+}

public_html/wp-content/themes/wporg-events-2023/templates/page-upcoming.html

@@ -0,0 +1,15 @@
+<!-- wp:template-part {"slug":"header"} /-->
+
+<!-- wp:group {"tagName":"main","style":{"spacing":{"blockGap":"0px"}},"className":"entry-content","layout":{"type":"constrained"}} -->
+<main class="wp-block-group entry-content">
+	<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|40","left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space","bottom":"var:preset|spacing|40"}}},"layout":{"type":"default"}} -->
+	<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--edge-space);padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--40)">
+		<!-- wp:post-title /-->
+		<!-- wp:pattern {"slug":"wporg-events-2023/event-list-filters"} /-->   
+		<!-- wp:wporg/event-list /--> 
+	</div>
+	<!-- /wp:group -->
+</main>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer"} /-->