✨feature: Add services list block

acf/group_services_list.json

@@ -48,7 +48,8 @@
                     "max_size": "",
                     "mime_types": "",
                     "allow_in_bindings": 0,
-                    "preview_size": "medium"
+                    "preview_size": "medium",
+                    "parent_repeater": "field_services_items"
                 },
                 {
                     "key": "field_services_item_heading",
@@ -69,14 +70,15 @@
                     "allow_in_bindings": 0,
                     "placeholder": "",
                     "prepend": "",
-                    "append": ""
+                    "append": "",
+                    "parent_repeater": "field_services_items"
                 },
                 {
                     "key": "field_services_item_description",
                     "label": "Description",
                     "name": "description",
                     "aria-label": "",
-                    "type": "textarea",
+                    "type": "wysiwyg",
                     "instructions": "",
                     "required": 0,
                     "conditional_logic": 0,
@@ -86,10 +88,12 @@
                         "id": ""
                     },
                     "default_value": "",
-                    "placeholder": "",
-                    "maxlength": "",
-                    "rows": 4,
-                    "new_lines": ""
+                    "allow_in_bindings": 0,
+                    "tabs": "all",
+                    "toolbar": "full",
+                    "media_upload": 1,
+                    "delay": 0,
+                    "parent_repeater": "field_services_items"
                 }
             ]
         }
@@ -99,7 +103,7 @@
             {
                 "param": "block",
                 "operator": "==",
-                "value": "acf/services-list"
+                "value": "acf\/services-list"
             }
         ]
     ],
@@ -115,5 +119,5 @@
     "display_title": "",
     "allow_ai_access": false,
     "ai_description": "",
-    "modified": 1753305600
+    "modified": 1784992250
 }

static/img/services-list-line.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 8" preserveAspectRatio="none">
-    <rect x="0" y="3" width="1600" height="2" fill="#F26B53" />
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 32" preserveAspectRatio="none">
+    <rect x="0" y="3" width="1600" height="32" fill="#F26B53" />
 </svg>

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; ?>