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

✨feature: Build contact block
Sync TODOs with Issues / sync_todos (push) Successful in 7s
Details

Browse Source
This commit is contained in:
Keith Solomon
2026-05-27 18:50:01 -05:00
parent 5642bf4300
commit 54482b0e2b
8 changed files with 345 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
acf/group_6826f4a2b0001.json
+92
View File
@@ -0,0 +1,92 @@
{
"key": "group_6826f4a2b0001",
"title": "Contact Block",
"fields": [
{
"key": "field_6826f4a2b0002",
"label": "Background Image",
"name": "background_image",
"aria-label": "",
"type": "image",
"instructions": "Aerial or landscape photo displayed on the right side of the block.",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"return_format": "array",
"library": "all",
"min_width": "",
"min_height": "",
"min_size": "",
"max_width": "",
"max_height": "",
"max_size": "",
"mime_types": "",
"allow_in_bindings": 0,
"preview_size": "medium"
},
{
"key": "field_6826f4a2b0004",
"label": "Text",
"name": "text",
"aria-label": "",
"type": "wysiwyg",
"instructions": "Body text displayed on the left side of the block. Use bold for emphasis.",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"tabs": "all",
"toolbar": "basic",
"media_upload": 0,
"delay": 0,
"allow_in_bindings": 0
},
{
"key": "field_6826f4a2b0005",
"label": "Button Link",
"name": "button_link",
"aria-label": "",
"type": "link",
"instructions": "CTA button displayed below the text.",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"return_format": "array",
"allow_in_bindings": 0
}
],
"location": [
[
{
"param": "block",
"operator": "==",
"value": "acf\/contact-block"
}
]
],
"menu_order": 0,
"position": "normal",
"style": "default",
"label_placement": "top",
"instruction_placement": "label",
"hide_on_screen": "",
"active": true,
"description": "",
"show_in_rest": 0,
"display_title": "",
"allow_ai_access": false,
"ai_description": "",
"modified": 1779134672
}
styles/base/colors.css
+1 -1
View File
@@ -23,7 +23,7 @@
--color-primary-800: color-mix(in oklch, var(--color-primary) 80%, white);
--color-primary-900: color-mix(in oklch, var(--color-primary) 90%, white);
--color-secondary: oklch(0.56 0.0176 257.23);
--color-secondary: var(--color-cwc-orange-01);
--color-secondary-100: color-mix(in oklch, var(--color-secondary) 10%, white);
--color-secondary-200: color-mix(in oklch, var(--color-secondary) 20%, white);
--color-secondary-300: color-mix(in oklch, var(--color-secondary) 30%, white);
styles/base/typography.css
+12 -7
View File
@@ -50,24 +50,29 @@
--text-18px: clamp(0.875rem, calc(0.8173rem + 0.2564vw), 1.125rem);
--text-20px: clamp(1rem, calc(0.9423rem + 0.2564vw), 1.25rem);
--text-22px: clamp(1.1rem, calc(1.0365rem + 0.2821vw), 1.375rem);
--text-24px: clamp(1.125rem, calc(1.024rem + 0.4487vw), 1.5rem);
--text-25px: clamp(1.125rem, calc(1.024rem + 0.4487vw), 1.5625rem);
--text-28px: clamp(1.125rem, calc(1.024rem + 0.4487vw), 1.75rem);
--text-30px: clamp(1.185rem, calc(1.0258rem + 0.7077vw), 1.875rem);
--text-32px: clamp(1.25rem, calc(1.0337rem + 0.9615vw), 2rem);
--text-35px: clamp(1.25rem, calc(1.0337rem + 0.9615vw), 2.1875rem);
--text-38px: clamp(1.4rem, calc(1.175rem + 1vw), 2.375rem);
--text-40px: clamp(1.5rem, calc(1.2692rem + 1.0256vw), 2.5rem);
--text-40px: clamp(2.25rem, calc(1.2692rem + 1.0256vw), 2.5rem);
--text-45px: clamp(1.6rem, calc(1.3202rem + 1.2436vw), 2.8125rem);
--text-50px: clamp(1.7rem, calc(1.3712rem + 1.4615vw), 3.125rem);
--text-55px: clamp(1.75rem, calc(1.3712rem + 1.4615vw), 3.4375rem);
--text-60px: clamp(1.875rem, calc(1.3702rem + 2.2436vw), 3.75rem);
--text-64px: clamp(3rem, calc(1.3702rem + 2.2436vw), 4rem);
--text-65px: clamp(1.875rem, calc(1.3702rem + 2.2436vw), 4.0625rem);
--text-70px: clamp(1.9rem, calc(1.3288rem + 2.5385vw), 4.375rem);
--text-75px: clamp(2rem, calc(1.3798rem + 2.7564vw), 4.6875rem);
--h1: calc(var(--text-base) * 2.25);
--h2: calc(var(--text-base) * 1.75);
--h3: calc(var(--text-base) * 1.5);
--h4: calc(var(--text-base) * 1.25);
--h5: calc(var(--text-base) * 1.125);
--h6: calc(var(--text-base) * 1.05);
--h1: var(--text-64px);
--h2: var(--text-40px);
--h3: var(--text-32px);
--h4: var(--text-28px);
--h5: var(--text-24px);
--h6: var(--text-22px);
}
body {
styles/blocks/buttons.css
+25 -22
View File
@@ -1,6 +1,6 @@
/* Button styles */
@theme {
@theme static {
/* Configuration */
/**
@@ -26,7 +26,7 @@
--button-border-width: 3px;
--button-border-style: solid;
--button-border-color: var(--button-bg);
--button-radius: 0.5rem;
--button-radius: 1.25rem 0.25rem;
}
.btn, .button, .acf-block-preview .button {
@@ -43,6 +43,8 @@
border-color: var(--button-border-color);
border-radius: var(--button-radius);
padding: .5rem 2rem;
text-decoration: none;
font-weight: var(--button-font-weight, 600);
font-size: var(--button-font-size, 1rem);
@@ -52,7 +54,7 @@
background: transparent;
&:hover { background: transparent; }
--button-color: var(--button-outline-color, var(--button-bg));
/* --button-color: var(--button-border-color, var(--button-bg)); */
--button-hover-border-color: var(--button-hover-bg);
--button-hover-color: var(--button-hover-bg);
}
@@ -76,20 +78,20 @@
/* Back To Top Button */
#backToTopBtn {
display:none;
position:fixed;
bottom:2rem;
right:2rem;
z-index:1000;
padding:0.75em 1.5em;
font-size:1.1rem;
border-radius:2em;
background:var(--color-primary,#3857BC);
color:#fff;
border:none;
box-shadow:0 2px 8px rgba(0,0,0,0.15);
cursor:pointer;
transition:opacity 0.2s;
background: var(--color-primary);
border: none;
border-radius: 2em;
bottom: 2rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
color: #fff;
cursor: pointer;
display: none;
font-size: 1.1rem;
padding: 0.75em 1.5em;
position: fixed;
right: 2rem;
transition: opacity 0.2s;
z-index: 1000;
}
/**
@@ -115,7 +117,7 @@ x-button:has(.button[data-button-width="full"]) { @apply w-full; }
/**
* Colors
*
* We don't need to speicifcally target "primary" buttons
* We don't need to specifically target "primary" buttons
* as the button styling defaults to "primary".
* However, you can, if necessary, by adding a style block
* like the ones below and changing the color values.
@@ -159,16 +161,17 @@ x-button:has(.button[data-button-width="full"]) { @apply w-full; }
.back-to-top {
background: var(--color-primary, #3857BC);
color: #fff;
border: none;
border-radius: 2em;
padding: 0.75em 1.5em;
font-size: 1.1rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
color: #fff;
cursor: pointer;
transition: opacity 0.2s, background 0.2s;
font-size: 1.1rem;
opacity: 0.85;
padding: 0.75em 1.5em;
transition: opacity 0.2s, background 0.2s;
}
.back-to-top:hover, .back-to-top:focus {
background: var(--color-info, #233a7a);
opacity: 1;
views/blocks/contact-block/block.json
+28
View File
@@ -0,0 +1,28 @@
{
"name": "acf/contact-block",
"title": "Contact Block",
"description": "A full-width CTA banner with a background photo, decorative linework overlay, body text, and a link button.",
"style": [
"file:./contact-block.css"
],
"category": "vdi-block",
"icon": "block-default",
"keywords": [
"Contact Block"
],
"acf": {
"blockVersion": 3,
"autoInlineEditing": true,
"mode": "preview",
"renderTemplate": "contact-block.php"
},
"supports": {
"align": true,
"anchor": true,
"color": true,
"html": false,
"jsx": false,
"mode": true,
"multiple": false
}
}
views/blocks/contact-block/contact-block.css
+37
View File
@@ -0,0 +1,37 @@
/* Contact Block styles */
.contact-block {
background-color: var(--color-navy, #0d1f35);
border-bottom: 1rem solid var(--color-orange, #F26B53);
max-width: 80.5rem;
overflow: hidden;
position: relative;
em { color: var(--color-secondary); font-style: normal; }
.contact-block__media {
inset-block: 0;
inset-inline-end: 0;
mask-image: linear-gradient(to right, transparent 0%, black 30%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%);
position: absolute;
}
.contact-block__bg-image {
display: block;
height: 100%;
width: 100%;
}
.contact-block__linework {
bottom: 0;
height: calc(100% - 1rem);
position: absolute;
right: 0;
width: auto;
}
.contact-block__content {
}
}
views/blocks/contact-block/contact-block.php
+56
View File
@@ -0,0 +1,56 @@
<?php
/**
* Block Name: Contact Block
*
* A full-width CTA banner with a background photo, decorative linework overlay,
* body text, and a link button.
*
* @package CWC
*/
namespace CWC;
$bg_image = get_field( 'background_image' );
$text = get_field( 'text' );
$button = get_field( 'button_link' );
$classes = 'contact-block rounded-t-2xl pt-5 container';
$wrapper = blockWrapperAttributes( $classes, $is_preview );
?>
<section <?php echo wp_kses_post( $wrapper ); ?>>
<div class="contact-block__media" aria-hidden="true">
<?php if ( $bg_image ) : ?>
<img
class="contact-block__bg-image"
src="<?php echo esc_url( $bg_image['url'] ); ?>"
alt=""
loading="lazy"
role="presentation"
/>
<?php endif; ?>
<?php get_template_part( '/views/blocks/contact-block/linework' ); ?>
</div>
<div class="contact-block__content container pt-12 pb-16">
<?php if ( $text ) : ?>
<h2 class="contact-block__text font-quincy font-normal leading-none text-white max-w-3/4 relative z-10 mb-8">
<?php echo wp_kses_post( $text ); ?>
</h2>
<?php endif; ?>
<?php if ( $button ) : ?>
<x-button
btnclasses="contact-block__cta button"
element="a"
url="<?php echo esc_url( $button['url'] ?? '#' ); ?>"
target="<?php echo esc_attr( $button['target'] ?? '_self' ); ?>"
title="<?php echo esc_attr( $button['title'] ?? '' ); ?>"
color="secondary"
variant="outline"
></x-button>
<?php endif; ?>
</div>
</section>
views/blocks/contact-block/linework.php
+3
View File
@@ -0,0 +1,3 @@
<svg class="contact-block__linework" aria-hidden="true" role="img" width="628" height="282" viewBox="0 0 628 282" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 286.699C40.1028 286.201 85.795 286.571 102.366 265.214C138.408 218.735 186.616 244.625 152.962 276.056C140.114 288.063 112.983 291.061 93.4695 289.001C73.9562 286.94 28.662 273.441 55.6367 229.79C72.5634 202.409 119.094 220.44 119.094 220.44C119.023 193.158 136.518 183.027 149.068 184.619C161.972 186.253 169.945 200.022 169.945 200.022C186.374 187.02 189.814 203.815 189.814 203.815C193.353 200.064 212.766 186.707 232.578 193.514C265.437 204.81 241.816 246.671 241.816 246.671L264.911 239.225C299.29 225.613 246.444 195.688 263.626 181.095C276.517 170.139 314.625 177.926 325.711 168.036C342.595 152.974 250.526 167.027 241.544 147.248C234.694 132.186 396.43 130.751 396.018 145.6C395.677 157.919 347.654 157.919 359.052 168.86C370.223 179.589 384.151 175.24 390.077 187.105C395.72 198.387 315.236 195.773 339.88 207.638C396.843 235.062 521.654 231.694 604.127 242.792C643.338 248.063 688.775 251.303 725.399 267.63C756.78 281.626 712.566 289.853 699.064 292.013C547.491 316.382 122.562 306.847 202.349 279.296C247.743 263.623 339.241 272.432 384.691 265.925C446.059 257.143 275.869 246.6 330.941 237.065C443.018 217.684 607.282 247.324 573.372 224.348C562.102 216.718 528.461 215.822 543.526 208.291C572.946 193.585 691.802 187.532 713.703 209.116C724.533 219.787 615.824 212.512 634.186 223.026C664.642 240.461 807.986 237.506 775.142 196.938C761.029 179.503 714.769 178.708 691.688 169.599C691.688 169.599 742.795 163.802 766.473 134.701C771.561 128.449 772.371 116.144 767.283 109.181C755.117 92.5278 691.006 91.5758 707.521 121.131C720.212 143.852 751.664 109.65 755.657 99.6609C757.434 95.2276 759.438 91.0642 760.447 86.3467C762.863 75.0219 759.352 64.6917 747.983 60.2868C741.431 57.7433 734.097 57.317 727.148 57.4449C728.952 50.5818 725.911 43.3634 719.828 39.9532C714.015 36.6992 706.625 37.6086 701.679 42.2409C696.734 28.2873 677.234 15.101 666.078 15.7973C654.04 16.5646 639.899 23.1151 643.722 58.2548C643.722 58.2548 626.255 49.1324 613.322 62.0487C595.358 79.9809 612.484 98.24 612.484 98.24C612.484 98.24 593.468 88.8476 586.163 104.322C581.231 99.9735 578.019 97.1316 571.496 91.3768L569.776 116.769C602.976 119.341 648.128 117.195 681.328 119.767C676.14 133.465 664.102 153.685 658.915 167.383C621.466 167.951 584.017 168.519 546.582 169.088C551.158 156.683 555.735 144.264 560.311 131.859L507.868 94.7729L463.697 91.7321C483.11 109.281 495.447 114.666 514.86 132.215C514.86 132.215 516.04 165.834 515.088 188.881C514.775 196.512 508.323 202.423 500.691 202.096C472.394 200.874 440.545 199.382 413.613 198.274C413.059 198.274 413.059 121.913 413.059 121.913L451.602 83.5617L417.379 62.9155C433.467 44.3012 453.634 20.6143 469.708 2L531.432 74.6951C547.335 75.4766 563.239 76.2723 579.142 77.0538C565.484 58.0843 537.173 28.401 537.173 28.401L482.684 17.9713C455.141 46.0916 427.598 74.2119 400.069 102.332M400.069 102.361C400.069 102.361 412.888 70.6454 393.389 72.6915C393.389 72.6915 414.38 31.0297 375.595 38.1344C375.595 38.1344 370.01 2.32682 345.025 8.6784C320.04 15.03 319.813 39.9532 323.92 55.3561C323.92 55.3561 306.126 47.2994 288.674 54.5604C271.221 61.8214 262.267 106.368 312.564 111.497C362.875 116.627 378.551 79.6683 371.488 73.3736C349.587 53.8641 323.664 74.1835 285.149 101.451" stroke="#8FC9E6" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB