Add newsletter block

blocks/newsletter/newsletter.css

@@ -0,0 +1,94 @@
+.newsletter {
+  background-color: #f5f5f5;
+  padding: 24px;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.newsletter-description {
+  font-size: 14px;
+  line-height: 1.5;
+  color: #333;
+}
+
+.newsletter-description p {
+  margin: 0 0 12px;
+}
+
+.newsletter-description p:last-child {
+  margin-bottom: 0;
+}
+
+.newsletter-description em {
+  font-size: 12px;
+  color: #666;
+}
+
+.newsletter-form {
+  margin: 8px 0;
+}
+
+.newsletter-form-element {
+  display: flex;
+  gap: 0;
+  align-items: stretch;
+}
+
+.newsletter-input {
+  flex: 1;
+  padding: 10px 12px;
+  border: 1px solid #d0d0d0;
+  border-right: none;
+  border-radius: 2px 0 0 2px;
+  font-size: 14px;
+  font-family: inherit;
+  background-color: #fff;
+}
+
+.newsletter-input:focus {
+  outline: none;
+  border-color: #999;
+  box-shadow: none;
+}
+
+.newsletter-button {
+  padding: 10px 20px;
+  background-color: #000;
+  color: #fff;
+  border: none;
+  border-radius: 0 2px 2px 0;
+  font-size: 12px;
+  font-weight: 700;
+  font-family: inherit;
+  text-transform: uppercase;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background-color 0.2s ease;
+}
+
+.newsletter-button:hover {
+  background-color: #333;
+}
+
+.newsletter-button:active {
+  background-color: #000;
+}
+
+.newsletter-footer {
+  font-size: 12px;
+  color: #666;
+  line-height: 1.5;
+}
+
+.newsletter-description a,
+.newsletter-footer a {
+  color: #06c;
+  text-decoration: none;
+}
+
+.newsletter-description a:hover,
+.newsletter-footer a:hover {
+  text-decoration: underline;
+}

blocks/newsletter/newsletter.js

@@ -0,0 +1,76 @@
+/**
+ * loads and decorates the newsletter block
+ * @param {Element} block The block element
+ */
+export default function decorate(block) {
+  // Extract content from block rows
+  const rows = [...block.children];
+
+  // First row contains description and disclaimer
+  const descriptionRow = rows[0];
+  const descriptionContent = descriptionRow?.querySelector('div');
+
+  // Second row contains the email input placeholder and sign up button text
+  const formRow = rows[1];
+  const formContent = formRow?.querySelector('div');
+
+  // Third row contains the privacy policy footer
+  const footerRow = rows[2];
+  const footerContent = footerRow?.querySelector('div');
+
+  // Clear block
+  block.textContent = '';
+
+  // Add description section
+  if (descriptionContent) {
+    const descSection = document.createElement('div');
+    descSection.className = 'newsletter-description';
+    descSection.innerHTML = descriptionContent.innerHTML;
+    block.append(descSection);
+  }
+
+  // Create form section
+  if (formContent) {
+    const formSection = document.createElement('div');
+    formSection.className = 'newsletter-form';
+
+    const form = document.createElement('form');
+    form.className = 'newsletter-form-element';
+
+    // Get placeholder text and button text
+    const paragraphs = formContent.querySelectorAll('p');
+    const placeholderText = paragraphs[0]?.textContent || 'Enter email address';
+    const buttonText = paragraphs[1]?.textContent || 'Sign UP';
+
+    // Create email input
+    const input = document.createElement('input');
+    input.type = 'email';
+    input.placeholder = placeholderText;
+    input.className = 'newsletter-input';
+    input.setAttribute('aria-label', 'Email address');
+
+    // Create submit button
+    const button = document.createElement('button');
+    button.type = 'submit';
+    button.className = 'newsletter-button';
+    button.textContent = buttonText;
+
+    form.append(input);
+    form.append(button);
+    formSection.append(form);
+    block.append(formSection);
+
+    // Prevent form submission (no-op for now)
+    form.addEventListener('submit', (e) => {
+      e.preventDefault();
+    });
+  }
+
+  // Add footer section
+  if (footerContent) {
+    const footerSection = document.createElement('div');
+    footerSection.className = 'newsletter-footer';
+    footerSection.innerHTML = footerContent.innerHTML;
+    block.append(footerSection);
+  }
+}