87 lines
2.4 KiB
PHP
87 lines
2.4 KiB
PHP
<?php
|
|
/**
|
|
* Block Name: Team Grid
|
|
*
|
|
* A responsive grid of team members. Each card uses a native <details>
|
|
* element so the bio expands when the photo, name, or title is clicked.
|
|
*
|
|
* @package CWC
|
|
*/
|
|
|
|
namespace CWC;
|
|
|
|
$single = get_field( 'single' );
|
|
$members = get_field( 'members' );
|
|
|
|
if ( empty( $members ) ) {
|
|
return;
|
|
}
|
|
|
|
// Enqueue the per-block JS only when this block actually renders.
|
|
$js_path = '/views/blocks/team-grid/team-grid.js';
|
|
if ( file_exists( get_stylesheet_directory() . $js_path ) ) {
|
|
wp_enqueue_script_module(
|
|
'cwc-team-grid',
|
|
get_stylesheet_directory_uri() . $js_path,
|
|
array(),
|
|
(string) filemtime( get_stylesheet_directory() . $js_path )
|
|
);
|
|
}
|
|
|
|
$modeSingle = '';
|
|
|
|
$blockID = wp_unique_id( 'single-' );
|
|
|
|
if ( $single ) {
|
|
$modeSingle = 'name=' . $blockID;
|
|
}
|
|
|
|
$classes = 'team-grid container my-section mx-auto';
|
|
$wrapper = blockWrapperAttributes( $classes, $is_preview );
|
|
?>
|
|
|
|
<section <?php echo wp_kses_post( $wrapper ); ?>>
|
|
<div class="team-grid__inner grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12">
|
|
<?php foreach ( $members as $member ) : ?>
|
|
<article class="team-grid__card">
|
|
<details class="team-grid__details" <?php echo esc_attr( $modeSingle ); ?>>
|
|
<summary class="team-grid__summary">
|
|
<?php if ( ! empty( $member['image'] ) ) : ?>
|
|
<img
|
|
class="team-grid__photo"
|
|
src="<?php echo esc_url( $member['image']['url'] ); ?>"
|
|
alt="<?php echo esc_attr( $member['image']['alt'] ?? '' ); ?>"
|
|
loading="lazy"
|
|
/>
|
|
<?php endif; ?>
|
|
|
|
<?php if ( ! empty( $member['name'] ) ) : ?>
|
|
<h2 class="team-grid__name">
|
|
<?php echo wp_kses_post( $member['name'] ); ?>
|
|
</h2>
|
|
<?php endif; ?>
|
|
|
|
<?php if ( ! empty( $member['title'] ) ) : ?>
|
|
<h3 class="team-grid__title">
|
|
<?php echo wp_kses_post( $member['title'] ); ?>
|
|
</h3>
|
|
<?php endif; ?>
|
|
|
|
<h4 class="team-grid__read-bio" aria-label="Read Bio for <?php echo esc_attr( $member['name'] ); ?>">Read Bio</h4>
|
|
</summary>
|
|
|
|
<div class="team-grid__bio-wrap">
|
|
<div class="team-grid__bio-inner">
|
|
<?php if ( ! empty( $member['bio'] ) ) : ?>
|
|
<div class="team-grid__bio">
|
|
<?php echo wp_kses_post( $member['bio'] ); ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</article>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</section>
|