Add editorial-promo block

blocks/editorial-promo/editorial-promo.css

@@ -0,0 +1,53 @@
+.editorial-promo ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.editorial-promo li {
+  margin: 0;
+  padding: 0;
+}
+
+.editorial-promo-link {
+  display: flex;
+  gap: 16px;
+  text-decoration: none;
+  color: inherit;
+  transition: opacity 0.2s ease;
+}
+
+.editorial-promo-link:hover {
+  opacity: 0.8;
+}
+
+.editorial-promo-image {
+  flex-shrink: 0;
+  width: 161px;
+  height: 121px;
+  overflow: hidden;
+  line-height: 0;
+}
+
+.editorial-promo-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.editorial-promo-text {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 1.3;
+  color: #000;
+}
+
+.editorial-promo-link:hover .editorial-promo-text {
+  text-decoration: underline;
+}

blocks/editorial-promo/editorial-promo.js

@@ -0,0 +1,51 @@
+import { createOptimizedPicture } from '../../scripts/aem.js';
+
+/**
+ * loads and decorates the editorial promo block
+ * @param {Element} block The block element
+ */
+export default function decorate(block) {
+  // Convert block to unordered list
+  const ul = document.createElement('ul');
+  [...block.children].forEach((row) => {
+    const li = document.createElement('li');
+
+    // Extract image and link from row
+    const imageDiv = row.children[0];
+    const linkDiv = row.children[1];
+
+    if (imageDiv && linkDiv) {
+      // Create link wrapper
+      const link = linkDiv.querySelector('a');
+      if (link) {
+        const anchor = document.createElement('a');
+        anchor.href = link.href;
+        anchor.className = 'editorial-promo-link';
+
+        // Add image container
+        const imageContainer = document.createElement('div');
+        imageContainer.className = 'editorial-promo-image';
+        const picture = imageDiv.querySelector('picture');
+        if (picture) {
+          const img = picture.querySelector('img');
+          if (img) {
+            imageContainer.append(createOptimizedPicture(img.src, img.alt, false, [{ width: '161' }]));
+          }
+        }
+
+        // Add text container
+        const textContainer = document.createElement('div');
+        textContainer.className = 'editorial-promo-text';
+        textContainer.textContent = link.textContent;
+
+        anchor.append(imageContainer);
+        anchor.append(textContainer);
+        li.append(anchor);
+      }
+    }
+
+    ul.append(li);
+  });
+
+  block.replaceChildren(ul);
+}