Pledge List: Display pledges in list with sort and search ability (#33)

* Use the post-type when choosing template partial
* Add pledge archive templates
* Style pledge list page
* Style individual pledge
* Use pledge featured image for the logo
* Fix aspect ratio of image
* Add real contributors to the pledges
* Enable sorting and searching of pledges
* Add pledge sorting markup
* Style the page header
* Restrict any pledges with no contributors from being shown on the frontend
* Update contributor count key name

phpcs.xml.dist

@@ -94,6 +94,12 @@
 		<exclude name="WordPress.PHP.DevelopmentFunctions.error_log_print_r" />
 	</rule>
 
+	<!-- Ignore the CPT template filename, since it is based on the CPT name, and can't change. -->
+	<rule ref="WordPress.Files.FileName.NotHyphenatedLowercase">
+		<exclude-pattern>*/template-parts/content-5ftf_pledge.php$</exclude-pattern>
+		<exclude-pattern>*/archive-5ftf_pledge.php$</exclude-pattern>
+	</rule>
+
 	<rule ref="WordPress-Docs">
 		<!-- If files/variables are given descriptive names like they should be, then an explicit description is usually unnecessary, so leave this as a judgement call. -->
 		<exclude name="Squiz.Commenting.FunctionComment.MissingParamComment" />

plugins/wporg-5ftf/includes/pledge.php

@@ -9,6 +9,7 @@ use WordPressDotOrg\FiveForTheFuture\Email;
 
 use WordPressDotOrg\FiveForTheFuture;
 use WP_Error;
+use const WordPressDotOrg\FiveForTheFuture\PledgeMeta\META_PREFIX;
 
 defined( 'WPINC' ) || die();
 
@@ -18,6 +19,7 @@ const CPT_ID  = FiveForTheFuture\PREFIX . '_' . SLUG;
 
 add_action( 'init', __NAMESPACE__ . '\register', 0 );
 add_action( 'admin_menu', __NAMESPACE__ . '\admin_menu' );
+add_action( 'pre_get_posts', __NAMESPACE__ . '\filter_query' );
 
 /**
  * Register all the things.
@@ -167,3 +169,53 @@ function send_pledge_verification_email( $pledge_id, $action_page_id ) {
 		$message
 	);
 }
+
+/**
+ * Filter query for archive & search pages to ensure we're only showing the expected data.
+ *
+ * @param WP_Query $query The WP_Query instance (passed by reference).
+ * @return void
+ */
+function filter_query( $query ) {
+	if ( is_admin() || ! $query->is_main_query() ) {
+		return;
+	}
+
+	$contributor_count_key = META_PREFIX . 'pledge-confirmed-contributors';
+
+	// Set up meta queries to include the "valid pledge" check, added to both search and any pledge requests.
+	$meta_queries = (array) $query->get( 'meta_query' );
+	$meta_queries[] = array(
+		'key' => $contributor_count_key,
+		'value' => 0,
+		'compare' => '>',
+		'type' => 'NUMERIC',
+	);
+
+	if ( CPT_ID === $query->get( 'post_type' ) ) {
+		$query->set( 'meta_query', $meta_queries );
+	}
+
+	// Searching is restricted to pledges only.
+	if ( $query->is_search ) {
+		$query->set( 'post_type', CPT_ID );
+		$query->set( 'meta_query', $meta_queries );
+	}
+
+	// Use the custom order param to sort the archive page.
+	if ( $query->is_archive && CPT_ID === $query->get( 'post_type' ) ) {
+		$order = isset( $_GET['order'] ) ? $_GET['order'] : '';
+		switch ( $order ) {
+			case 'alphabetical':
+				$query->set( 'orderby', 'name' );
+				$query->set( 'order', 'ASC' );
+				break;
+
+			case 'contributors':
+				$query->set( 'meta_key', $contributor_count_key );
+				$query->set( 'orderby', 'meta_value_num' );
+				$query->set( 'order', 'DESC' );
+				break;
+		}
+	}
+}

themes/wporg-5ftf/archive-5ftf_pledge.php

@@ -0,0 +1,72 @@
+<?php
+
+namespace WordPressdotorg\Five_for_the_Future\Theme;
+
+use const WordPressDotOrg\FiveForTheFuture\Pledge\CPT_ID;
+
+// If we don't have any posts to display for the archive, then send a 404 status. See #meta4151.
+if ( ! have_posts() ) {
+	status_header( 404 );
+	nocache_headers();
+}
+
+get_header(); ?>
+
+	<main id="main" class="site-main" role="main">
+
+	<?php if ( have_posts() ) : ?>
+
+		<header class="page-header">
+			<h1 class="page-title"><?php esc_html_e( 'Pledges', 'wordpressorg' ); ?></h1>
+			<div class="page-header-callout">
+				<a class="button" href="/for-organizations/" >
+					<?php esc_html_e( 'Pledge your company', 'wordpressorg' ); ?>
+				</a>
+			</div>
+
+			<div class="page-header-controls">
+				<form method="get" action="<?php echo esc_url( get_post_type_archive_link( CPT_ID ) ); ?>">
+					<label for="pledge-sort"><?php esc_html_e( 'Sort pledges by', 'wordpressorg' ); ?></label>
+					<select class="custom-select" id="pledge-sort" name="order">
+						<option value="" <?php selected( $_GET['order'], '' ); ?>>
+							<?php esc_html_e( 'All Pledges', 'wordpressorg' ); ?>
+						</option>
+						<option value="alphabetical" <?php selected( $_GET['order'], 'alphabetical' ); ?>>
+							<?php esc_html_e( 'Alphabetical', 'wordpressorg' ); ?>
+						</option>
+						<option value="contributors" <?php selected( $_GET['order'], 'contributors' ); ?>>
+							<?php esc_html_e( 'Total Contributors', 'wordpressorg' ); ?>
+						</option>
+					</select>
+					<span class="screen-reader-text">
+						<input type="submit" />
+					</span>
+				</form>
+
+				<?php get_search_form(); ?>
+			</div>
+		</header><!-- .page-header -->
+
+		<?php
+
+		while ( have_posts() ) :
+			the_post();
+
+			get_template_part( 'template-parts/content', get_post_type() );
+
+		endwhile;
+
+		the_posts_pagination();
+
+		?>
+
+	<?php else :
+
+		get_template_part( 'template-parts/content', 'none' );
+
+	endif; ?>
+
+	</main><!-- #main -->
+
+<?php
+get_footer();

themes/wporg-5ftf/archive.php

@@ -26,23 +26,19 @@ get_header(); ?>
 		while ( have_posts() ) :
 			the_post();
 
-			/*
-			 * Include the Post-Format-specific template for the content.
-			 * If you want to override this in a child theme, then include a file
-			 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
-			 */
-			get_template_part( 'template-parts/content', 'page' );
+			get_template_part( 'template-parts/content', get_post_type() );
 
 		endwhile;
 
 		the_posts_pagination();
 
-	else :
+		?>
+
+	<?php else :
 
 		get_template_part( 'template-parts/content', 'none' );
 
-	endif;
-	?>
+	endif; ?>
 
 	</main><!-- #main -->
 

themes/wporg-5ftf/css/base/_base.scss

@@ -5,3 +5,4 @@
 @import "../../../pub/wporg/css/base/lists";
 @import "../../../pub/wporg/css/base/tables";
 @import "../../../pub/wporg/css/base/typography";
+@import "select";

themes/wporg-5ftf/css/base/_select.scss

@@ -0,0 +1,40 @@
+// Remove the browser styling from a select box and create a simple dropdown.
+// See https://www.filamentgroup.com/lab/select-css.html
+.custom-select {
+	display: inline-block;
+	box-sizing: border-box;
+	margin: -0.5rem 0;
+	padding: 0.5rem 2rem 0.5rem .8rem;
+	width: auto;
+
+	font-size: 1em;
+	line-height: 1.3;
+
+	border: none;
+	box-shadow: none;
+	border-radius: 0.5em;
+	-moz-appearance: none;
+	-webkit-appearance: none;
+	appearance: none;
+
+	background-color: transparent;
+	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg width="14" height="8" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M2 0L7 5L12 0L14 1L7 8L0 1L2 0Z" fill="%23555D66"/%3E%3C/svg%3E%0A');
+	background-repeat: no-repeat;
+	background-position: right .7em top 50%;
+	background-size: .65em auto;
+
+	&::-ms-expand {
+		display: none;
+	}
+
+	&:focus {
+		box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
+		box-shadow: 0 0 0 3px -moz-mac-focusring;
+		color: #222;
+		outline: none;
+	}
+
+	& option {
+		font-weight: normal;
+	}
+}

themes/wporg-5ftf/css/components/_archive.scss

@@ -0,0 +1,9 @@
+body.archive {
+
+	.page-title {
+		color: $color__text-heading-darker;
+		font-size: ms(8);
+		font-weight: 300;
+		line-height: 1.5;
+	}
+}

themes/wporg-5ftf/css/components/_components.scss

@@ -20,8 +20,10 @@
 @import "../../../pub/wporg/css/components/wporg-footer";
 @import "../../../pub/wporg/css/components/wporg-header";
 @import "about";
+@import "archive";
 @import "entry-content";
 @import "page";
+@import "pledge-list";
 @import "site-content";
 @import "site-header";
 @import "site-title";

themes/wporg-5ftf/css/components/_pledge-list.scss

@@ -0,0 +1,58 @@
+body.archive.post-type-archive-5ftf_pledge {
+
+	// Expand archive content area to full-width of header.
+	.site-content .site-main {
+		padding: 0 10px;
+		max-width: $size__site-main;
+	}
+
+	.page-header {
+		display: grid;
+		grid-template-columns: 1fr auto;
+		align-items: center;
+		margin: ms(12) 0;
+
+		.page-title {
+			grid-column: 1;
+			grid-row: 1;
+			margin: 0;
+		}
+
+		.page-header-callout {
+			grid-column: 2;
+			grid-row: 1;
+		}
+
+		.page-header-controls {
+			grid-column: 1 / span 2;
+			grid-row: 2;
+
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+			margin-top: ms(2);
+			border-top: 1px solid $color-gray-light-500;
+			padding-top: ms(2);
+
+			form:nth-of-type(2n+1) {
+				grid-column: 1;
+				grid-row: 1;
+			}
+
+			form:nth-of-type(2n) {
+				grid-column: 2;
+				grid-row: 1;
+				text-align: right;
+			}
+		}
+	}
+	
+	.page-header-controls {
+		font-size: ms(-2);
+
+		label {
+			display: inline-block;
+			font-size: 1em;
+			font-weight: 700;
+		}
+	}
+}

themes/wporg-5ftf/css/objects/_objects.scss

@@ -10,4 +10,5 @@
 @import "hero";
 @import "image";
 @import "pledge-form";
+@import "pledge";
 @import "pullquote";

themes/wporg-5ftf/css/objects/_pledge.scss

@@ -0,0 +1,74 @@
+article.type-5ftf_pledge {
+	/* Structure */
+	display: grid;
+	grid-template-columns: 330px auto;
+	margin-bottom: ms(12);
+
+	.entry-image {
+		grid-column: 1;
+		grid-row: 1 / span 2;
+		margin-right: ms(8);
+	}
+
+	.entry-header {
+		grid-column: 2;
+		grid-row: 1;
+	}
+
+	.entry-content {
+		grid-column: 2;
+		grid-row: 2;
+	}
+
+	/* Styles */
+
+	.entry-image__placeholder {
+		background: $color-gray-light-100;
+		width: 100%;
+		height: 100px;
+	}
+	
+	.entry-image__logo {
+		padding: ms(-2);
+		background: $color-gray-light-100;
+		text-align: center;
+
+		img {
+			display: inline-block;
+			vertical-align: middle;
+			max-height: 100px;
+			width: auto;
+			height: auto;
+		}
+	}
+
+	.entry-title {
+		margin-top: 0;
+		font-size: ms(2);
+		font-weight: 400;
+
+		a {
+			text-decoration: underline;
+		}
+	}
+	
+	.entry-content {
+		font-size: ms(-1);
+		color: $color__text-darker;
+	}
+
+	.pledge-contributors h3 {
+		margin-top: 0;
+		font-size: ms(-1);
+		color: $color__text-lighter;
+	}
+
+	.pledge-contributor__avatar {
+		display: inline-block;
+		background: $color-gray-light-700;
+
+		img {
+			vertical-align: middle;
+		}
+	}
+}

themes/wporg-5ftf/single.php

@@ -9,7 +9,7 @@ get_header(); ?>
 		<?php while ( have_posts() ) :
 			the_post();
 
-			get_template_part( 'template-parts/plugin', 'single' );
+			get_template_part( 'template-parts/content', get_post_type() );
 		endwhile; ?>
 
 	</main><!-- #main -->

themes/wporg-5ftf/template-parts/content-5ftf_pledge.php

@@ -0,0 +1,77 @@
+<?php
+/**
+ * Display pledge data in the archive & single view.
+ */
+
+namespace WordPressdotorg\Five_for_the_Future\Theme;
+
+use WordPressDotOrg\FiveForTheFuture\Contributor;
+use WordPressDotOrg\FiveForTheFuture\PledgeMeta;
+
+$data = array();
+
+foreach ( PledgeMeta\get_pledge_meta_config() as $key => $config ) {
+	$data[ $key ] = get_post_meta( get_the_ID(), PledgeMeta\META_PREFIX . $key, $config['single'] );
+}
+
+$contributors = Contributor\get_pledge_contributors( get_the_ID() );
+$count        = count( $contributors );
+
+$content = apply_filters( 'the_content', $data['org-description'] );
+
+$contributor_title = sprintf(
+	esc_html(
+		_n( '%1$s has pledged %2$d contributor', '%1$s has pledged %2$d contributors', $count, 'wordpressorg' )
+	),
+	wp_kses_post( get_the_title() ),
+	intval( $count )
+);
+?>
+
+<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
+	<div class="entry-image">
+		<?php if ( has_post_thumbnail() ) : ?>
+			<div class="entry-image__logo">
+				<?php the_post_thumbnail(); ?>
+			</div>
+		<?php else : ?>
+			<div class="entry-image__placeholder"></div>
+		<?php endif; ?>
+	</div><!-- .post-thumbnail -->
+
+	<header class="entry-header">
+		<?php if ( is_singular() ) : ?>
+
+			<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
+
+		<?php else : ?>
+
+			<?php the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); ?>
+
+		<?php endif; ?>
+	</header><!-- .entry-header -->
+
+	<div class="entry-content">
+		<?php
+			echo wp_kses_post( $content );
+		?>
+		
+		<div class="pledge-contributors">
+			<?php /* phpcs:ignore -- escaped above */ ?>
+			<h3><?php echo $contributor_title ?></h3>
+
+			<?php
+			foreach ( $contributors as $contrib_post ) {
+				$contrib = get_user_by( 'login', $contrib_post->post_title );
+				if ( $contrib ) {
+					printf(
+						'<span class="pledge-contributor__avatar">%s</span>',
+						get_avatar( $contrib->user_email, 30, 'blank' )
+					);
+				}
+			}
+			?>
+		</div><!-- .pledge-contributors -->
+
+	</div><!-- .entry-content -->
+</article><!-- #post-## -->