✨feature: Add services list block

views/blocks/services-list/block.json

@@ -2,9 +2,12 @@
     "name": "acf/services-list",
     "title": "Services List",
     "description": "A row of service cards. Card count (2, 3, or 4) determines the layout.",
-    "category": "common",
+    "category": "vdi-blocks",
+    "style": [
+        "file:./services-list.css"
+    ],
     "icon": "grid-view",
-    "keywords": ["services", "cards", "mapping"],
+    "keywords": ["services", "cards"],
     "acf": {
         "mode": "preview",
         "renderTemplate": "services-list.php"

views/blocks/services-list/services-list.css

@@ -1,13 +1,15 @@
 /* Services List block */
 
 .services-list {
-    --services-line-top: 25%;
+    --services-line-top: 22%;
 
-    &__line {
+    .container { @apply px-0!; }
+
+    .services-list__line {
         position: absolute;
         inset-inline: 0;
         top: var(--services-line-top);
-        height: 8px;
+        height: 32px;
         pointer-events: none;
         z-index: 1;
         background-image: url('/wp-content/themes/community-works-collaborative/static/img/services-list-line.svg');
@@ -16,24 +18,24 @@
         background-size: 100% 100%;
     }
 
-    &__grid {
+    .services-list__grid {
         position: relative;
         z-index: 2;
     }
 
-    &__card {
+    .services-list__card {
         @apply flex flex-col;
     }
 
-    &__media {
+    .services-list__media {
         @apply overflow-hidden rounded-md bg-gray-100;
     }
 
-    &__img {
+    .services-list__img {
         @apply w-full h-full object-cover;
     }
 
-    &__heading {
+    .services-list__heading {
         @apply text-cwc-blue-01 text-24px font-bold leading-none mt-6 mb-4;
 
         &::after {
@@ -46,7 +48,7 @@
         }
     }
 
-    &__desc {
+    .services-list__desc {
         @apply text-gray-600 text-16px font-light leading-snug;
     }
 }

views/blocks/services-list/services-list.php

@@ -19,7 +19,7 @@ $count      = count( $items );
 $grid_cols  = max( 2, min( 4, (int) $count ) );
 $grid_class = 'lg:grid-cols-' . $grid_cols;
 
-$classes = 'services-list mx-break-out relative ' . $grid_class;
+$classes = 'services-list mx-break-out relative mb-8 lg:mb-12 xl:mb-16 ' . $grid_class;
 $wrapper = blockWrapperAttributes( $classes, $is_preview );
 ?>
 
@@ -31,7 +31,7 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
 			<?php foreach ( $items as $item ) : ?>
 				<article class="services-list__card">
 					<?php if ( ! empty( $item['image'] ) ) : ?>
-						<figure class="services-list__media aspect-square">
+						<figure class="services-list__media">
 							<img
 								class="services-list__img"
 								src="<?php echo esc_url( $item['image']['url'] ); ?>"
@@ -48,7 +48,7 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
 					<?php endif; ?>
 
 					<?php if ( ! empty( $item['description'] ) ) : ?>
-						<div class="services-list__desc">
+						<div class="services-list__desc font-light text-18px">
 							<?php echo wp_kses_post( $item['description'] ); ?>
 						</div>
 					<?php endif; ?>