feat: also wrap pictures in p

adobe-rnd · Feb 13, 2024 · c8f9169 · c8f9169
1 parent f0bee40
commit c8f9169
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css
@@ -16,6 +16,10 @@
   margin: 16px;
 }
 
+.cards .cards-card-image p {
+  margin: 0;
+}
+
 .cards .cards-card-image {
   line-height: 0;
 }

diff --git a/scripts/aem.js b/scripts/aem.js
@@ -622,14 +622,13 @@ function decorateBlock(block) {
     blockWrapper.classList.add(`${shortBlockName}-wrapper`);
     const section = block.closest('.section');
     if (section) section.classList.add(`${shortBlockName}-container`);
+    // wrap plain text and inline elements in a <p>
     block.querySelectorAll(':scope > div > div').forEach((cell) => {
-      if (cell.textContent.trim()) {
-        const firstChild = cell.firstElementChild;
-        if (!firstChild || ['STRONG', 'EM', 'A'].includes(firstChild.tagName)) {
-          const p = document.createElement('p');
-          p.append(...cell.childNodes);
-          cell.replaceChildren(p);
-        }
+      const firstChild = cell.firstElementChild;
+      if (!firstChild || ['STRONG', 'EM', 'A', 'PICTURE'].includes(firstChild.tagName)) {
+        const p = document.createElement('p');
+        p.append(...cell.childNodes);
+        cell.replaceChildren(p);
       }
     });
   }