Merge pull request #6 from AdobeDevXSC/wip

Update columns block

Author: timwlee

blocks/columns/columns.css

@@ -7,6 +7,10 @@
   width: 100%;
 }
 
+.columns p {
+  margin: 0;
+}
+
 .columns > div > div {
   order: 1;
 }
@@ -27,11 +31,27 @@
   .columns > div {
     align-items: center;
     flex-direction: unset;
-    gap: 24px;
+    /* gap: 24px; */
   }
 
   .columns > div > div {
     flex: 1;
     order: unset;
   }
 }
+
+/* multi col */
+.columns > div > .columns-multi-col {
+  position: relative;
+  padding: 0 !important;
+}
+
+.columns > div > .columns-multi-col > .content-wrapper {
+  position: absolute;
+  bottom: 0;
+  padding: 4rem;
+}
+
+.columns > div > .columns-multi-col img {
+  object-fit: contain;
+}

blocks/columns/columns.js

@@ -2,16 +2,44 @@ export default function decorate(block) {
   const cols = [...block.firstElementChild.children];
   block.classList.add(`columns-${cols.length}-cols`);
 
-  // setup image columns
   [...block.children].forEach((row) => {
     [...row.children].forEach((col) => {
-      const pic = col.querySelector('picture');
-      if (pic) {
-        const picWrapper = pic.closest('div');
-        if (picWrapper && picWrapper.children.length === 1) {
-          // picture is only content in column
-          picWrapper.classList.add('columns-img-col');
+      let isMultiCol = false;
+      const children = [...col.children];
+
+      children.forEach((child) => {
+        const hasImg = child.querySelector('img');
+        // Clean slate (optional but recommended)
+        col.classList.remove(
+          'columns-img-col',
+          'columns-reg-col',
+          'columns-multi-col',
+        );
+
+        if (hasImg && children.length > 1) {
+          col.classList.add('columns-multi-col');
+          isMultiCol = true;
+        } else if (hasImg) {
+          col.classList.add('columns-img-col');
+        } else {
+          col.classList.add('columns-reg-col');
         }
+      });
+
+      if (isMultiCol) {
+        col.classList.remove('columns-img-col', 'columns-reg-col');
+        col.classList.add('columns-multi-col');
+
+        const div = document.createElement('div');
+        div.className = 'content-wrapper';
+
+        children.forEach((child) => {
+          // console.log("child: ", child);
+          if (!child.querySelector('img')) {
+            div.appendChild(child);
+          }
+        });
+        col.appendChild(div);
       }
     });
   });