Merge pull request #28 from adobe/quote

feat: lightweight quote block

blocks/quote/quote.css

@@ -0,0 +1,34 @@
+.quote blockquote {
+  margin: 0 auto;
+  padding: 0 32px;
+  max-width: 700px;
+}
+
+.quote blockquote .quote-quotation {
+  font-size: 120%;
+}
+
+.quote blockquote .quote-quotation > :first-child {
+  text-indent: -0.6ch;
+}
+
+.quote blockquote .quote-quotation > :first-child::before,
+.quote blockquote .quote-quotation > :last-child::after {
+  line-height: 0;
+}
+
+.quote blockquote .quote-quotation > :first-child::before {
+  content: "“";
+}
+
+.quote blockquote .quote-quotation > :last-child::after {
+  content: "”";
+}
+
+.quote blockquote .quote-attribution {
+  text-align: right;
+}
+
+.quote blockquote .quote-attribution > :first-child::before {
+  content: "—";
+}

blocks/quote/quote.js

@@ -0,0 +1,30 @@
+function hasWrapper(el) {
+  return !!el.firstElementChild && window.getComputedStyle(el.firstElementChild).display === 'block';
+}
+
+export default async function decorate(block) {
+  const [quotation, attribution] = [...block.children].map((c) => c.firstElementChild);
+  const blockquote = document.createElement('blockquote');
+  // decorate quotation
+  quotation.className = 'quote-quotation';
+  if (!hasWrapper(quotation)) {
+    quotation.innerHTML = `<p>${quotation.innerHTML}</p>`;
+  }
+  blockquote.append(quotation);
+  // decoration attribution
+  if (attribution) {
+    attribution.className = 'quote-attribution';
+    if (!hasWrapper(attribution)) {
+      attribution.innerHTML = `<p>${attribution.innerHTML}</p>`;
+    }
+    blockquote.append(attribution);
+    const ems = attribution.querySelectorAll('em');
+    ems.forEach((em) => {
+      const cite = document.createElement('cite');
+      cite.innerHTML = em.innerHTML;
+      em.replaceWith(cite);
+    });
+  }
+  block.innerHTML = '';
+  block.append(blockquote);
+}