soames-astro-theme 0.1.5 → 0.1.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "soames-astro-theme",
   "type": "module",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Shared Astro theme for the Soames ecosystem (WordPress headless + React islands). Successor to soames-gatsby-theme.",
   "keywords": [
     "astro",

package/src/components/shortcodes/Shortcodes.tsx

@@ -205,6 +205,17 @@ const handleShortcodes: HTMLReactParserOptions["replace"] = (node) => {
     }
 
     if (classes.includes("wp-block-soames-text-list")) {
+      const attrs = (node as DomElement).attribs;
+      // ORBI-42: new blocks emit JSON `data-items` (one HTML chunk per list item).
+      // Old blocks emit their inner HTML directly — keep rendering that as-is.
+      if (attrs["data-items"]) {
+        try {
+          const items = JSON.parse(attrs["data-items"]);
+          if (Array.isArray(items)) return <SoamesTextList items={items} />;
+        } catch {
+          /* malformed JSON — fall through to the legacy passthrough below */
+        }
+      }
       return (
         <section className="soames-section article soames-list pb-0">
           <div className="container">

package/src/components/shortcodes/SoamesTextList.tsx

@@ -1,20 +1,38 @@
 import React from "react";
+import parse from "html-react-parser";
 
-interface SoamesTextListProps {
+// ORBI-42 grouped format: one HTML chunk per list item.
+interface TextItem {
   content: string;
 }
 
-const SoamesTextList: React.FC<SoamesTextListProps> = ({ content }) => {
-  const lineItems = content?.split('__SOAMES_LI__') ?? [];
+interface SoamesTextListProps {
+  // New (ORBI-42) grouped items from the block's data-items JSON.
+  items?: TextItem[];
+  // Legacy [soames-text-list] shortcode: a single string, split on the sentinel.
+  content?: string;
+}
+
+const SoamesTextList: React.FC<SoamesTextListProps> = ({ items, content }) => {
+  // Prefer the grouped items; fall back to the legacy sentinel-split string.
+  const listItems: string[] =
+    items && items.length
+      ? items.map((it) => it?.content ?? "")
+      : (content ?? "").split("__SOAMES_LI__");
+
+  const cleaned = listItems.filter((html) => (html ?? "").trim().length > 0);
 
+  // `soames-text-list` carries the top/bottom padding (ORBI-42) that replaces the
+  // old manual <br><br> spacers — see styles/soames/overrides.css. Note: no pt-0/
+  // pb-0 here (they previously zeroed the padding).
   return (
-    <section className="soames-section article soames-list pb-0">
+    <section className="soames-section article soames-list soames-text-list">
       <div className="container">
         <div className="media-container-row">
-          <div className="soames-text counter-container col-12 col-md-10 mbr-fonts-style pt-0 display-7">
+          <div className="soames-text counter-container col-12 col-md-10 mbr-fonts-style display-7">
             <ul>
-              {lineItems.map((lineItem, key) => (
-                <li key={key}>{lineItem}</li>
+              {cleaned.map((html, key) => (
+                <li key={key}>{parse(html)}</li>
               ))}
             </ul>
           </div>

package/src/styles/soames/overrides.css

@@ -1779,6 +1779,14 @@ section.lazy-placeholder:after {
   color: #000000;
 }
 
+/* ORBI-42: the refactored Soames Text List carries its own symmetric top/bottom
+   padding (replacing the old manual <br><br> spacers). Scoped to this class so
+   other .soames-list consumers keep their existing spacing. */
+.soames-text-list {
+  padding-top: 45px;
+  padding-bottom: 45px;
+}
+
 .soames-footer {
   padding-top: 15px;
   padding-bottom: 15px;