Event dates block and sort UI

amp/curated-list/view.js

@@ -3,6 +3,7 @@
 let isFetching = false;
 let isEndOfData = false;
 buildLoadMoreHandler( document.querySelector( '.newspack-listings__curated-list' ) );
+buildSortHandler( document.querySelector( '.newspack-listings__curated-list' ) );
 function buildLoadMoreHandler( blockWrapperEl ) {
 	const btnEl = blockWrapperEl.querySelector( '[data-next]' );
 	if ( ! btnEl ) return;
@@ -43,6 +44,59 @@ function buildLoadMoreHandler( blockWrapperEl ) {
 		}
 	} );
 }
+function buildSortHandler( blockWrapperEl ) {
+	const sortUi = blockWrapperEl.querySelector( '.newspack-listings__sort-ui' );
+	const sortBy = blockWrapperEl.querySelector( '.newspack-listings__sort-select-control' );
+	const sortOrder = blockWrapperEl.querySelectorAll( 'input' );
+	const btnEl = blockWrapperEl.querySelector( '[data-next]' );
+	if ( ! sortBy || ! sortOrder.length || ! sortUi ) return;
+	const triggers = Array.prototype.concat.call( Array.prototype.slice.call( sortOrder ), [
+		sortBy,
+	] );
+	const postsContainerEl = blockWrapperEl.querySelector( '.newspack-listings__list-container' );
+	const restURL = sortUi.getAttribute( 'data-url' );
+	let isFetching = false;
+	let _sortBy = sortUi.querySelector( '[selected]' ).value;
+	let _order = sortUi.querySelector( '[checked]' ).value;
+	const sortHandler = e => {
+		if ( isFetching ) return false;
+		isFetching = true;
+		blockWrapperEl.classList.remove( 'is-error' );
+		blockWrapperEl.classList.add( 'is-loading' );
+		if ( e.target.tagName.toLowerCase() === 'select' ) {
+			_sortBy = e.target.value;
+		} else {
+			_order = e.target.value;
+		}
+		if ( 'post__in' === e.target.value ) {
+			Array.prototype.forEach.call( sortOrder, button => button.setAttribute( 'disabled' ) );
+		} else {
+			Array.prototype.forEach.call( sortOrder, button => button.removeAttribute( 'disabled' ) );
+		}
+		const requestURL = `${ restURL }&${ encodeURIComponent(
+			'query[sortBy]'
+		) }=${ _sortBy }&${ encodeURIComponent( 'query[order]' ) }=${ _order }`;
+		apiFetchWithRetry( { url: requestURL, onSuccess, onError }, 3 );
+		function onSuccess( data, next ) {
+			if ( ! isPostsDataValid( data ) ) return onError();
+			postsContainerEl.textContent = '';
+			data.forEach( item => {
+				const tempDIV = document.createElement( 'div' );
+				tempDIV.innerHTML = item.html.trim();
+				postsContainerEl.appendChild( tempDIV.childNodes[ 0 ] );
+			} );
+			if ( next && btnEl ) btnEl.setAttribute( 'data-next', next );
+			isFetching = false;
+			blockWrapperEl.classList.remove( 'is-loading' );
+		}
+		function onError() {
+			isFetching = false;
+			blockWrapperEl.classList.remove( 'is-loading' );
+			blockWrapperEl.classList.add( 'is-error' );
+		}
+	};
+	triggers.forEach( trigger => trigger.addEventListener( 'change', sortHandler ) );
+}
 function apiFetchWithRetry( options, n ) {
 	const xhr = new XMLHttpRequest();
 	xhr.onreadystatechange = () => {

includes/class-newspack-listings-api.php

@@ -123,7 +123,17 @@ public static function build_listings_query( $query, $args = [] ) {
 			$args['order'] = $query['order'];
 		}
 		if ( ! empty( $query['sortBy'] ) ) {
-			$args['orderby'] = $query['sortBy'];
+			if ( 'event_date' === $query['sortBy'] ) {
+				$args['orderby']   = 'meta_value';
+				$args['meta_type'] = 'DATE';
+				$args['meta_key']  = 'newspack_listings_event_start_date';
+			} else {
+				$args['orderby'] = $query['sortBy'];
+			}
+		}
+
+		if ( ! empty( $query['post__in'] ) ) {
+			$args['post__in'] = $query['post__in'];
 		}
 
 		if (
@@ -231,7 +241,7 @@ function( $post ) use ( $attributes, $fields, $is_amp, $next_page, $query ) {
 
 						// if $fields includes html, get rendered HTML for the post.
 						if ( in_array( 'html', $fields ) && ! empty( $attributes ) ) {
-							$html = Blocks::template_include(
+							$html = Utils\template_include(
 								'listing',
 								[
 									'attributes' => $attributes,
@@ -257,8 +267,8 @@ function( $post ) use ( $attributes, $fields, $is_amp, $next_page, $query ) {
 							$item['tags'] = get_the_terms( $post->ID, Core::NEWSPACK_LISTINGS_TAG );
 						}
 
-						// If $fields includes author, get the post author.
-						if ( in_array( 'author', $fields ) ) {
+						// If $fields includes author and the post isn't set to hide author, get the post author.
+						if ( in_array( 'author', $fields ) && empty( get_post_meta( $post->ID, 'newspack_listings_hide_author', true ) ) ) {
 							$item['author'] = get_the_author_meta( 'display_name', $post->post_author );
 						}
 
@@ -311,7 +321,7 @@ function( $post ) use ( $attributes, $fields, $is_amp, $next_page, $query ) {
 			}
 
 			if ( ! empty( $next_url ) ) {
-				$response->header( 'next-url', esc_url( $next_url ) );
+				$response->header( 'next-url', $next_url );
 			}
 
 			return $response;

includes/class-newspack-listings-blocks.php

@@ -87,14 +87,15 @@ public static function manage_editor_assets() {
 				'post_type_label' => get_post_type_object( $post_type )->labels->singular_name,
 				'post_type'       => $post_type,
 				'post_types'      => $post_types,
-				'meta_fields'     => Core::get_meta_fields( $post_type ),
 				'taxonomies'      => [
 					'category' => Core::NEWSPACK_LISTINGS_CAT,
 					'tag'      => Core::NEWSPACK_LISTINGS_TAG,
 				],
 
 				// If we don't have ANY listings that can be added to a list yet, alert the editor so we can show messaging.
 				'no_listings'     => 0 === $total_count,
+				'date_format'     => get_option( 'date_format' ),
+				'time_format'     => get_option( 'time_format' ),
 			]
 		);
 
@@ -237,29 +238,6 @@ public static function register_block_patterns() {
 			}
 		}
 	}
-
-	/**
-	 * Loads a template with given data in scope.
-	 *
-	 * @param string $template Name of the template to be included.
-	 * @param array  $data     Data to be passed into the template to be included.
-	 * @param string $path     (Optional) Path to the folder containing the template.
-	 * @return string
-	 */
-	public static function template_include( $template, $data = [], $path = NEWSPACK_LISTINGS_PLUGIN_FILE . 'src/templates/' ) {
-		if ( ! strpos( $template, '.php' ) ) {
-			$template = $template . '.php';
-		}
-		$path .= $template;
-		if ( ! is_file( $path ) ) {
-			return '';
-		}
-		ob_start();
-		include $path;
-		$contents = ob_get_contents();
-		ob_end_clean();
-		return $contents;
-	}
 }
 
 Newspack_Listings_Blocks::instance();