WIP: Update Tailwind to 3.4 to allow subgrid and update news card to use subgrid as example.

web/modules/custom/server_general/src/ElementTrait/NewsTeasersTrait.php

@@ -63,26 +63,32 @@ protected function buildElementNewsTeasers(string $title, array $body, array $it
    *   Render array.
    */
   protected function buildElementNewsTeaser(array $image, string $title, Url $url, array $summary, int $timestamp): array {
-    $elements = [];
-
     // Labels.
-    $element = $this->buildLabelsFromText([$this->t('News')]);
-    $elements[] = $this->wrapTextResponsiveFontSize($element, 'sm');
+    $labels = $this->buildLabelsFromText([$this->t('News')]);
+    $labels = $this->wrapTextResponsiveFontSize($labels, 'sm');
 
     // Date.
-    $element = IntlDate::formatPattern($timestamp, 'short');
-    $element = $this->wrapTextColor($element, 'gray');
-    $elements[] = $this->wrapTextResponsiveFontSize($element, 'sm');
+    $date = IntlDate::formatPattern($timestamp, 'short');
+    $date = $this->wrapTextColor($date, 'gray');
+    $date = $this->wrapTextResponsiveFontSize($date, 'sm');
 
     // Title as link.
-    $element = $this->buildLink($title, $url, 'dark-gray');
-    $element = $this->wrapTextResponsiveFontSize($element, 'lg');
-    $elements[] = $this->wrapTextFontWeight($element, 'bold');
+    $title = $this->wrapTextResponsiveFontSize($title, 'lg');
+    $title = $this->wrapTextFontWeight($title, 'bold');
+    $title = $this->wrapTextLineClamp($title, 3);
 
     // Body teaser.
-    $elements[] = $this->wrapTextLineClamp($summary, 4);
-
-    return $this->buildInnerElementLayoutWithImage($url, $image, $elements);
+    $description = $this->wrapTextLineClamp($summary, 4);
+
+    return [
+      '#theme' => 'server_theme_element__news_card',
+      '#image' => $image,
+      '#labels' => $labels,
+      '#date' => $date,
+      '#title' => $title,
+      '#description' => $description,
+      '#url' => $url,
+    ];
   }
 
   /**

web/themes/custom/server_theme/package.json

@@ -13,6 +13,6 @@
     "postcss-scss": "^4.0.5",
     "postcss-strip-inline-comments": "^0.1.5",
     "svgo": "^2.8.0",
-    "tailwindcss": "^3.3.0"
+    "tailwindcss": "^3.4.0"
   }
 }

web/themes/custom/server_theme/server_theme.theme

@@ -484,6 +484,17 @@ function server_theme_theme() {
     ],
   ];
 
+  $info['server_theme_element__news_card'] = [
+    'variables' => [
+      'image' => NULL,
+      'labels' => NULL,
+      'date' => NULL,
+      'title' => NULL,
+      'description' => NULL,
+      'url' => NULL,
+    ],
+  ];
+
   // Media document.
   $info['server_theme_media__document'] = [
     'variables' => [

web/themes/custom/server_theme/templates/node/node--view--news--embed-1.html.twig

@@ -0,0 +1,11 @@
+{#
+/**
+ * @file
+ * Theme override to display a news in news grid.
+ *
+ * Subgrid requires child grid items inheriting the grid from parent be
+ * immediate children of the parent grid. This means print the output without
+ * the Drupal's default node wrapper.
+ */
+#}
+{{ content }}

web/themes/custom/server_theme/templates/server-theme-element--news-card.html.twig

@@ -0,0 +1,31 @@
+{#
+/**
+ * @file
+ * Subgrid card elements.
+ *
+ * We have a child and grandchild here, both of which are subgrid elements.
+ * `grid-rows-subgrid` on both declares that this is a subgrid element.
+ *
+ * `row-span-5` on child specifies that each card element will span 5 rows of
+ * the grid.
+ *
+ * <a> wrapper for the image takes the first row.
+ *
+ * `row-start-2` and `row-end-6` on grandchild element, which contains label,
+ * date, title and description, specifies that each of these will span
+ * row 2 to 5, each auto placed in one row.
+ */
+#}
+<article class="grid grid-rows-subgrid row-span-5 items-start relative rounded-lg border border-gray-300 w-full h-full overflow-hidden bg-white">
+  <a href="{{ url }}">
+    <figure class="child-object-cover h-48">
+        {{ image }}
+    </figure>
+  </a>
+  <div class="grid grid-rows-subgrid row-start-2 row-end-6 gap-4 md:gap-5 p-4 items-start">
+    {{ labels }}
+    {{ date }}
+    {{ title }}
+    {{ description }}
+  </div>
+</article>

web/themes/custom/server_theme/templates/server-theme-news-cards.html.twig

@@ -0,0 +1,6 @@
+{# 'auto-rows-auto' is important here for auto placement. #}
+<div class="grid auto-rows-auto grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-6 lg:gap-y-8">
+  {% for item in items %}
+    {{ item }}
+  {% endfor %}
+</div>

web/themes/custom/server_theme/templates/views-view-unformatted--news.html.twig

@@ -21,6 +21,6 @@
   {% set items = items|merge([row.content]) %}
 {% endfor %}
 
-{% embed '@server_theme/server-theme-cards.html.twig' %}
+{% embed '@server_theme/server-theme-news-cards.html.twig' %}
   {% set items = items %}
 {% endembed %}