✨feature: Our Work Block

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>