tec3/five-for-the-future
tec3/five-for-the-future
1
0
Fork 0
mirror of https://github.com/WordPress/five-for-the-future.git synced 2025-04-18 17:33:43 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Pledge contribution block: Add small truncated style for pledge list view

Browse source
This commit is contained in:
Kelly Dwan 2024-08-29 16:58:51 -04:00
parent 0e5b8788eb
commit 5b839d8dc8
No known key found for this signature in database
GPG key ID: 8BA5575F3D11575D
4 changed files with 55 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
themes/wporg-5ftf-2024/patterns/archive-5ftf-pledge.php
View file

@ -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>

8
themes/wporg-5ftf-2024/src/pledge-contributors/index.php
View file

@ -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' ),
)
);
}

16
themes/wporg-5ftf-2024/src/pledge-contributors/render.php
View file

@ -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>

40
themes/wporg-5ftf-2024/src/pledge-contributors/style.scss
View file

@ -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;
}
}