File: /var/www/html/wp-content/themes/custom-theme/blocks/donate-vff/render.php
<?php
/**
* Donate — Vermont Farm Fund Block — render template
*
* Sections:
* - Tabs: top-level Support CAE navigation (Donate / The Different Ways to Give)
* - Subtabs: Donate sub-navigation (General / Vermont Farm Fund)
* - Content with Image: left image + heading + description
* - Donation Section: background image, tax notice overlay, methods panel (3 cards)
* - Testimonial: image with gold border + quote card on cream background
*
* Built forward-from-Figma 2026-04-16 by Sprout.
* Figma source: 19268:584283
* No JavaScript required — static display block.
*/
$tabs = get_field('vff_tabs');
$subtabs = get_field('vff_subtabs');
$content_image = get_field('vff_content_image');
$content_heading = get_field('vff_content_heading');
$content_desc = get_field('vff_content_description');
$donate_bg = get_field('vff_donate_bg_image');
$donate_heading = get_field('vff_donate_heading');
$donate_tax = get_field('vff_donate_tax_notice');
$methods = get_field('vff_donate_methods');
$test_image = get_field('vff_testimonial_image');
$test_quote = get_field('vff_testimonial_quote');
$test_name = get_field('vff_testimonial_name');
$test_title = get_field('vff_testimonial_title');
// Early return — nothing to render
if (!$content_heading && !$donate_heading && !$test_quote) {
return;
}
$block_attrs = get_block_wrapper_attributes([
'class' => 'donate-vff-block',
'data-figma-id' => '19268:584283',
]);
?>
<section <?php echo $block_attrs; ?>>
<?php /* ── Top-level Tabs ────────────────────────────────────────────────── */ ?>
<?php if ($tabs): ?>
<nav class="donate-vff__tabs" data-figma-id="19268:584287" 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 = 'donate-vff__tab' . ($active ? ' donate-vff__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 /* ── Subtabs ─────────────────────────────────────────────────────── */ ?>
<?php if ($subtabs): ?>
<nav class="donate-vff__subtabs" data-figma-id="19268:584290" aria-label="Donate sub-navigation">
<div class="donate-vff__subtabs-inner">
<?php foreach ($subtabs as $subtab):
$label = $subtab['subtab_label'] ?? '';
$link = $subtab['subtab_link'] ?? null;
$active = !empty($subtab['subtab_active']);
$url = $link['url'] ?? '#';
$target = !empty($link['target']) ? ' target="' . esc_attr($link['target']) . '" rel="noopener"' : '';
$class = 'donate-vff__subtab' . ($active ? ' donate-vff__subtab--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; ?>
</div>
</nav>
<?php endif; ?>
<?php /* ── Content with Image ──────────────────────────────────────────── */ ?>
<?php if ($content_heading || $content_desc || $content_image): ?>
<div class="donate-vff__content-section" data-figma-id="19268:584291">
<?php if ($content_image): ?>
<div class="donate-vff__content-image" data-figma-id="5226:40688">
<img src="<?php echo esc_url($content_image['url']); ?>"
alt="<?php echo esc_attr($content_image['alt'] ?? ''); ?>"
width="<?php echo esc_attr($content_image['width'] ?? ''); ?>"
height="<?php echo esc_attr($content_image['height'] ?? ''); ?>"
loading="lazy">
</div>
<?php endif; ?>
<div class="donate-vff__content-text">
<?php if ($content_heading): ?>
<h2 class="donate-vff__content-heading">
<?php echo esc_html($content_heading); ?>
</h2>
<?php endif; ?>
<?php if ($content_desc): ?>
<div class="donate-vff__content-description">
<?php echo wp_kses_post($content_desc); ?>
</div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<?php /* ── Donation Section ─────────────────────────────────────────────── */ ?>
<?php if ($donate_heading || $donate_tax || $methods): ?>
<div class="donate-vff__donation-section" data-figma-id="19268:584292">
<?php /* ── Background image + tax notice overlay ── */ ?>
<div class="donate-vff__donation-bg"
<?php if ($donate_bg): ?>style="background-image: url('<?php echo esc_url($donate_bg['url']); ?>')"<?php endif; ?>>
<?php if ($donate_heading || $donate_tax): ?>
<div class="donate-vff__tax-notice" data-figma-id="19268:584294">
<?php if ($donate_heading): ?>
<h2 class="donate-vff__tax-heading">
<?php echo esc_html($donate_heading); ?>
</h2>
<?php endif; ?>
<?php if ($donate_tax): ?>
<p class="donate-vff__tax-text">
<?php echo esc_html($donate_tax); ?>
</p>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<?php /* ── Donation methods panel ── */ ?>
<?php if ($methods): ?>
<div class="donate-vff__methods-panel" data-figma-id="19268:584297">
<?php foreach ($methods as $method):
$icon = $method['method_icon'] ?? null;
$title = $method['method_title'] ?? '';
$desc = $method['method_description'] ?? '';
$button = $method['method_button'] ?? null;
?>
<div class="donate-vff__method-card">
<?php if ($icon): ?>
<div class="donate-vff__method-icon">
<img src="<?php echo esc_url($icon['url']); ?>"
alt="<?php echo esc_attr($icon['alt'] ?? ''); ?>"
width="100"
height="100"
loading="lazy">
</div>
<?php endif; ?>
<div class="donate-vff__method-content">
<?php if ($title): ?>
<h3 class="donate-vff__method-title">
<?php echo esc_html($title); ?>
</h3>
<?php endif; ?>
<?php if ($desc): ?>
<div class="donate-vff__method-description">
<?php echo wp_kses_post($desc); ?>
</div>
<?php endif; ?>
</div>
<?php if ($button && !empty($button['url'])): ?>
<a href="<?php echo esc_url($button['url']); ?>"
class="cta-btn cta-btn--primary donate-vff__method-button"
<?php echo !empty($button['target']) ? 'target="' . esc_attr($button['target']) . '" rel="noopener"' : ''; ?>>
<span class="cta-btn__text"><?php echo esc_html($button['title'] ?: 'Donate Now'); ?></span>
<span class="cta-btn__icon" aria-hidden="true">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M7.5 3.333L14.167 10L7.5 16.667" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</a>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<?php /* ── Testimonial ──────────────────────────────────────────────────── */ ?>
<?php if ($test_quote || $test_name): ?>
<div class="donate-vff__testimonial" data-figma-id="19268:584317">
<?php if ($test_image): ?>
<div class="donate-vff__testimonial-image-wrap">
<img src="<?php echo esc_url($test_image['url']); ?>"
alt="<?php echo esc_attr($test_image['alt'] ?? ''); ?>"
width="<?php echo esc_attr($test_image['width'] ?? ''); ?>"
height="<?php echo esc_attr($test_image['height'] ?? ''); ?>"
loading="lazy">
</div>
<?php endif; ?>
<div class="donate-vff__testimonial-quote-wrap">
<span class="donate-vff__testimonial-mark" aria-hidden="true">“</span>
<?php if ($test_quote): ?>
<blockquote class="donate-vff__testimonial-quote">
<?php echo esc_html($test_quote); ?>
</blockquote>
<?php endif; ?>
<?php if ($test_name || $test_title): ?>
<div class="donate-vff__testimonial-attribution">
<?php if ($test_name): ?>
<p class="donate-vff__testimonial-name">
<?php echo esc_html($test_name); ?>
</p>
<?php endif; ?>
<?php if ($test_title): ?>
<p class="donate-vff__testimonial-title">
<?php echo esc_html($test_title); ?>
</p>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
</section>