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

feat(contact): rewrite contact-info block to two-column layout

Browse Source
This commit is contained in:
Keith Solomon
2026-07-04 13:31:06 -05:00
parent 1593be1c70
commit e3024a6cdc
1 changed files with 42 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/blocks/contact-info/contact-info.php
+42 -13
View File
@@ -2,36 +2,65 @@
/** /**
* Block Name: Contact Info * Block Name: Contact Info
* *
* Display contact information from global fields with icons and optional form. * 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.
* *
* @package CWC * @package CWC
*/ */
namespace CWC; namespace CWC;
$info = get_field( 'contact_info', 'option' );
$address = $info['address'] ?? '';
$email = $info['email'] ?? '';
$phone = $info['phone'] ?? '';
$classes = 'contact-info'; $classes = 'contact-info';
$wrapper = blockWrapperAttributes( $classes, $is_preview ); $wrapper = blockWrapperAttributes( $classes, $is_preview );
?> ?>
<section <?php echo esc_attr( $wrapper ); ?>> <section <?php echo esc_attr( $wrapper ); ?>>
<div class="flex flex-col lg:flex-row"> <div class="contact-info__grid">
<div class="w-full lg:w-1/2 p-6"> <div class="contact-info__details">
<h2 class="text-2xl font-bold mb-4">Contact Information</h2> <h1 class="contact-info__heading">Contact</h1>
<div class="not-prose text-black my-4"> <ul class="contact-info__items">
<h3 class="mb-0"><?php echo esc_html__( 'Mailing Address', 'cwc' ); ?></h3> <?php if ( $address ) : ?>
<p class="my-0.5"><?php echo wp_kses_post( get_field( 'contact_info', 'option' )['address'] ); ?></p> <li class="contact-info__item contact-info__item--address">
<span class="contact-info__icon" aria-hidden="true">
<img src="<?php echo esc_url( get_theme_file_uri( '/static/img/contact/icon-address.svg' ) ); ?>" alt="" width="24" height="24" loading="lazy" />
</span>
<span class="contact-info__value"><?php echo wp_kses_post( $address ); ?></span>
</li>
<?php endif; ?>
<h3 class="mb-0"><?php echo esc_html__( 'Email', 'cwc' ); ?></h3> <?php if ( $email ) : ?>
<p class="my-0.5"><a class="hover:opacity-80 transition-colors duration-100" href="mailto:<?php echo esc_html( get_field( 'contact_info', 'option' )['email'] ); ?>"><?php echo esc_html( get_field( 'contact_info', 'option' )['email'] ); ?></a></p> <li class="contact-info__item contact-info__item--email">
<span class="contact-info__icon" aria-hidden="true">
<img src="<?php echo esc_url( get_theme_file_uri( '/static/img/contact/icon-email.svg' ) ); ?>" alt="" width="24" height="24" loading="lazy" />
</span>
<a class="contact-info__value" href="mailto:<?php echo esc_attr( $email ); ?>"><?php echo esc_html( $email ); ?></a>
</li>
<?php endif; ?>
<h3 class="mb-0"><?php echo esc_html__( 'Phone', 'cwc' ); ?></h3> <?php if ( $phone ) : ?>
<p class="my-0.5"><a class="hover:opacity-80 transition-colors duration-100" href="tel:<?php echo esc_html( get_field( 'contact_info', 'option' )['phone'] ); ?>"><?php echo esc_html( get_field( 'contact_info', 'option' )['phone'] ); ?></a></p> <li class="contact-info__item contact-info__item--phone">
<span class="contact-info__icon" aria-hidden="true">
<img src="<?php echo esc_url( get_theme_file_uri( '/static/img/contact/icon-phone.svg' ) ); ?>" alt="" width="24" height="24" loading="lazy" />
</span>
<a class="contact-info__value" href="tel:<?php echo esc_attr( $phone ); ?>"><?php echo esc_html( $phone ); ?></a>
</li>
<?php endif; ?>
</ul>
<div class="contact-info__form">
<?php echo do_shortcode( '[gravityform id="1" title="false" description="false" ajax="true"]' ); ?>
</div> </div>
</div> </div>
<div class="w-full lg:w-1/2 p-6"> <div class="contact-info__map" id="contact-map" aria-label="Map of downtown Winnipeg" role="region">
<InnerBlocks /> <!-- Leaflet map will mount here. Pin: orange-01 + white map marker (TBD). -->
</div> </div>
</div> </div>
</section> </section>