feature: Set up contact info block and map
Deploy to Dreamhost (dev) / build (push) Successful in 34s
Sync TODOs with Issues / sync_todos (push) Successful in 7s

This commit is contained in:
Keith Solomon
2026-07-04 19:22:26 -05:00
parent 23ef7388eb
commit 01c6fb7831
12 changed files with 3853 additions and 3423 deletions
+46 -10
View File
@@ -3,8 +3,9 @@
* Block Name: Contact Info
*
* Two-column contact page layout: contact info, address/email/phone,
* and a Gravity Forms contact form on the left; Leaflet map placeholder
* on the right. Reads from the global `contact_info` option.
* and a Gravity Forms contact form on the left; Leaflet map on the right.
* Contact details read from global `contact_info`; map coordinates/zoom are
* block-level ACF fields.
*
* @package CWC
*/
@@ -16,16 +17,40 @@ $address = $info['address'] ?? '';
$email = $info['email'] ?? '';
$phone = $info['phone'] ?? '';
$classes = 'contact-info';
$heading = get_field( 'heading' );
$map_lat_value = get_field( 'map_latitude' );
$map_lng_value = get_field( 'map_longitude' );
$map_zoom_value = get_field( 'map_zoom' );
$map_lat = is_numeric( $map_lat_value ) ? (float) $map_lat_value : 49.8951;
$map_lng = is_numeric( $map_lng_value ) ? (float) $map_lng_value : -97.1384;
$map_zoom = is_numeric( $map_zoom_value ) ? (int) $map_zoom_value : 14;
$map_zoom = max( 1, min( 19, $map_zoom ) );
$map_popup = $address ? wp_strip_all_tags( $address ) : 'Our office';
$marker_svg_path = get_theme_file_path( '/views/blocks/contact-info/map-marker.svg' );
$map_marker_svg = '';
if ( file_exists( $marker_svg_path ) ) {
$map_marker_svg = file_get_contents( $marker_svg_path ); // phpcs:ignore
}
$map_marker = get_theme_file_uri( '/views/blocks/contact-info/map-marker.svg' );
$classes = 'contact-info mx-break-out';
$wrapper = blockWrapperAttributes( $classes, $is_preview );
?>
<section <?php echo wp_kses_post( $wrapper ); ?>>
<div class="contact-info__grid">
<div class="contact-info__details">
<h1 class="contact-info__heading">Contact</h1>
<div class="container contact-info__details pt-20">
<?php if ( $heading ) : ?>
<h1 class="contact-info__heading"><?php echo wp_kses_post( $heading ); ?></h1>
<?php endif; ?>
<ul class="contact-info__items">
<ul class="contact-info__items">
<?php if ( $address ) : ?>
<li class="contact-info__item contact-info__item--address">
<span class="contact-info__icon" aria-hidden="true">
@@ -55,12 +80,23 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
</ul>
<div class="contact-info__form">
<?php echo do_shortcode( '[gravityform id="1" title="false" description="false" ajax="true"]' ); ?>
</div>
<InnerBlocks />
</div>
</div>
<div class="contact-info__map" id="contact-map" aria-label="Map of downtown Winnipeg" role="region">
<!-- Leaflet map will mount here. Pin: orange-01 + white map marker (TBD). -->
<div
class="contact-info__map"
id="contact-map"
aria-label="Map of downtown Winnipeg"
role="region"
data-lat="<?php echo esc_attr( $map_lat ); ?>"
data-lng="<?php echo esc_attr( $map_lng ); ?>"
data-zoom="<?php echo esc_attr( $map_zoom ); ?>"
data-popup="<?php echo esc_attr( $map_popup ); ?>"
data-marker="<?php echo esc_url( $map_marker ); ?>"
data-marker-svg="<?php echo esc_attr( $map_marker_svg ); ?>"
>
<!-- Leaflet map mounts in this container. -->
</div>
</div>
</section>