From 5b839d8dc80088ea7340c4f3bdef15ad72e80974 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Thu, 29 Aug 2024 16:58:51 -0400
Subject: [PATCH] Pledge contribution block: Add small truncated style for
 pledge list view

---
 .../patterns/archive-5ftf-pledge.php          |  4 +-
 .../src/pledge-contributors/index.php         |  8 ++++
 .../src/pledge-contributors/render.php        | 16 +++++++-
 .../src/pledge-contributors/style.scss        | 40 ++++++++++++++-----
 4 files changed, 55 insertions(+), 13 deletions(-)

diff --git a/themes/wporg-5ftf-2024/patterns/archive-5ftf-pledge.php b/themes/wporg-5ftf-2024/patterns/archive-5ftf-pledge.php
index b5445a1..fad1274 100644
--- a/themes/wporg-5ftf-2024/patterns/archive-5ftf-pledge.php
+++ b/themes/wporg-5ftf-2024/patterns/archive-5ftf-pledge.php
@@ -73,9 +73,7 @@ if ( is_search() ) {
 				</div>
 				<!-- /wp:group -->
 
-				<!-- wp:paragraph -->
-				<p>small avatar list</p>
-				<!-- /wp:paragraph -->
+				<!-- wp:wporg/pledge-contributors {"className":"is-style-truncated"} /-->
 			</div>
 			<!-- /wp:group -->
 		</div>
diff --git a/themes/wporg-5ftf-2024/src/pledge-contributors/index.php b/themes/wporg-5ftf-2024/src/pledge-contributors/index.php
index 5faf42f..f56bf57 100644
--- a/themes/wporg-5ftf-2024/src/pledge-contributors/index.php
+++ b/themes/wporg-5ftf-2024/src/pledge-contributors/index.php
@@ -7,6 +7,7 @@
  */
 
 namespace WordPressdotorg\Theme\FiveForTheFuture_2024\Pledge_Contributors;
+const TRUNCATED_MAX = 15;
 
 defined( 'WPINC' ) || die();
 
@@ -17,4 +18,11 @@ add_action( 'init', __NAMESPACE__ . '\init' );
  */
 function init() {
 	register_block_type( dirname( __DIR__, 2 ) . '/build/pledge-contributors' );
+	register_block_style(
+		'wporg/pledge-contributors',
+		array(
+			'name'  => 'truncated',
+			'label' => _x( 'Truncated', 'block style name', 'wporg-5ftf' ),
+		)
+	);
 }
diff --git a/themes/wporg-5ftf-2024/src/pledge-contributors/render.php b/themes/wporg-5ftf-2024/src/pledge-contributors/render.php
index 576a6fb..7b6e7a6 100644
--- a/themes/wporg-5ftf-2024/src/pledge-contributors/render.php
+++ b/themes/wporg-5ftf-2024/src/pledge-contributors/render.php
@@ -1,6 +1,7 @@
 <?php
 
 use WordPressDotOrg\FiveForTheFuture\Contributor;
+use const WordPressdotorg\Theme\FiveForTheFuture_2024\Pledge_Contributors\TRUNCATED_MAX;
 
 if ( ! $block->context['postId'] ) {
 	return '';
@@ -10,6 +11,16 @@ $contributors = Contributor\get_contributor_user_objects(
 	Contributor\get_pledge_contributors( $block->context['postId'], 'publish' )
 );
 
+$is_truncated = isset( $attributes['className'] ) && str_contains( $attributes['className'], 'is-style-truncated' );
+
+// Initialize count to zero for untruncated view.
+$count_more = 0;
+
+if ( $is_truncated ) {
+	$count_more = count( $contributors ) - TRUNCATED_MAX;
+	$contributors = array_splice( $contributors, 0, TRUNCATED_MAX );
+}
+
 ?>
 <div
 	<?php echo get_block_wrapper_attributes(); // phpcs:ignore ?>
@@ -25,8 +36,11 @@ $contributors = Contributor\get_contributor_user_objects(
 					</span>
 				</li>
 			<?php endforeach; ?>
+			<?php if ( $count_more > 0 ) : ?>
+				<li class="pledge-contributors__more"><?php echo '+' . esc_html( $count_more ); ?></li>
+			<?php endif; ?>
 		</ul>
 	<?php else : ?>
-		<p><?php esc_html_e( 'No confirmed contributors yet.', 'wporg-5ftf' ); ?></p>
+		<p class="pledge-no-contributors"><?php esc_html_e( 'No confirmed contributors yet.', 'wporg-5ftf' ); ?></p>
 	<?php endif; ?>
 </div>
diff --git a/themes/wporg-5ftf-2024/src/pledge-contributors/style.scss b/themes/wporg-5ftf-2024/src/pledge-contributors/style.scss
index a2bb89d..7d1f50a 100644
--- a/themes/wporg-5ftf-2024/src/pledge-contributors/style.scss
+++ b/themes/wporg-5ftf-2024/src/pledge-contributors/style.scss
@@ -1,13 +1,19 @@
-.wp-block-wporg-pledge-contributors ul {
-	display: flex;
-	flex-wrap: wrap;
-	gap: var(--wp--preset--spacing--10);
-	list-style: none;
-	padding-left: 0;
+.wp-block-wporg-pledge-contributors {
+	--wporg-pledge-contributors--spacing--size: 70px;
+	--wporg-pledge-contributors--spacing--block-gap: var(--wp--preset--spacing--10);
+
+	ul {
+		display: flex;
+		flex-wrap: wrap;
+		align-content: center;
+		gap: var(--wporg-pledge-contributors--spacing--block-gap);
+		list-style: none;
+		padding-left: 0;
+	}
 
 	li {
-		width: 70px;
-		height: 70px;
+		width: var(--wporg-pledge-contributors--spacing--size);
+		height: var(--wporg-pledge-contributors--spacing--size);
 	}
 
 	.pledge-contributor__avatar a {
@@ -21,10 +27,26 @@
 		}
 
 		img {
-			vertical-align: middle;
+			display: block;
 			border-radius: 50%;
 			max-width: 100%;
 			height: auto;
 		}
 	}
+
+	.pledge-contributors__more {
+		font-size: var(--wp--preset--font-size--small);
+		line-height: var(--wp--custom--body--small--typography--line-height);
+		align-content: center;
+	}
+
+	.pledge-no-contributors {
+		font-size: var(--wp--preset--font-size--small);
+		line-height: var(--wp--custom--body--small--typography--line-height);
+	}
+
+	&.is-style-truncated {
+		--wporg-pledge-contributors--spacing--size: 30px;
+		--wporg-pledge-contributors--spacing--block-gap: 4px;
+	}
 }