✨feature: Our Work Block

acf/group_our_work_images.json

@@ -0,0 +1,80 @@
+{
+    "key": "group_our_work_images",
+    "title": "Our Work",
+    "fields": [
+        {
+            "key": "field_our_work_left_image",
+            "label": "Left Image",
+            "name": "left_image",
+            "aria-label": "",
+            "type": "image",
+            "instructions": "Tall image displayed on the left side of the Our Work 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_our_work_bottom_image",
+            "label": "Bottom Image",
+            "name": "bottom_image",
+            "aria-label": "",
+            "type": "image",
+            "instructions": "Wide image displayed below the text and overlapping the bottom border.",
+            "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"
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "block",
+                "operator": "==",
+                "value": "acf\/our-work"
+            }
+        ]
+    ],
+    "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": 1781452800
+}

styles/base/typography.css

@@ -93,6 +93,11 @@ body {
     h2, .h2 {
         font-size: var(--h2);
         line-height: 1.3;
+
+        em {
+            font-style: normal;
+            color: var(--color-secondary);
+        }
     }
 
     h3, .h3 {

views/blocks/our-work/block.json

@@ -0,0 +1,28 @@
+{
+    "name": "acf/our-work",
+    "title": "Our Work",
+    "description": "Homepage Our Work block.",
+    "style": [
+        "file:./our-work.css"
+    ],
+    "category": "vdi-block",
+    "icon": "groups",
+    "keywords": [
+        "Our Work"
+    ],
+    "acf": {
+        "blockVersion": 3,
+        "autoInlineEditing": true,
+        "mode": "preview",
+        "renderTemplate": "our-work.php"
+    },
+    "supports": {
+        "align": true,
+        "anchor": true,
+        "color": true,
+        "html": false,
+        "jsx": true,
+        "mode": true,
+        "multiple": false
+    }
+}

views/blocks/our-work/our-work.css

@@ -0,0 +1,225 @@
+/* Our Work block styles */
+
+.our-work {
+    background:
+        linear-gradient(
+            90deg,
+            var(--color-cwc-blue-01) 0%,
+            var(--color-cwc-blue-02) 52%,
+            var(--color-cwc-blue-02) 100%
+        );
+    border-bottom: 16px solid var(--color-secondary);
+    color: var(--color-white);
+    margin-bottom: clamp(4rem, 7vw, 5.5rem);
+    overflow: visible;
+    padding: clamp(4rem, 6vw, 5.75rem) 0 0;
+    position: relative;
+}
+
+.our-work:not(.has-bottom-image) {
+    margin-bottom: 0;
+    padding-bottom: clamp(4rem, 6vw, 5.75rem);
+}
+
+.our-work__vector {
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
+    position: absolute;
+    z-index: 0;
+}
+
+.our-work__vector img {
+    display: block;
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+}
+
+.our-work__inner {
+    display: grid;
+    gap: clamp(2rem, 4vw, 4rem);
+    grid-template-areas:
+        "left content"
+        "left bottom";
+    grid-template-columns: minmax(18rem, 410px) minmax(0, 1fr);
+    position: relative;
+    z-index: 1;
+}
+
+.our-work:not(.has-left-image) .our-work__inner {
+    grid-template-areas:
+        "content"
+        "bottom";
+    grid-template-columns: minmax(0, 1fr);
+}
+
+.our-work__content {
+    grid-area: content;
+    max-width: 46.75rem;
+}
+
+.our-work:not(.has-left-image) .our-work__content {
+    margin-inline: auto;
+    text-align: center;
+}
+
+.our-work__content .acf-innerblocks-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1.75rem;
+}
+
+.our-work__content h1,
+.our-work__content h2,
+.our-work__content h3,
+.our-work__content h4,
+.our-work__content h5,
+.our-work__content h6 {
+    color: var(--color-white);
+    font-family: var(--font-quincy);
+    font-size: var(--text-54px);
+    line-height: 1;
+    margin: 0;
+}
+
+.our-work__content h1 em,
+.our-work__content h2 em,
+.our-work__content h3 em,
+.our-work__content h4 em,
+.our-work__content h5 em,
+.our-work__content h6 em {
+    color: var(--color-secondary);
+    font-style: normal;
+}
+
+.our-work__content p {
+    color: var(--color-white);
+    font-size: var(--text-20px);
+    line-height: 1.35;
+    margin: 0;
+}
+
+.our-work__content .wp-block-acf-buttons {
+    margin: 0;
+}
+
+.our-work__content .wp-block-acf-buttons > div {
+    gap: 2rem;
+}
+
+.our-work:not(.has-left-image) .our-work__content .wp-block-acf-buttons > div {
+    justify-content: center;
+}
+
+.our-work__content .button[data-button-variant="outline"] {
+    --button-color: var(--color-white);
+}
+
+.our-work__media {
+    margin: 0;
+}
+
+.our-work__media--left {
+    align-self: start;
+    grid-area: left;
+    margin-top: clamp(4rem, 8vw, 6.75rem);
+}
+
+.our-work__media--bottom {
+    grid-area: bottom;
+    margin-bottom: clamp(-5rem, -6vw, -3.5rem);
+    max-width: 830px;
+}
+
+.our-work:not(.has-left-image) .our-work__media--bottom {
+    margin-inline: auto;
+}
+
+.our-work__image {
+    border-radius: 0.75rem;
+    display: block;
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+}
+
+.our-work__media--left .our-work__image {
+    aspect-ratio: 410 / 484;
+}
+
+.our-work__media--bottom .our-work__image {
+    aspect-ratio: 830 / 484;
+}
+
+@media (max-width: 1024px) {
+    .our-work {
+        padding-top: 4rem;
+    }
+
+    .our-work__inner,
+    .our-work:not(.has-left-image) .our-work__inner {
+        grid-template-areas:
+            "content"
+            "left"
+            "bottom";
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .our-work__content {
+        margin-inline: auto;
+        max-width: 46.75rem;
+        text-align: center;
+    }
+
+    .our-work__content .wp-block-acf-buttons > div {
+        justify-content: center;
+    }
+
+    .our-work__media--left {
+        margin: 0 auto;
+        max-width: 410px;
+        width: 100%;
+    }
+
+    .our-work__media--bottom {
+        margin-inline: auto;
+        width: 100%;
+    }
+}
+
+@media (max-width: 640px) {
+    .our-work {
+        margin-bottom: 3.5rem;
+        padding-top: 3rem;
+    }
+
+    .our-work__inner {
+        gap: 2rem;
+    }
+
+    .our-work__content {
+        text-align: left;
+    }
+
+    .our-work__content .acf-innerblocks-container {
+        gap: 1.25rem;
+    }
+
+    .our-work__content h1,
+    .our-work__content h2,
+    .our-work__content h3,
+    .our-work__content h4,
+    .our-work__content h5,
+    .our-work__content h6 {
+        font-size: var(--text-40px);
+    }
+
+    .our-work__content .wp-block-acf-buttons > div {
+        justify-content: flex-start;
+    }
+
+    .our-work__media--bottom {
+        margin-bottom: -3rem;
+    }
+}

views/blocks/our-work/our-work.php

@@ -0,0 +1,91 @@
+<?php
+/**
+ * Block Name: Our Work
+ *
+ * Homepage Our Work block.
+ *
+ * @package CWC
+ */
+
+namespace CWC;
+
+$left_image   = get_field( 'left_image' );
+$bottom_image = get_field( 'bottom_image' );
+
+$classes = 'our-work mx-break-out';
+
+if ( ! empty( $left_image ) ) {
+	$classes .= ' has-left-image';
+}
+
+if ( ! empty( $bottom_image ) ) {
+	$classes .= ' has-bottom-image';
+}
+
+/**
+ * NOTE: DO NOT remove this function call - it is required to avoid editor issues.
+ * $is_preview is a WordPress global when in the editor.
+ */
+$wrapper = blockWrapperAttributes( $classes, $is_preview );
+?>
+
+<section <?php echo wp_kses_post( $wrapper ); ?>>
+	<div class="our-work__vector" aria-hidden="true">
+		<img
+			src="<?php echo esc_url( get_stylesheet_directory_uri() . '/views/blocks/our-work/our-work-vector.svg' ); ?>"
+			alt=""
+			loading="lazy"
+			role="presentation"
+		/>
+	</div>
+
+	<div class="our-work__inner container">
+		<?php if ( ! empty( $left_image ) ) : ?>
+			<figure class="our-work__media our-work__media--left">
+				<?php
+				if ( ! empty( $left_image['ID'] ) ) {
+					echo wp_get_attachment_image(
+						$left_image['ID'],
+						'large',
+						false,
+						array(
+							'class'   => 'our-work__image',
+							'loading' => 'lazy',
+						)
+					);
+				} elseif ( ! empty( $left_image['url'] ) ) {
+					?>
+					<img class="our-work__image" src="<?php echo esc_url( $left_image['url'] ); ?>" alt="<?php echo esc_attr( $left_image['alt'] ?? '' ); ?>" loading="lazy">
+					<?php
+				}
+				?>
+			</figure>
+		<?php endif; ?>
+
+		<div class="our-work__content content-wrapper text-balance">
+			<InnerBlocks />
+		</div>
+
+		<?php if ( ! empty( $bottom_image ) ) : ?>
+			<figure class="our-work__media our-work__media--bottom">
+				<?php
+				if ( ! empty( $bottom_image['ID'] ) ) {
+					echo wp_get_attachment_image(
+						$bottom_image['ID'],
+						'large',
+						false,
+						array(
+							'class'   => 'our-work__image',
+							'loading' => 'lazy',
+						)
+					);
+				} elseif ( ! empty( $bottom_image['url'] ) ) {
+					?>
+					<img class="our-work__image" src="<?php echo esc_url( $bottom_image['url'] ); ?>" alt="<?php echo esc_attr( $bottom_image['alt'] ?? '' ); ?>" loading="lazy">
+					<?php
+				}
+				?>
+			</figure>
+		<?php endif; ?>
+	</div>
+</section>