File: /var/www/html/wp-content/themes/custom-theme/blocks/support-cae/render.php
<?php
/**
* Support CAE Block — render template
*
* Sections:
* - Tabs: sub-navigation for Support CAE pages (Donate / Ways to Give)
* - Intro: banner image + heading + description on cream background
* - Accordion: image accordion items (expandable or link-type)
*
* Built forward-from-Figma 2026-04-13 by Sprout.
* Figma source: CAE-SupportCAE-TheDifferentWaysToGive-V3 (19268:574309)
* Accordion component: (19275:509424)
*/
$tabs = get_field('support_cae_tabs');
$intro_image = get_field('support_cae_intro_image');
$intro_heading = get_field('support_cae_intro_heading');
$intro_desc = get_field('support_cae_intro_description');
$items = get_field('support_cae_items');
// Early return — nothing to render
if (!$intro_heading && !$items) {
return;
}
$block_attrs = get_block_wrapper_attributes([
'class' => 'support-cae-block',
'data-figma-id' => '19268:574309',
]);
?>
<section <?php echo $block_attrs; ?>>
<?php /* ── Tabs ────────────────────────────────────────────────────────── */ ?>
<?php if ($tabs): ?>
<nav class="support-cae__tabs" data-figma-id="19268:574312" aria-label="Support CAE navigation">
<?php foreach ($tabs as $tab):
$label = $tab['tab_label'] ?? '';
$link = $tab['tab_link'] ?? null;
$active = !empty($tab['tab_active']);
$url = $link['url'] ?? '#';
$target = !empty($link['target']) ? ' target="' . esc_attr($link['target']) . '" rel="noopener"' : '';
$class = 'support-cae__tab' . ($active ? ' support-cae__tab--active' : '');
?>
<?php if ($active): ?>
<span class="<?php echo esc_attr($class); ?>" aria-current="page">
<?php echo esc_html($label); ?>
</span>
<?php else: ?>
<a href="<?php echo esc_url($url); ?>"
class="<?php echo esc_attr($class); ?>"
<?php echo $target; ?>>
<?php echo esc_html($label); ?>
</a>
<?php endif; ?>
<?php endforeach; ?>
</nav>
<?php endif; ?>
<?php /* ── Intro Section ───────────────────────────────────────────────── */ ?>
<?php if ($intro_heading || $intro_desc || $intro_image): ?>
<div class="support-cae__intro" data-figma-id="19268:574316">
<?php if ($intro_image): ?>
<div class="support-cae__intro-banner" data-figma-id="19268:574317">
<img src="<?php echo esc_url($intro_image['url']); ?>"
alt="<?php echo esc_attr($intro_image['alt'] ?? ''); ?>"
width="<?php echo esc_attr($intro_image['width'] ?? ''); ?>"
height="<?php echo esc_attr($intro_image['height'] ?? ''); ?>"
loading="lazy">
</div>
<?php endif; ?>
<div class="support-cae__intro-content" data-figma-id="19268:574318">
<?php if ($intro_heading): ?>
<h2 class="support-cae__intro-heading" data-figma-id="19268:574319">
<?php echo esc_html($intro_heading); ?>
</h2>
<?php endif; ?>
<?php if ($intro_desc): ?>
<p class="support-cae__intro-description" data-figma-id="19268:574320">
<?php echo esc_html($intro_desc); ?>
</p>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<?php /* ── Accordion ───────────────────────────────────────────────────── */ ?>
<?php if ($items): ?>
<div class="support-cae__accordion" data-figma-id="19268:574321">
<?php foreach ($items as $i => $item):
$type = $item['item_type'] ?? 'accordion';
$title = $item['item_title'] ?? '';
$description = $item['item_description'] ?? '';
$image = $item['item_image'] ?? null;
$link = $item['item_link'] ?? null;
$content = $item['item_content'] ?? '';
$details = $item['item_details'] ?? [];
$callout_h = $item['item_callout_heading'] ?? '';
$callout_d = $item['item_callout_description'] ?? '';
$callout_img = $item['item_callout_image'] ?? null;
$is_accordion = ($type === 'accordion');
$has_content = $is_accordion && ($content || $details || $callout_h);
$item_id = 'support-cae-item-' . $i;
?>
<div class="support-cae__item<?php echo $is_accordion ? ' support-cae__item--accordion' : ' support-cae__item--link'; ?>"
data-figma-id="19275:509424">
<?php /* ── Item header (always visible) ─── */ ?>
<?php if ($is_accordion && $has_content): ?>
<button class="support-cae__item-header"
type="button"
aria-expanded="false"
aria-controls="<?php echo esc_attr($item_id); ?>-panel"
id="<?php echo esc_attr($item_id); ?>">
<?php elseif (!$is_accordion && $link): ?>
<a href="<?php echo esc_url($link['url']); ?>"
class="support-cae__item-header"
<?php echo !empty($link['target']) ? 'target="' . esc_attr($link['target']) . '" rel="noopener"' : ''; ?>>
<?php else: ?>
<div class="support-cae__item-header">
<?php endif; ?>
<?php if ($image): ?>
<div class="support-cae__item-thumb" data-figma-id="19275:509193">
<img src="<?php echo esc_url($image['url']); ?>"
alt="<?php echo esc_attr($image['alt'] ?? ''); ?>"
width="216"
height="134"
loading="lazy">
</div>
<?php endif; ?>
<div class="support-cae__item-text" data-figma-id="19275:509104">
<?php if ($title): ?>
<h3 class="support-cae__item-title" data-figma-id="19275:509107">
<?php echo esc_html($title); ?>
</h3>
<?php endif; ?>
<?php if ($description): ?>
<p class="support-cae__item-desc" data-figma-id="19275:509111">
<?php echo esc_html($description); ?>
</p>
<?php endif; ?>
</div>
<?php /* ── Chevron icon ─── */ ?>
<span class="support-cae__item-chevron" aria-hidden="true">
<svg width="13" height="22" viewBox="0 0 13 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.5 1L11.5 11L1.5 21" stroke="#004F39" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<?php if ($is_accordion && $has_content): ?>
</button>
<?php elseif (!$is_accordion && $link): ?>
</a>
<?php else: ?>
</div>
<?php endif; ?>
<?php /* ── Expandable panel ─── */ ?>
<?php if ($has_content): ?>
<div class="support-cae__item-panel"
id="<?php echo esc_attr($item_id); ?>-panel"
role="region"
aria-labelledby="<?php echo esc_attr($item_id); ?>"
hidden>
<div class="support-cae__panel-body" data-figma-id="19275:509468">
<?php if ($content): ?>
<div class="support-cae__panel-text" data-figma-id="19275:509442">
<?php echo wp_kses_post($content); ?>
</div>
<?php endif; ?>
<?php if ($details): ?>
<dl class="support-cae__panel-details" data-figma-id="19275:509443">
<?php foreach ($details as $detail): ?>
<div class="support-cae__detail-row" data-figma-id="19275:509444">
<dt class="support-cae__detail-label">
<?php echo esc_html($detail['detail_label']); ?>
</dt>
<dd class="support-cae__detail-value">
<?php echo esc_html($detail['detail_value']); ?>
</dd>
</div>
<?php endforeach; ?>
</dl>
<?php endif; ?>
<?php if ($callout_h): ?>
<div class="support-cae__callout" data-figma-id="19275:509460">
<div class="support-cae__callout-content" data-figma-id="19275:509462">
<h4 class="support-cae__callout-heading" data-figma-id="19275:509463">
<?php echo esc_html($callout_h); ?>
</h4>
<?php if ($callout_d): ?>
<div class="support-cae__callout-desc" data-figma-id="19275:509464">
<?php echo wp_kses_post($callout_d); ?>
</div>
<?php endif; ?>
</div>
<?php if ($callout_img): ?>
<div class="support-cae__callout-image" data-figma-id="19275:509461">
<img src="<?php echo esc_url($callout_img['url']); ?>"
alt="<?php echo esc_attr($callout_img['alt'] ?? ''); ?>"
loading="lazy">
</div>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
</section>
<?php /* ── Accordion toggle script (inline, block-scoped) ──────────────── */ ?>
<script>
(function() {
var block = document.querySelector('.support-cae-block');
if (!block) return;
block.addEventListener('click', function(e) {
var btn = e.target.closest('.support-cae__item--accordion .support-cae__item-header');
if (!btn || btn.tagName !== 'BUTTON') return;
var expanded = btn.getAttribute('aria-expanded') === 'true';
var panel = document.getElementById(btn.getAttribute('aria-controls'));
if (!panel) return;
// Close other open panels in the same block
var allBtns = block.querySelectorAll('.support-cae__item-header[aria-expanded="true"]');
allBtns.forEach(function(other) {
if (other !== btn) {
other.setAttribute('aria-expanded', 'false');
other.closest('.support-cae__item').classList.remove('support-cae__item--open');
var otherPanel = document.getElementById(other.getAttribute('aria-controls'));
if (otherPanel) otherPanel.hidden = true;
}
});
// Toggle this panel
btn.setAttribute('aria-expanded', String(!expanded));
btn.closest('.support-cae__item').classList.toggle('support-cae__item--open', !expanded);
panel.hidden = expanded;
});
})();
</script>