Solo-Web-Works/CWC
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Keith Solomon
2026-07-25 15:15:13 -05:00
parent 1c5c727691
commit 18dde4c9f4
5 changed files with 130 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
acf/group_team_grid.json
+23 -2
View File
@@ -2,6 +2,27 @@
"key": "group_team_grid", "key": "group_team_grid",
"title": "Team Grid", "title": "Team Grid",
"fields": [ "fields": [
{
"key": "field_6a650dee2a34c",
"label": "Single Open Mode",
"name": "single",
"aria-label": "",
"type": "true_false",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"message": "Check to allow only one bio open at a time",
"default_value": 0,
"allow_in_bindings": 0,
"ui": 0,
"ui_on_text": "",
"ui_off_text": ""
},
{ {
"key": "field_team_grid_members", "key": "field_team_grid_members",
"label": "Members", "label": "Members",
@@ -125,7 +146,7 @@
{ {
"param": "block", "param": "block",
"operator": "==", "operator": "==",
"value": "acf/team-grid" "value": "acf\/team-grid"
} }
] ]
], ],
@@ -141,5 +162,5 @@
"display_title": "", "display_title": "",
"allow_ai_access": false, "allow_ai_access": false,
"ai_description": "", "ai_description": "",
"modified": 1784992250 "modified": 1785007821
} }
static/dist/theme.css
Vendored
+50 -29
View File
@@ -5786,15 +5786,16 @@ a.contact-info__value:hover {
} }
} }
.team-grid { .team-grid {
&__card { margin-block: calc(var(--spacing) * 12);
.team-grid__card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
&__details { .team-grid__details {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
&__summary { .team-grid__summary {
display: flex; display: flex;
cursor: pointer; cursor: pointer;
list-style-type: none; list-style-type: none;
@@ -5808,27 +5809,22 @@ a.contact-info__value:hover {
display: none; display: none;
content: ''; content: '';
} }
&:hover {
.team-grid__read-bio::after {
content: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20transform%3D%22rotate(0%200%200)%22%3E%3Cpath%20d%3D%22M6.28033%2010.5947C5.98744%2010.3018%205.51256%2010.3018%205.21967%2010.5947C4.92678%2010.8876%204.92678%2011.3624%205.21967%2011.6553L11.4697%2017.9053C11.7626%2018.1982%2012.2374%2018.1982%2012.5303%2017.9053L18.7803%2011.6553C19.0732%2011.3624%2019.0732%2010.8876%2018.7803%2010.5947C18.4874%2010.3018%2018.0126%2010.3018%2017.7197%2010.5947L12%2016.3143L6.28033%2010.5947Z%22%20fill%3D%22%23006196%22%2F%3E%3Cpath%20opacity%3D%221%22%20d%3D%22M6.28033%206.09467C5.98744%205.80178%205.51256%205.80178%205.21967%206.09467C4.92678%206.38756%204.92678%206.86244%205.21967%207.15533L11.4697%2013.4053C11.7626%2013.6982%2012.2374%2013.6982%2012.5303%2013.4053L18.7803%207.15533C19.0732%206.86244%2019.0732%206.38756%2018.7803%206.09467C18.4874%205.80178%2018.0126%205.80178%2017.7197%206.09467L12%2011.8143L6.28033%206.09467Z%22%20fill%3D%22%23006196%22%2F%3E%3C%2Fsvg%3E");
width: 1.25rem;
height: 1.25rem;
}
}
} }
&__photo { .team-grid__photo {
margin-bottom: calc(var(--spacing) * 4); margin-bottom: calc(var(--spacing) * 4);
height: calc(var(--spacing) * 32); height: 100%;
width: calc(var(--spacing) * 32); width: 100%;
border-radius: var(--radius-md); border-radius: var(--radius-md);
object-fit: cover; object-fit: cover;
@media (width >= 40rem) {
height: calc(var(--spacing) * 40);
}
@media (width >= 40rem) {
width: calc(var(--spacing) * 40);
}
@media (width >= 64rem) {
height: calc(var(--spacing) * 48);
}
@media (width >= 64rem) {
width: calc(var(--spacing) * 48);
}
} }
&__name { .team-grid__name {
margin-bottom: calc(var(--spacing) * 1); margin-bottom: calc(var(--spacing) * 1);
font-size: var(--text-22px); font-size: var(--text-22px);
--tw-leading: var(--leading-tight); --tw-leading: var(--leading-tight);
@@ -5837,34 +5833,59 @@ a.contact-info__value:hover {
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: var(--color-cwc-blue-01); color: var(--color-cwc-blue-01);
} }
&__title { .team-grid__title {
margin-bottom: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 3);
font-size: var(--text-16px); font-size: var(--text-16px);
--tw-font-weight: var(--font-weight-light); --tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-light); font-weight: var(--font-weight-normal);
color: var(--color-gray-600); color: var(--color-cwc-blue-01);
font-style: italic; font-style: italic;
} }
&__bio-wrap { .team-grid__read-bio {
margin-bottom: calc(var(--spacing) * 1);
display: flex;
align-items: center;
justify-content: center;
gap: calc(var(--spacing) * 2);
font-size: var(--text-16px);
--tw-leading: var(--leading-snug);
line-height: var(--leading-snug);
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
color: var(--color-cwc-blue-01);
&::after {
content: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20transform%3D%22rotate(0%200%200)%22%3E%3Cpath%20d%3D%22M6.28033%2010.5947C5.98744%2010.3018%205.51256%2010.3018%205.21967%2010.5947C4.92678%2010.8876%204.92678%2011.3624%205.21967%2011.6553L11.4697%2017.9053C11.7626%2018.1982%2012.2374%2018.1982%2012.5303%2017.9053L18.7803%2011.6553C19.0732%2011.3624%2019.0732%2010.8876%2018.7803%2010.5947C18.4874%2010.3018%2018.0126%2010.3018%2017.7197%2010.5947L12%2016.3143L6.28033%2010.5947Z%22%20fill%3D%22%23006196%22%2F%3E%3Cpath%20opacity%3D%220.5%22%20d%3D%22M6.28033%206.09467C5.98744%205.80178%205.51256%205.80178%205.21967%206.09467C4.92678%206.38756%204.92678%206.86244%205.21967%207.15533L11.4697%2013.4053C11.7626%2013.6982%2012.2374%2013.6982%2012.5303%2013.4053L18.7803%207.15533C19.0732%206.86244%2019.0732%206.38756%2018.7803%206.09467C18.4874%205.80178%2018.0126%205.80178%2017.7197%206.09467L12%2011.8143L6.28033%206.09467Z%22%20fill%3D%22%23006196%22%2F%3E%3C%2Fsvg%3E");
width: 1.25rem;
height: 1.25rem;
}
}
.team-grid__bio-wrap {
display: grid; display: grid;
grid-template-rows: 0fr; grid-template-rows: 0fr;
transition: grid-template-rows 300ms ease; transition: grid-template-rows 300ms ease;
} }
&__details[open] &__bio-wrap { .team-grid__details[open] {
grid-template-rows: 1fr; .team-grid__bio-wrap {
grid-template-rows: 1fr;
}
.team-grid__read-bio::after {
content: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20transform%3D%22rotate(0%200%200)%22%3E%3Cpath%20d%3D%22M6.28033%2010.5947C5.98744%2010.3018%205.51256%2010.3018%205.21967%2010.5947C4.92678%2010.8876%204.92678%2011.3624%205.21967%2011.6553L11.4697%2017.9053C11.7626%2018.1982%2012.2374%2018.1982%2012.5303%2017.9053L18.7803%2011.6553C19.0732%2011.3624%2019.0732%2010.8876%2018.7803%2010.5947C18.4874%2010.3018%2018.0126%2010.3018%2017.7197%2010.5947L12%2016.3143L6.28033%2010.5947Z%22%20fill%3D%22%23006196%22%2F%3E%3Cpath%20opacity%3D%221%22%20d%3D%22M6.28033%206.09467C5.98744%205.80178%205.51256%205.80178%205.21967%206.09467C4.92678%206.38756%204.92678%206.86244%205.21967%207.15533L11.4697%2013.4053C11.7626%2013.6982%2012.2374%2013.6982%2012.5303%2013.4053L18.7803%207.15533C19.0732%206.86244%2019.0732%206.38756%2018.7803%206.09467C18.4874%205.80178%2018.0126%205.80178%2017.7197%206.09467L12%2011.8143L6.28033%206.09467Z%22%20fill%3D%22%23006196%22%2F%3E%3C%2Fsvg%3E");
transform: rotate(180deg);
}
} }
&__bio-inner { .team-grid__bio-inner {
overflow: hidden; overflow: hidden;
min-height: 0; min-height: 0;
} }
&__bio { .team-grid__bio {
padding-top: calc(var(--spacing) * 2); padding-top: calc(var(--spacing) * 2);
text-align: center;
font-size: var(--text-16px); font-size: var(--text-16px);
--tw-leading: var(--leading-snug); --tw-leading: var(--leading-snug);
line-height: var(--leading-snug); line-height: var(--leading-snug);
--tw-font-weight: var(--font-weight-light); --tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light); font-weight: var(--font-weight-light);
color: var(--color-gray-700); text-wrap: balance;
} }
} }
@property --tw-rotate-x { @property --tw-rotate-x {
views/blocks/team-grid/block.json
+3
View File
@@ -3,6 +3,9 @@
"title": "Team Grid", "title": "Team Grid",
"description": "A responsive grid of team members. Click a card to expand the bio.", "description": "A responsive grid of team members. Click a card to expand the bio.",
"category": "common", "category": "common",
"style": [
"file:./team-grid.css"
],
"icon": "groups", "icon": "groups",
"keywords": ["team", "people", "staff", "bio"], "keywords": ["team", "people", "staff", "bio"],
"acf": { "acf": {
views/blocks/team-grid/team-grid.css
+38 -19
View File
@@ -1,15 +1,13 @@
/* Team Grid block */ /* Team Grid block */
.team-grid { .team-grid {
&__card { @apply my-12;
@apply flex flex-col;
}
&__details { .team-grid__card { @apply flex flex-col; }
@apply flex flex-col;
}
&__summary { .team-grid__details { @apply flex flex-col; }
.team-grid__summary {
@apply flex flex-col items-center text-center cursor-pointer list-none; @apply flex flex-col items-center text-center cursor-pointer list-none;
&::-webkit-details-marker { &::-webkit-details-marker {
@@ -20,36 +18,57 @@
display: none; display: none;
content: ''; content: '';
} }
&:hover {
.team-grid__read-bio::after {
content: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20transform%3D%22rotate(0%200%200)%22%3E%3Cpath%20d%3D%22M6.28033%2010.5947C5.98744%2010.3018%205.51256%2010.3018%205.21967%2010.5947C4.92678%2010.8876%204.92678%2011.3624%205.21967%2011.6553L11.4697%2017.9053C11.7626%2018.1982%2012.2374%2018.1982%2012.5303%2017.9053L18.7803%2011.6553C19.0732%2011.3624%2019.0732%2010.8876%2018.7803%2010.5947C18.4874%2010.3018%2018.0126%2010.3018%2017.7197%2010.5947L12%2016.3143L6.28033%2010.5947Z%22%20fill%3D%22%23006196%22%2F%3E%3Cpath%20opacity%3D%221%22%20d%3D%22M6.28033%206.09467C5.98744%205.80178%205.51256%205.80178%205.21967%206.09467C4.92678%206.38756%204.92678%206.86244%205.21967%207.15533L11.4697%2013.4053C11.7626%2013.6982%2012.2374%2013.6982%2012.5303%2013.4053L18.7803%207.15533C19.0732%206.86244%2019.0732%206.38756%2018.7803%206.09467C18.4874%205.80178%2018.0126%205.80178%2017.7197%206.09467L12%2011.8143L6.28033%206.09467Z%22%20fill%3D%22%23006196%22%2F%3E%3C%2Fsvg%3E");
width: 1.25rem;
height: 1.25rem;
}
}
} }
&__photo { .team-grid__photo {
@apply w-32 h-32 sm:w-40 sm:h-40 lg:w-48 lg:h-48 object-cover rounded-md mb-4; @apply w-full h-full object-cover rounded-md mb-4;
} }
&__name { .team-grid__name {
@apply text-cwc-blue-01 text-22px font-bold leading-tight mb-1; @apply text-cwc-blue-01 text-22px font-bold leading-tight mb-1;
} }
&__title { .team-grid__title {
@apply text-gray-600 text-16px font-light italic mb-3; @apply text-cwc-blue-01 text-16px font-normal italic mb-3;
} }
&__bio-wrap { .team-grid__read-bio {
@apply flex gap-2 justify-center items-center text-cwc-blue-01 text-16px font-bold leading-snug mb-1;
&::after {
content: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20transform%3D%22rotate(0%200%200)%22%3E%3Cpath%20d%3D%22M6.28033%2010.5947C5.98744%2010.3018%205.51256%2010.3018%205.21967%2010.5947C4.92678%2010.8876%204.92678%2011.3624%205.21967%2011.6553L11.4697%2017.9053C11.7626%2018.1982%2012.2374%2018.1982%2012.5303%2017.9053L18.7803%2011.6553C19.0732%2011.3624%2019.0732%2010.8876%2018.7803%2010.5947C18.4874%2010.3018%2018.0126%2010.3018%2017.7197%2010.5947L12%2016.3143L6.28033%2010.5947Z%22%20fill%3D%22%23006196%22%2F%3E%3Cpath%20opacity%3D%220.5%22%20d%3D%22M6.28033%206.09467C5.98744%205.80178%205.51256%205.80178%205.21967%206.09467C4.92678%206.38756%204.92678%206.86244%205.21967%207.15533L11.4697%2013.4053C11.7626%2013.6982%2012.2374%2013.6982%2012.5303%2013.4053L18.7803%207.15533C19.0732%206.86244%2019.0732%206.38756%2018.7803%206.09467C18.4874%205.80178%2018.0126%205.80178%2017.7197%206.09467L12%2011.8143L6.28033%206.09467Z%22%20fill%3D%22%23006196%22%2F%3E%3C%2Fsvg%3E");
width: 1.25rem;
height: 1.25rem;
}
}
.team-grid__bio-wrap {
display: grid; display: grid;
grid-template-rows: 0fr; grid-template-rows: 0fr;
transition: grid-template-rows 300ms ease; transition: grid-template-rows 300ms ease;
} }
&__details[open] &__bio-wrap { .team-grid__details[open] {
grid-template-rows: 1fr; .team-grid__bio-wrap { grid-template-rows: 1fr; }
.team-grid__read-bio::after {
content: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20transform%3D%22rotate(0%200%200)%22%3E%3Cpath%20d%3D%22M6.28033%2010.5947C5.98744%2010.3018%205.51256%2010.3018%205.21967%2010.5947C4.92678%2010.8876%204.92678%2011.3624%205.21967%2011.6553L11.4697%2017.9053C11.7626%2018.1982%2012.2374%2018.1982%2012.5303%2017.9053L18.7803%2011.6553C19.0732%2011.3624%2019.0732%2010.8876%2018.7803%2010.5947C18.4874%2010.3018%2018.0126%2010.3018%2017.7197%2010.5947L12%2016.3143L6.28033%2010.5947Z%22%20fill%3D%22%23006196%22%2F%3E%3Cpath%20opacity%3D%221%22%20d%3D%22M6.28033%206.09467C5.98744%205.80178%205.51256%205.80178%205.21967%206.09467C4.92678%206.38756%204.92678%206.86244%205.21967%207.15533L11.4697%2013.4053C11.7626%2013.6982%2012.2374%2013.6982%2012.5303%2013.4053L18.7803%207.15533C19.0732%206.86244%2019.0732%206.38756%2018.7803%206.09467C18.4874%205.80178%2018.0126%205.80178%2017.7197%206.09467L12%2011.8143L6.28033%206.09467Z%22%20fill%3D%22%23006196%22%2F%3E%3C%2Fsvg%3E");
transform: rotate(180deg);
}
} }
&__bio-inner { .team-grid__bio-inner {
overflow: hidden; overflow: hidden;
min-height: 0; min-height: 0;
} }
&__bio { .team-grid__bio { @apply text-16px font-light leading-snug pt-2 text-center text-balance; }
@apply text-gray-700 text-16px font-light leading-snug pt-2;
}
} }
views/blocks/team-grid/team-grid.php
+16 -5
View File
@@ -10,12 +10,21 @@
namespace CWC; namespace CWC;
$single = get_field( 'single' );
$members = get_field( 'members' ); $members = get_field( 'members' );
if ( empty( $members ) ) { if ( empty( $members ) ) {
return; return;
} }
$modeSingle = '';
$blockID = wp_unique_id( 'single-' );
if ( $single ) {
$modeSingle = 'name=' . $blockID;
}
$classes = 'team-grid container my-section mx-auto'; $classes = 'team-grid container my-section mx-auto';
$wrapper = blockWrapperAttributes( $classes, $is_preview ); $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"> <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 ) : ?> <?php foreach ( $members as $member ) : ?>
<article class="team-grid__card"> <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"> <summary class="team-grid__summary">
<?php if ( ! empty( $member['image'] ) ) : ?> <?php if ( ! empty( $member['image'] ) ) : ?>
<img <img
@@ -36,16 +45,18 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
<?php endif; ?> <?php endif; ?>
<?php if ( ! empty( $member['name'] ) ) : ?> <?php if ( ! empty( $member['name'] ) ) : ?>
<h3 class="team-grid__name"> <h2 class="team-grid__name">
<?php echo wp_kses_post( $member['name'] ); ?> <?php echo wp_kses_post( $member['name'] ); ?>
</h3> </h2>
<?php endif; ?> <?php endif; ?>
<?php if ( ! empty( $member['title'] ) ) : ?> <?php if ( ! empty( $member['title'] ) ) : ?>
<p class="team-grid__title"> <h3 class="team-grid__title">
<?php echo wp_kses_post( $member['title'] ); ?> <?php echo wp_kses_post( $member['title'] ); ?>
</p> </h3>
<?php endif; ?> <?php endif; ?>
<h4 class="team-grid__read-bio" aria-label="Read Bio for <?php echo esc_attr( $member['name'] ); ?>">Read Bio</h4>
</summary> </summary>
<div class="team-grid__bio-wrap"> <div class="team-grid__bio-wrap">