✨ feat: Enhance team-grid block with single open mode and updated styles

views/blocks/team-grid/team-grid.php

@@ -10,12 +10,21 @@
 
 namespace CWC;
 
+$single  = get_field( 'single' );
 $members = get_field( 'members' );
 
 if ( empty( $members ) ) {
 	return;
 }
 
+$modeSingle = '';
+
+$blockID = wp_unique_id( 'single-' );
+
+if ( $single ) {
+    $modeSingle = 'name=' . $blockID;
+}
+
 $classes = 'team-grid container my-section mx-auto';
 $wrapper = blockWrapperAttributes( $classes, $is_preview );
 ?>
@@ -24,7 +33,7 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
 	<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">
+				<details class="team-grid__details" <?php echo esc_attr( $modeSingle ); ?>>
 					<summary class="team-grid__summary">
 						<?php if ( ! empty( $member['image'] ) ) : ?>
 							<img
@@ -36,16 +45,18 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
 						<?php endif; ?>
 
 						<?php if ( ! empty( $member['name'] ) ) : ?>
-							<h3 class="team-grid__name">
+							<h2 class="team-grid__name">
 								<?php echo wp_kses_post( $member['name'] ); ?>
-							</h3>
+							</h2>
 						<?php endif; ?>
 
 						<?php if ( ! empty( $member['title'] ) ) : ?>
-							<p class="team-grid__title">
+							<h3 class="team-grid__title">
 								<?php echo wp_kses_post( $member['title'] ); ?>
-							</p>
+							</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">