diff --git a/public_html/wp-content/themes/wporg-events-2023/functions.php b/public_html/wp-content/themes/wporg-events-2023/functions.php index b9a07f01e4..9fa65aab0c 100644 --- a/public_html/wp-content/themes/wporg-events-2023/functions.php +++ b/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' ); diff --git a/public_html/wp-content/themes/wporg-events-2023/images/close.svg b/public_html/wp-content/themes/wporg-events-2023/images/close.svg new file mode 100644 index 0000000000..4dcdb34ec2 --- /dev/null +++ b/public_html/wp-content/themes/wporg-events-2023/images/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/public_html/wp-content/themes/wporg-events-2023/images/location.svg b/public_html/wp-content/themes/wporg-events-2023/images/location.svg new file mode 100644 index 0000000000..ff676cc21c --- /dev/null +++ b/public_html/wp-content/themes/wporg-events-2023/images/location.svg @@ -0,0 +1,7 @@ + + + + diff --git a/public_html/wp-content/themes/wporg-events-2023/patterns/events-list-filters-with-count.php b/public_html/wp-content/themes/wporg-events-2023/patterns/event-list-filters-with-count.php similarity index 100% rename from public_html/wp-content/themes/wporg-events-2023/patterns/events-list-filters-with-count.php rename to public_html/wp-content/themes/wporg-events-2023/patterns/event-list-filters-with-count.php diff --git a/public_html/wp-content/themes/wporg-events-2023/patterns/events-list-filters.php b/public_html/wp-content/themes/wporg-events-2023/patterns/event-list-filters-with-nearby.php similarity index 91% rename from public_html/wp-content/themes/wporg-events-2023/patterns/events-list-filters.php rename to public_html/wp-content/themes/wporg-events-2023/patterns/event-list-filters-with-nearby.php index 3f6b5c4922..6b700ad5e7 100644 --- a/public_html/wp-content/themes/wporg-events-2023/patterns/events-list-filters.php +++ b/public_html/wp-content/themes/wporg-events-2023/patterns/event-list-filters-with-nearby.php @@ -1,7 +1,7 @@ + +
diff --git a/public_html/wp-content/themes/wporg-events-2023/patterns/front-events.php b/public_html/wp-content/themes/wporg-events-2023/patterns/front-events.php index a75a50090a..69233bd1dd 100644 --- a/public_html/wp-content/themes/wporg-events-2023/patterns/front-events.php +++ b/public_html/wp-content/themes/wporg-events-2023/patterns/front-events.php @@ -13,9 +13,10 @@

Upcoming events

- + - + +
diff --git a/public_html/wp-content/themes/wporg-events-2023/postcss/patterns/event-list-filters-with-nearby.pcss b/public_html/wp-content/themes/wporg-events-2023/postcss/patterns/event-list-filters-with-nearby.pcss new file mode 100644 index 0000000000..0b05f92315 --- /dev/null +++ b/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' ); + } +} diff --git a/public_html/wp-content/themes/wporg-events-2023/postcss/style.pcss b/public_html/wp-content/themes/wporg-events-2023/postcss/style.pcss index b118199354..3fd15c95ae 100644 --- a/public_html/wp-content/themes/wporg-events-2023/postcss/style.pcss +++ b/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"; diff --git a/public_html/wp-content/themes/wporg-events-2023/src/event-list-chips/block.json b/public_html/wp-content/themes/wporg-events-2023/src/event-list-chips/block.json new file mode 100644 index 0000000000..03af6ab380 --- /dev/null +++ b/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" +} diff --git a/public_html/wp-content/themes/wporg-events-2023/src/event-list-chips/edit.js b/public_html/wp-content/themes/wporg-events-2023/src/event-list-chips/edit.js new file mode 100644 index 0000000000..bbd0bf8079 --- /dev/null +++ b/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 ( +
+ + + +
+ ); +} diff --git a/public_html/wp-content/themes/wporg-events-2023/src/event-list-chips/index.js b/public_html/wp-content/themes/wporg-events-2023/src/event-list-chips/index.js new file mode 100644 index 0000000000..221fee8b19 --- /dev/null +++ b/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, +} ); diff --git a/public_html/wp-content/themes/wporg-events-2023/src/event-list-chips/index.php b/public_html/wp-content/themes/wporg-events-2023/src/event-list-chips/index.php new file mode 100644 index 0000000000..ad3ac2d174 --- /dev/null +++ b/public_html/wp-content/themes/wporg-events-2023/src/event-list-chips/index.php @@ -0,0 +1,52 @@ + __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(); + ?> + +
> + + + +
+ + diff --git a/public_html/wp-content/themes/wporg-events-2023/src/event-list/index.php b/public_html/wp-content/themes/wporg-events-2023/src/event-list/index.php index 872945804d..f87ba0dd31 100644 --- a/public_html/wp-content/themes/wporg-events-2023/src/event-list/index.php +++ b/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( + '
%2$s
', + $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 .= '
    '; + + return $content; +} + +/** + * Get the markup for the loading indicator. + */ +function get_loading_markup( string $text ): string { ob_start(); ?>

    - Loading global events... + + WP_Community_Events::get_unsafe_client_ip(), + 'number' => 10, + ); - return sprintf( - '

    %2$s
    ', - $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' ); + + ?> + + +
    +

    + There are no events scheduled near you at the moment. You can browse global events, or + learn how to organize an event in your area. +

    +
    + + + +
    +

    + Want more events? + + You can help organize the next one! + +

    +
    + + + + +
      + + 0 ) { + let markup = ''; + + for ( let i = 0; i < results.events.length; i++ ) { + // Make consistent with global event data structure. + results.events[ i ].timestamp = results.events[ i ].start_unix_timestamp; + results.events[ i ].location = results.events[ i ].location.location; + + markup += renderEvent( results.events[ i ] ); + } + + listContainer.innerHTML = markup; + + if ( results.events.length < 3 ) { + notManyEventsMessage.classList.remove( 'wporg-events__hidden' ); + } + } else { + noEventsMessage.classList.remove( 'wporg-events__hidden' ); + } + } catch ( error ) { + // eslint-disable-next-line no-console + console.error( error ); + + showGlobal(); + chipsContainer.classList.add( 'wporg-events__hidden' ); + } finally { + loadingElement.classList.add( 'wporg-events__hidden' ); + } } /**