Images grid block

blocks/v2-images-grid/v2-images-grid.css

@@ -0,0 +1,95 @@
+:root {
+  --v2-images-grid-gutter: 8px;
+  --v2-images-grid-big-height: 168px;
+  --v2-images-grid-small-height: 125px;
+  --v2-images-grid-padding-space: 24px;
+}
+
+.redesign-v2 .v2-images-grid-container .v2-images-grid-wrapper {
+  padding: 0 100px;
+}
+
+.v2-images-grid-container .with-marker::before {
+  width: 37px;
+}
+
+.v2-images-grid-title {
+  font: var(--headline-1-font-size)/var(--headline-1-line-height) var(--ff-headline-medium);
+}
+
+.v2-images-grid-items {
+  padding-left: 0;
+  display: grid;
+  grid-template-columns: 50%;
+  gap: var(--v2-images-grid-gutter);
+  grid-template-areas: 
+    'area1 area2'
+    'area1 area4'
+    'area3 area4';
+  list-style: none;
+  margin-bottom: var(--v2-images-grid-padding-space);
+}
+
+.v2-images-grid-item {
+  margin: 0;
+  width: auto;
+}
+
+.v2-images-grid-item:nth-child(1) { grid-area: area1; }
+.v2-images-grid-item:nth-child(2) { grid-area: area2; }
+.v2-images-grid-item:nth-child(3) { grid-area: area3; }
+.v2-images-grid-item:nth-child(4) { grid-area: area4; }
+
+.v2-images-grid-item img {
+  height: var(--v2-images-grid-big-height);
+  object-fit: cover;
+  width: 100%;
+}
+
+.v2-images-grid-item:nth-child(2) img, .v2-images-grid-item:nth-child(3) img {
+  height: var(--v2-images-grid-small-height);
+}
+
+.v2-images-grid-picture {
+  display: block;
+  position: relative;
+}
+
+.v2-images-grid-figcaption {
+  display: none;
+}
+
+@media screen and (min-width: 700px) {
+  :root {
+    --v2-images-grid-big-height: 300px;
+    --v2-images-grid-small-height: 200px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  :root {
+    --v2-images-grid-gutter: 16px;
+    --v2-images-grid-big-height: 511px;
+    --v2-images-grid-small-height: 383px;
+    --v2-images-grid-max-width: 1040px;
+    --v2-images-grid-padding-space: 40px;
+  }
+
+  .v2-images-grid-item img {
+    vertical-align: top;
+  }
+
+  .v2-images-grid-figcaption {
+    display: block;
+    text-align: center;
+    position: absolute;
+    bottom: 10px;
+    padding: 9px;
+    color: var(--c-primary-white);
+    background-color: var(--c-secondary-graphite);
+    right: 10px;
+    text-transform: uppercase;
+    font: var(--body-2-font-size)/16px var(--ff-body);
+    letter-spacing: 1.92px;
+  }
+}

blocks/v2-images-grid/v2-images-grid.js

@@ -0,0 +1,65 @@
+import { createOptimizedPicture } from '../../scripts/lib-franklin.js';
+import { createElement, removeEmptyTags, getTextLabel } from '../../scripts/common.js';
+
+const blockClassName = 'v2-images-grid';
+export default function decorate(block) {
+  const headings = [...block.querySelectorAll('h1, h2, h3, h4, h5, h6')];
+  headings.forEach((heading) => {
+    heading.classList.add(`${blockClassName}-title`, 'with-marker');
+    heading.parentElement.parentElement.remove();
+  });
+  // all items are inside a ul list with classname called 'v2-images-grid-items'
+  const ul = createElement('ul', { classes: `${blockClassName}-items` });
+  [...block.querySelectorAll(':scope > div > div')].forEach((cell) => {
+    // If cell contain any element, we add them in the ul
+    if (cell.childElementCount) {
+      const li = createElement('li', { classes: [`${blockClassName}-item`] });
+      li.append(...cell.childNodes);
+      ul.append(li);
+    }
+    cell.remove();
+  });
+  block.parentElement.prepend(...headings);
+  block.append(ul);
+
+  // give format to the first 4 list items
+  [...ul.children].forEach((li, idx) => {
+    if (idx < 4) {
+      const section = createElement('div');
+      const captionEle = li.querySelector('p:not(:has(*))');
+      let picture = li.querySelector('picture');
+
+      if (picture) {
+        const img = picture.lastElementChild;
+        // no width provided because we are using object-fit, we need the biggest option
+        const newPicture = createOptimizedPicture(img.src, captionEle.textContent, false);
+        picture.replaceWith(newPicture);
+        picture = newPicture;
+        picture.classList.add(`${blockClassName}-picture`);
+        // use figcaption for text
+        const figCaption = createElement('figcaption', { classes: `${blockClassName}-figcaption` });
+        figCaption.textContent = captionEle.textContent;
+        picture.append(figCaption);
+      }
+
+      // Move image outside of the wrapper
+      section.prepend(picture);
+
+      // Remove caption element
+      captionEle.remove();
+
+      li.append(section);
+      return;
+    }
+    li.remove();
+  });
+
+  const button = createElement('a', {
+    classes: ['button', 'button--large', 'button--primary'],
+  });
+  button.textContent = getTextLabel('Open Gallery');
+  block.append(button);
+
+  // remove empty tags
+  removeEmptyTags(block);
+}

placeholder.json

@@ -1,7 +1,7 @@
 {
-  "total": 21,
+  "total": 22,
   "offset": 0,
-  "limit": 21,
+  "limit": 22,
   "data": [
     {
       "Key": "Low resolution video message",
@@ -86,6 +86,10 @@
     {
       "Key": "channel aria label",
       "Text": "channel"
+    },
+    {
+      "Key": "Open Gallery",
+      "Text": "Open Gallery"
     }
   ],
   ":type": "sheet"