Update workshop archive page to have filtering (#107)

Adds a filter/search UI to the archive workshop view. Also makes updates to other parts of the project in order to facilitate filtering: * Adds a way to get a locale name from its code * Updates the Edit Workshop screen's metabox to use dropdowns to choose language and captions Fixes #5 Co-authored-by: Corey McKrill <916023+coreymckrill@users.noreply.github.com>
WordPress · Sep 16, 2020 · fb8968a · fb8968a
1 parent ff5c0e6
commit fb8968a
Show file tree

Hide file tree

Showing 22 changed files with 886 additions and 385 deletions.
diff --git a/wp-content/mu-plugins/pub/locales.php b/wp-content/mu-plugins/pub/locales.php
@@ -81,4 +81,19 @@ function get_locales_with_english_names() {
 
 		return wp_list_pluck( $locales, 'english_name', 'wp_locale' );
 	}
+
+	/**
+	 * Get the name of a locale from the code.
+	 *
+	 * @param string $code      The locale code to look up. E.g. en_US.
+	 * @param string $name_type Optional. 'native' or 'english'. Default 'native'.
+	 *
+	 * @return mixed|string
+	 */
+	function get_locale_name_from_code( $code, $name_type = 'native' ) {
+		$function = __NAMESPACE__ . "\get_locales_with_{$name_type}_names";
+		$locales  = $function();
+
+		return $locales[ $code ] ?? '';
+	}
 }
diff --git a/wp-content/plugins/wporg-learn/inc/post-meta.php b/wp-content/plugins/wporg-learn/inc/post-meta.php
@@ -4,6 +4,7 @@
 
 use DateTime, DateInterval;
 use WP_Post;
+use function WordPressdotorg\Locales\{ get_locales_with_english_names };
 
 defined( 'WPINC' ) || die();
 
@@ -58,7 +59,8 @@ function register_workshop_meta() {
 			'description'       => __( 'The language that the workshop is presented in.', 'wporg_learn' ),
 			'type'              => 'string',
 			'single'            => true,
-			'sanitize_callback' => '', // todo
+			'default'           => 'en_US',
+			'sanitize_callback' => __NAMESPACE__ . '\sanitize_locale',
 			'show_in_rest'      => true,
 		)
 	);
@@ -70,12 +72,37 @@ function register_workshop_meta() {
 			'description'       => __( 'A language for which captions are available for the workshop video.', 'wporg_learn' ),
 			'type'              => 'string',
 			'single'            => false,
-			'sanitize_callback' => '', // todo
+			'sanitize_callback' => __NAMESPACE__ . '\sanitize_locale',
 			'show_in_rest'      => true,
 		)
 	);
 }
 
+/**
+ * Sanitize a locale value.
+ *
+ * @param string $meta_value
+ * @param string $meta_key
+ * @param string $object_type
+ * @param string $object_subtype
+ *
+ * @return string
+ */
+function sanitize_locale( $meta_value, $meta_key, $object_type, $object_subtype ) {
+	if ( 'wporg_workshop' !== $object_subtype ) {
+		return $meta_value;
+	}
+
+	$meta_value = trim( $meta_value );
+	$locales = array_keys( get_locales_with_english_names() );
+
+	if ( ! in_array( $meta_value, $locales, true ) ) {
+		return '';
+	}
+
+	return $meta_value;
+}
+
 /**
  * Get the duration of a workshop in a specified format.
  *
@@ -125,6 +152,39 @@ function get_workshop_duration( WP_Post $workshop, $format = 'raw' ) {
 	return $return;
 }
 
+/**
+ * Get a list of locales that are associated with at least one workshop.
+ *
+ * @param string $meta_key
+ * @param string $label_language
+ *
+ * @return array
+ */
+function get_available_workshop_locales( $meta_key, $label_language = 'english' ) {
+	global $wpdb;
+
+	$results = $wpdb->get_col( $wpdb->prepare(
+		"
+			SELECT DISTINCT meta_value
+			FROM $wpdb->postmeta
+			WHERE meta_key = %s
+			ORDER BY meta_value ASC
+		",
+		$meta_key
+	) );
+
+	if ( empty( $results ) ) {
+		return array();
+	}
+
+	$available_locales = array_fill_keys( $results, '' );
+
+	$locale_fn = "\WordPressdotorg\Locales\get_locales_with_{$label_language}_names";
+	$locales   = $locale_fn();
+
+	return array_intersect_key( $locales, $available_locales );
+}
+
 /**
  * Add meta boxes to the Edit Workshop screen.
  *
@@ -155,6 +215,7 @@ function add_workshop_metaboxes() {
  */
 function render_metabox_workshop_details( WP_Post $post ) {
 	$duration_interval = get_workshop_duration( $post, 'interval' );
+	$locales           = get_locales_with_english_names();
 	$captions          = get_post_meta( $post->ID, 'video_caption_language' ) ?: array();
 
 	require dirname( dirname( __FILE__ ) ) . '/views/metabox-workshop-details.php';
@@ -198,10 +259,11 @@ function save_workshop_metabox_fields( $post_id, WP_Post $post ) {
 	$video_language = filter_input( INPUT_POST, 'video-language' );
 	update_post_meta( $post_id, 'video_language', $video_language );
 
-	$video_caption_language = filter_input( INPUT_POST, 'video-caption-language' );
-	$captions               = array_map( 'trim', explode( ',', $video_caption_language ) );
-	delete_post_meta( $post_id, 'video_caption_language' );
-	foreach ( $captions as $caption ) {
-		add_post_meta( $post_id, 'video_caption_language', $caption );
+	$captions = filter_input( INPUT_POST, 'video-caption-language', FILTER_DEFAULT, FILTER_REQUIRE_ARRAY );
+	if ( is_array( $captions ) ) {
+		delete_post_meta( $post_id, 'video_caption_language' );
+		foreach ( $captions as $caption ) {
+			add_post_meta( $post_id, 'video_caption_language', $caption );
+		}
 	}
 }
diff --git a/wp-content/plugins/wporg-learn/inc/taxonomy.php b/wp-content/plugins/wporg-learn/inc/taxonomy.php
@@ -344,6 +344,7 @@ function register_workshop_topic() {
 		'labels'            => $labels,
 		'hierarchical'      => true,
 		'public'            => true,
+		'query_var'         => 'wporg_workshop_topic',
 		'show_ui'           => true,
 		'show_admin_column' => true,
 		'show_in_nav_menus' => true,

diff --git a/wp-content/plugins/wporg-learn/views/metabox-workshop-details.php b/wp-content/plugins/wporg-learn/views/metabox-workshop-details.php
@@ -5,6 +5,7 @@
 
 /** @var WP_Post $post */
 /** @var DateInterval $duration_interval */
+/** @var array $locales */
 /** @var array $captions */
 ?>
 
@@ -45,22 +46,30 @@ class="tiny-text"
 	</label>
 </p>
 
-<?php // todo Change this to a select dropdown with locale values. ?>
 <p>
 	<label for="workshop-video-language"><?php esc_html_e( 'Language', 'wporg_learn' ); ?></label>
-	<input
-		id="workshop-video-language"
-		name="video-language"
-		type="text"
-		value="<?php echo esc_attr( $post->video_language ); ?>"
-	/>
+	<select id="workshop-video-language" name="video-language" style="width: 100%;">
+		<?php foreach ( $locales as $code => $label ) : ?>
+			<option value="<?php echo esc_attr( $code ); ?>" <?php selected( $code, $post->video_language ); ?>>
+				<?php echo esc_html( $label ); ?>
+			</option>
+		<?php endforeach; ?>
+	</select>
 </p>
 
-<?php // todo Change this to a multiselect dropdown with locale values. ?>
 <p>
 	<label for="workshop-video-caption-language"><?php esc_html_e( 'Captions', 'wporg_learn' ); ?></label>
-	<textarea id="workshop-video-caption-language" name="video-caption-language"><?php echo esc_attr( implode( ', ', $captions ) ); ?></textarea>
-	<span class="help">
-		<?php esc_html_e( 'Separate multiple languages with a comma.', 'wporg_learn' ); ?>
-	</span>
+	<select id="workshop-video-caption-language" name="video-caption-language[]" style="width: 100%;" multiple>
+		<?php foreach ( $locales as $code => $label ) : ?>
+			<option value="<?php echo esc_attr( $code ); ?>" <?php selected( in_array( $code, $captions, true ) ); ?>>
+				<?php echo esc_html( $label ); ?>
+			</option>
+		<?php endforeach; ?>
+	</select>
 </p>
+
+<script>
+	( function( $ ) {
+		$( '#workshop-video-language, #workshop-video-caption-language' ).select2();
+	} )( jQuery );
+</script>
diff --git a/wp-content/plugins/wporg-learn/wporg-learn.php b/wp-content/plugins/wporg-learn/wporg-learn.php
@@ -19,8 +19,8 @@
  * Actions and filters.
  */
 add_action( 'plugins_loaded', __NAMESPACE__ . '\load_files' );
-add_action( 'admin_enqueue_scripts', __NAMESPACE__ . '\register_thirdparty_assets', 9 );
-add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\register_thirdparty_assets', 9 );
+add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\register_thirdparty_assets', 1 );
+add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\register_thirdparty_assets', 1 );
 
 /**
  * Shortcut to the includes directory.
@@ -54,8 +54,7 @@ function register_thirdparty_assets() {
 		'select2',
 		plugins_url( '/3rd-party/selectWoo/js/selectWoo.min.js', __FILE__ ),
 		array( 'jquery' ),
-		'1.0.8',
-		true
+		'1.0.8'
 	);
 
 	wp_register_style(
@@ -64,4 +63,12 @@ function register_thirdparty_assets() {
 		array(),
 		'1.0.8'
 	);
+
+	if ( 'enqueue_block_editor_assets' === current_action() ) {
+		global $typenow;
+		if ( 'wporg_workshop' === $typenow ) {
+			wp_enqueue_script( 'select2' );
+			wp_enqueue_style( 'select2' );
+		}
+	}
 }
diff --git a/wp-content/themes/pub/wporg-learn-2020/archive-wporg_workshop.php b/wp-content/themes/pub/wporg-learn-2020/archive-wporg_workshop.php
@@ -1,24 +1,40 @@
-<?php get_header(); ?>
+<?php
+global $wp_query;
+$is_filtered = $wp_query->get( 'wporg_workshop_filters' );
+
+get_header(); ?>
 
 <main class="site-main">
 	<section>
 		<div class="row align-middle between section-heading section-heading--with-space">
-			<?php the_archive_title( '<h1 class="section-heading_title h2 col-9">', '</h1>' ); ?>
-			<a class="section-heading_link button button-large" href="https://learn.wordpress.org/workshop-presenter-application/"><?php esc_html_e( 'Submit Workshop Idea', 'wporg-learn' ); ?></a>
-			<?php if ( is_tax() ) :
+			<?php the_archive_title( '<h1 class="section-heading_title h2">', '</h1>' ); ?>
+			<?php get_template_part( 'template-parts/component', 'workshop-search' ); ?>
+			<?php if ( is_tax( 'wporg_workshop_series' ) && have_posts() ) :
 				$series_term = wporg_workshop_series_get_term( $post );
 				?>
-				<?php echo wp_kses_post( wpautop( term_description( $series_term->term_id ) ) ); ?>
+				<div class="section-heading_description col-12">
+					<?php echo wp_kses_post( wpautop( term_description( $series_term->term_id ) ) ); ?>
+				</div>
 			<?php endif; ?>
 		</div>
 		<hr>
-		<?php // Only show the featured workshop on the first page of post type archives.
-		if ( is_post_type_archive() && get_query_var( 'paged' ) < 2 ) : ?>
-			<?php get_template_part( 'template-parts/component', 'featured-workshop' ); ?>
+		<?php if ( is_post_type_archive( 'wporg_workshop' ) ) : ?>
+			<?php get_template_part( 'template-parts/component', 'workshop-filters' ); ?>
 		<?php endif; ?>
-		<?php get_template_part( 'template-parts/component', 'video-grid' ); ?>
 
-		<?php the_posts_pagination(); ?>
+		<?php if ( have_posts() ) : ?>
+			<?php // Only show the featured workshop on the first page of post type archives.
+			if ( is_post_type_archive() && get_query_var( 'paged' ) < 2 && ! $is_filtered ) : ?>
+				<?php get_template_part( 'template-parts/component', 'featured-workshop' ); ?>
+			<?php endif; ?>
+			<?php get_template_part( 'template-parts/component', 'video-grid' ); ?>
+
+			<?php the_posts_pagination(); ?>
+		<?php else : ?>
+			<p>
+				<?php esc_html_e( 'No workshops were found.', 'wporg-learn' ); ?>
+			</p>
+		<?php endif; ?>
 	</section>
 	<hr>
 

diff --git a/wp-content/themes/pub/wporg-learn-2020/css/components/_components.scss b/wp-content/themes/pub/wporg-learn-2020/css/components/_components.scss
@@ -22,6 +22,7 @@
 @import "../../../wporg/css/components/wporg-header";
 @import "content-icon";
 @import "featured-workshop";
+@import "filter-drawer";
 @import "post-card";
 @import "search-form";
 @import "search-grid";