Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 30 commits into from
Dec 6, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
44371c8
Try using a php block that queries.
StevenDufresne Dec 2, 2023
1a5adca
Example query filtering.
StevenDufresne Dec 2, 2023
a43b837
add block build script.
StevenDufresne Dec 3, 2023
d568afe
Add the patterns
StevenDufresne Dec 4, 2023
cf3a3f4
Hook in another filter.
StevenDufresne Dec 4, 2023
12b7c06
Rename template.
StevenDufresne Dec 4, 2023
29f8205
Some minor updates.
StevenDufresne Dec 4, 2023
c73ed57
Add the month filter
StevenDufresne Dec 4, 2023
9cc0b23
Add in Past Events template
iandunn Dec 4, 2023
5b413d4
update menu links
iandunn Dec 5, 2023
8404ff7
pass filter values to map block
iandunn Dec 5, 2023
5819e91
Add map block. Isn't yet connected to country list.
StevenDufresne Dec 5, 2023
e636d34
Update copy.
StevenDufresne Dec 5, 2023
3e7d9c2
Harmonize spacing.
StevenDufresne Dec 5, 2023
9662871
Make font size smaller for past events.
StevenDufresne Dec 5, 2023
1ee70b1
Update post title spacing.
StevenDufresne Dec 5, 2023
76c027c
Update search layout.
StevenDufresne Dec 5, 2023
55b279c
fix upcoming spacing.
StevenDufresne Dec 5, 2023
55b4e41
Update the filters to show the item count on archives.
StevenDufresne Dec 5, 2023
7b10fbb
Fix the template widths.
StevenDufresne Dec 5, 2023
d3db670
Update event list UI.
StevenDufresne Dec 5, 2023
c26787d
Update the menu text based on designs.
StevenDufresne Dec 5, 2023
855fa57
combine build/watch scripts for convenience
iandunn Dec 5, 2023
0889f6f
use get_events for filtering and caching
iandunn Dec 5, 2023
303e77f
add missing template part
iandunn Dec 5, 2023
0de639a
update upcoming events slug
iandunn Dec 5, 2023
b0c2278
add country filter values
iandunn Dec 5, 2023
9908d41
add all months
iandunn Dec 5, 2023
8796cbb
schedule crons to prime cache
iandunn Dec 6, 2023
47fdebd
apply coding standards
iandunn Dec 6, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
178 changes: 174 additions & 4 deletions public_html/wp-content/themes/wporg-events-2023/functions.php
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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'] ) );
}
}
6 changes: 4 additions & 2 deletions public_html/wp-content/themes/wporg-events-2023/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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'"
}
Expand Down
Original file line number Diff line number Diff line change
@@ -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 -->
Original file line number Diff line number Diff line change
@@ -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 -->
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand All @@ -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"} -->
Expand All @@ -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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think it'd be accurate to change this. That number is the # of meetup.com group members (plus WordCamp attendees, but that doesn't affect it significantly), and the number of attendees is likely to be significantly different.

If we really want to say attendees, we could try to estimate the # based on RSVPs, but I don't think it'd be accurate enough to publish. IMO members is the most accurate/meaningful stat we can use here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for that context. I was going off the designs. I'll provide that feedback and switch it back to members today.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO members is the most accurate/meaningful stat we can use here.

I definitely see what you mean. I'm just unsure if "members", despite being accurate, is the right term to use. It does have hints of exclusivity and seems directly tied to Meetup.com's terminology, not necessarily WordPress's. When "members" are talked about in WP ways, I've typically seen it explicitly contextualized as "community members"... which is too long (as usual 😅).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So summing up the problem, if we use "attendees", we will be underrepresenting the actual number of attendees.

I also find members to be an inclusive term. What about just people?

Simple is as simple does.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

people is accurate and simple, for sure. Also feels too generic/passive. (and what of all the pet contributors? 😎)

I'd suggest one of the following (for now), with my preference being 1:

  1. participants: technically accurate, the bar for participation can be fluid, i.e., as low as just becoming a member on Meetup.com or as high as attending and contributing at a WordCamp.
  2. contributors: perhaps not entirely inclusive/accurate, but directly related to the project and also used elsewhere on the page already.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 that's a good point, we definitely don't want it to feel exclusionary. I like participants, thanks for thinking of that!

I think the problem with attendees is more that it _over_represents the number of attendees, since so many people join a meetup group, and even RSVP to an event, but don't actually show up. IMO accuracy is the most important factor, and it'd be better to err on the side of too low than too high. My concern is that inflating stats, even unintentionally, would erode trust.

I'll go ahead and update it to participants since we're coming up on the deadline to launch, but I'm happy to continue discussing it if y'all would like to iterate on that, or make any changes.

<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
<!-- /wp:group -->
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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 -->
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,7 @@
display: none;
}
}

body .is-layout-flex.page-upcoming-title-past-wrapper {
align-items: baseline;
}
Original file line number Diff line number Diff line change
@@ -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"
}
Loading
Loading