From 18dde4c9f4f29fd179b56ed438d5ad2da898c976 Mon Sep 17 00:00:00 2001 From: Keith Solomon Date: Sat, 25 Jul 2026 15:15:13 -0500 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Enhance=20team-grid=20block?= =?UTF-8?q?=20with=20single=20open=20mode=20and=20updated=20styles?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- acf/group_team_grid.json | 25 ++++++++- static/dist/theme.css | 79 ++++++++++++++++++---------- views/blocks/team-grid/block.json | 3 ++ views/blocks/team-grid/team-grid.css | 57 +++++++++++++------- views/blocks/team-grid/team-grid.php | 21 ++++++-- 5 files changed, 130 insertions(+), 55 deletions(-) diff --git a/acf/group_team_grid.json b/acf/group_team_grid.json index c025fe5..8c7ac04 100644 --- a/acf/group_team_grid.json +++ b/acf/group_team_grid.json @@ -2,6 +2,27 @@ "key": "group_team_grid", "title": "Team Grid", "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", "label": "Members", @@ -125,7 +146,7 @@ { "param": "block", "operator": "==", - "value": "acf/team-grid" + "value": "acf\/team-grid" } ] ], @@ -141,5 +162,5 @@ "display_title": "", "allow_ai_access": false, "ai_description": "", - "modified": 1784992250 + "modified": 1785007821 } diff --git a/static/dist/theme.css b/static/dist/theme.css index 7e37b5d..a988c18 100644 --- a/static/dist/theme.css +++ b/static/dist/theme.css @@ -5786,15 +5786,16 @@ a.contact-info__value:hover { } } .team-grid { - &__card { + margin-block: calc(var(--spacing) * 12); + .team-grid__card { display: flex; flex-direction: column; } - &__details { + .team-grid__details { display: flex; flex-direction: column; } - &__summary { + .team-grid__summary { display: flex; cursor: pointer; list-style-type: none; @@ -5808,27 +5809,22 @@ a.contact-info__value:hover { display: none; 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); - height: calc(var(--spacing) * 32); - width: calc(var(--spacing) * 32); + height: 100%; + width: 100%; border-radius: var(--radius-md); 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); font-size: var(--text-22px); --tw-leading: var(--leading-tight); @@ -5837,34 +5833,59 @@ a.contact-info__value:hover { font-weight: var(--font-weight-bold); color: var(--color-cwc-blue-01); } - &__title { + .team-grid__title { margin-bottom: calc(var(--spacing) * 3); font-size: var(--text-16px); - --tw-font-weight: var(--font-weight-light); - font-weight: var(--font-weight-light); - color: var(--color-gray-600); + --tw-font-weight: var(--font-weight-normal); + font-weight: var(--font-weight-normal); + color: var(--color-cwc-blue-01); 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; grid-template-rows: 0fr; transition: grid-template-rows 300ms ease; } - &__details[open] &__bio-wrap { - grid-template-rows: 1fr; + .team-grid__details[open] { + .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; min-height: 0; } - &__bio { + .team-grid__bio { padding-top: calc(var(--spacing) * 2); + text-align: center; font-size: var(--text-16px); --tw-leading: var(--leading-snug); line-height: var(--leading-snug); --tw-font-weight: var(--font-weight-light); font-weight: var(--font-weight-light); - color: var(--color-gray-700); + text-wrap: balance; } } @property --tw-rotate-x { diff --git a/views/blocks/team-grid/block.json b/views/blocks/team-grid/block.json index 043bf8e..257a1f6 100644 --- a/views/blocks/team-grid/block.json +++ b/views/blocks/team-grid/block.json @@ -3,6 +3,9 @@ "title": "Team Grid", "description": "A responsive grid of team members. Click a card to expand the bio.", "category": "common", + "style": [ + "file:./team-grid.css" + ], "icon": "groups", "keywords": ["team", "people", "staff", "bio"], "acf": { diff --git a/views/blocks/team-grid/team-grid.css b/views/blocks/team-grid/team-grid.css index 56644d5..46c685c 100644 --- a/views/blocks/team-grid/team-grid.css +++ b/views/blocks/team-grid/team-grid.css @@ -1,15 +1,13 @@ /* Team Grid block */ .team-grid { - &__card { - @apply flex flex-col; - } + @apply my-12; - &__details { - @apply flex flex-col; - } + .team-grid__card { @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; &::-webkit-details-marker { @@ -20,36 +18,57 @@ display: none; 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 { - @apply w-32 h-32 sm:w-40 sm:h-40 lg:w-48 lg:h-48 object-cover rounded-md mb-4; + .team-grid__photo { + @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; } - &__title { - @apply text-gray-600 text-16px font-light italic mb-3; + .team-grid__title { + @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; grid-template-rows: 0fr; transition: grid-template-rows 300ms ease; } - &__details[open] &__bio-wrap { - grid-template-rows: 1fr; + .team-grid__details[open] { + .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; min-height: 0; } - &__bio { - @apply text-gray-700 text-16px font-light leading-snug pt-2; - } + .team-grid__bio { @apply text-16px font-light leading-snug pt-2 text-center text-balance; } } diff --git a/views/blocks/team-grid/team-grid.php b/views/blocks/team-grid/team-grid.php index c65b16b..d368e73 100644 --- a/views/blocks/team-grid/team-grid.php +++ b/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 );
-
+
> -

+

-

+ -

+

-

+

+ +

Read Bio