@the-smithy/create-hearth-site 0.31.0 → 0.33.0

package/template/src/hearth/blocks/content.tsx

@@ -1,5 +1,6 @@
 import type { BlockOf } from "@the-smithy/hearth";
 import { theme } from "@/theme";
+import { hasPart, Part } from "../parts";
 import { cx } from "../theme";
 import { Button, Emphasis, fill, ground, Img, Markdown, plain, Section, SectionHeading, SmartLink, toTone } from "../ui";
 
@@ -10,26 +11,32 @@ export function Hero({ block }: { block: BlockOf<"hero"> }) {
   // Without a tone it's the design's own ground, dark, in `hero.root`. A tone sets the ground, which turns on-dark: on or off.
   return (
     <section id={block.anchor} data-block="hero" data-size={d.size} {...ground(d.tone ?? "inverse")} className={cx(d.tone ? `${theme.tones[d.tone]} ${t.toned}` : t.root, block.anchor && theme.section.anchored)}>
-      {d.image ? <Img image={d.image} crop priority className={t.image} /> : null}
+      <Part name="hero.media" props={{ block }}>
+        {d.image ? <Img image={d.image} crop priority className={t.image} /> : null}
+      </Part>
       <div className={t.inner} data-size={d.size}>
-        {d.logo ? <Img image={d.logo} priority className={t.logo} /> : null}
-        {d.eyebrow ? <p className={t.eyebrow}>{d.eyebrow}</p> : null}
-        <h1 className={t.title}>
-          <Emphasis text={d.heading} className={t.emphasis} />
-        </h1>
-        {paragraphs.length > 1 ? (
-          paragraphs.map((p, i) => (
-            <p key={i} className={t.body}>
-              {p}
-            </p>
-          ))
-        ) : d.body ? (
-          <p className={t.body}>{d.body}</p>
-        ) : null}
-        {d.primaryCta || d.secondaryCta ? (
+        <Part name="hero.heading" props={{ block }}>
+          {d.logo ? <Img image={d.logo} priority className={t.logo} /> : null}
+          {d.eyebrow ? <p className={t.eyebrow}>{d.eyebrow}</p> : null}
+          <h1 className={t.title}>
+            <Emphasis text={d.heading} className={t.emphasis} />
+          </h1>
+          {paragraphs.length > 1 ? (
+            paragraphs.map((p, i) => (
+              <p key={i} className={t.body}>
+                {p}
+              </p>
+            ))
+          ) : d.body ? (
+            <p className={t.body}>{d.body}</p>
+          ) : null}
+        </Part>
+        {d.primaryCta || d.secondaryCta || hasPart("hero.actions") ? (
           <div className={t.actions}>
-            <Button link={d.primaryCta} />
-            <Button link={d.secondaryCta} variant="secondary" />
+            <Part name="hero.actions" props={{ block }}>
+              <Button link={d.primaryCta} />
+              <Button link={d.secondaryCta} variant="secondary" />
+            </Part>
           </div>
         ) : null}
       </div>
@@ -54,15 +61,21 @@ export function MediaText({ block }: { block: BlockOf<"mediaText"> }) {
     <Section block="mediaText" id={block.anchor}>
       <div className={t.grid} data-image={d.imagePosition}>
         <div className={t.text}>
-          <SectionHeading eyebrow={d.eyebrow} heading={d.heading} />
+          <Part name="mediaText.heading" props={{ block }}>
+            <SectionHeading eyebrow={d.eyebrow} heading={d.heading} />
+          </Part>
           <Markdown className={t.body}>{d.markdown}</Markdown>
-          {d.cta ? (
+          {d.cta || hasPart("mediaText.actions") ? (
             <div className={t.actions}>
-              <Button link={d.cta} />
+              <Part name="mediaText.actions" props={{ block }}>
+                <Button link={d.cta} />
+              </Part>
             </div>
           ) : null}
         </div>
-        {d.image ? <Img image={d.image} crop={d.imageFit === "contain" ? undefined : 4 / 3} className={t.image} data-fit={d.imageFit} /> : null}
+        <Part name="mediaText.media" props={{ block }}>
+          {d.image ? <Img image={d.image} crop={d.imageFit === "contain" ? undefined : 4 / 3} className={t.image} data-fit={d.imageFit} /> : null}
+        </Part>
       </div>
     </Section>
   );
@@ -72,12 +85,16 @@ export function Stats({ block }: { block: BlockOf<"stats"> }) {
   const t = theme.stats;
   return (
     <Section block="stats" id={block.anchor} tone={toTone(t.tone)}>
-      <SectionHeading heading={block.data.heading} />
+      <Part name="stats.heading" props={{ block }}>
+        <SectionHeading heading={block.data.heading} />
+      </Part>
       <dl className={t.list}>
         {block.data.items.map((s, i) => (
           <div key={i} className={t.item}>
-            <dt className={t.label}>{s.label}</dt>
-            <dd className={t.value}>{s.value}</dd>
+            <Part name="stats.item" props={{ block, item: s, index: i }}>
+              <dt className={t.label}>{s.label}</dt>
+              <dd className={t.value}>{s.value}</dd>
+            </Part>
           </div>
         ))}
       </dl>
@@ -98,20 +115,24 @@ export function CardGrid({ block }: { block: BlockOf<"cardGrid"> }) {
   const Title = d.heading ? "h3" : "h2";
   return (
     <Section block="cardGrid" id={block.anchor} tone={d.tone}>
-      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
+      <Part name="cardGrid.heading" props={{ block }}>
+        <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
+      </Part>
       <ul className={t.list}>
         {d.items.map((c, i) => (
           <li key={i} className={t.card} data-card={cardKey(c.title)} data-icon={c.icon}>
-            {c.image ? <Img image={c.image} crop={16 / 10} className={t.image} /> : null}
-            <Title className={t.title}>
-              <Emphasis text={c.title} />
-            </Title>
-            {c.body ? <p className={t.body}>{c.body}</p> : null}
-            {c.link ? (
-              <SmartLink href={c.link.href} className={t.link}>
-                {c.link.label}
-              </SmartLink>
-            ) : null}
+            <Part name="cardGrid.item" props={{ block, item: c, index: i, heading: Title }}>
+              {c.image ? <Img image={c.image} crop={16 / 10} className={t.image} /> : null}
+              <Title className={t.title}>
+                <Emphasis text={c.title} />
+              </Title>
+              {c.body ? <p className={t.body}>{c.body}</p> : null}
+              {c.link ? (
+                <SmartLink href={c.link.href} className={t.link}>
+                  {c.link.label}
+                </SmartLink>
+              ) : null}
+            </Part>
           </li>
         ))}
       </ul>
@@ -126,33 +147,37 @@ export function Projects({ block }: { block: BlockOf<"projects"> }) {
   const Title = d.heading ? "h3" : "h2";
   return (
     <Section block="projects" id={block.anchor} tone={d.tone}>
-      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
+      <Part name="projects.heading" props={{ block }}>
+        <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
+      </Part>
       <ul className={grid ? t.gridList : t.showcaseList} data-layout={d.layout}>
         {d.items.map((p, i) => (
           <li key={i} className={grid ? t.gridItem : t.showcaseItem} data-flip={!grid && i % 2 ? "" : undefined}>
-            {p.image ? <Img image={p.image} crop={16 / 10} className={t.image} /> : null}
-            <div className={t.text}>
-              <div className={t.top}>
-                <Title className={t.name}>{p.name}</Title>
-                {p.status ? <span className={t.status}>{p.status}</span> : null}
+            <Part name="projects.item" props={{ block, item: p, index: i, heading: Title }}>
+              {p.image ? <Img image={p.image} crop={16 / 10} className={t.image} /> : null}
+              <div className={t.text}>
+                <div className={t.top}>
+                  <Title className={t.name}>{p.name}</Title>
+                  {p.status ? <span className={t.status}>{p.status}</span> : null}
+                </div>
+                {p.role ? <p className={t.role}>{p.role}</p> : null}
+                {p.description ? <Markdown className={t.description}>{p.description}</Markdown> : null}
+                {p.stack.length ? (
+                  <ul className={t.stack}>
+                    {p.stack.map((s, j) => (
+                      <li key={j} className={t.stackItem}>
+                        {s}
+                      </li>
+                    ))}
+                  </ul>
+                ) : null}
+                {p.url ? (
+                  <SmartLink href={p.url} className={t.link}>
+                    {fill(theme.text.visitProject, { name: p.name })}
+                  </SmartLink>
+                ) : null}
               </div>
-              {p.role ? <p className={t.role}>{p.role}</p> : null}
-              {p.description ? <Markdown className={t.description}>{p.description}</Markdown> : null}
-              {p.stack.length ? (
-                <ul className={t.stack}>
-                  {p.stack.map((s, j) => (
-                    <li key={j} className={t.stackItem}>
-                      {s}
-                    </li>
-                  ))}
-                </ul>
-              ) : null}
-              {p.url ? (
-                <SmartLink href={p.url} className={t.link}>
-                  {fill(theme.text.visitProject, { name: p.name })}
-                </SmartLink>
-              ) : null}
-            </div>
+            </Part>
           </li>
         ))}
       </ul>
@@ -166,32 +191,36 @@ export function Pricing({ block }: { block: BlockOf<"pricing"> }) {
   const Title = d.heading ? "h3" : "h2";
   return (
     <Section block="pricing" id={block.anchor} tone={d.tone}>
-      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
+      <Part name="pricing.heading" props={{ block }}>
+        <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
+      </Part>
       <ul className={t.list} data-count={d.plans.length >= 4 ? "many" : "few"}>
         {d.plans.map((p, i) => (
           <li key={i} className={t.plan} data-highlight={p.highlight ? "" : undefined}>
-            {p.highlight ? <p className={t.highlight}>{p.highlight}</p> : null}
-            <Title className={t.name}>{p.name}</Title>
-            <p className={t.price}>
-              <span className={t.amount}>{p.price}</span>
-              {p.period ? <span className={t.period}>{p.period}</span> : null}
-            </p>
-            {p.description ? <p className={t.description}>{p.description}</p> : null}
-            {p.features.length ? (
-              <ul className={t.features}>
-                {p.features.map((f, j) => (
-                  <li key={j} className={t.feature}>
-                    <span aria-hidden className={t.check} />
-                    {f}
-                  </li>
-                ))}
-              </ul>
-            ) : null}
-            {p.cta ? (
-              <div className={t.actions}>
-                <Button link={p.cta} variant={p.highlight ? "primary" : "secondary"} />
-              </div>
-            ) : null}
+            <Part name="pricing.item" props={{ block, item: p, index: i, heading: Title }}>
+              {p.highlight ? <p className={t.highlight}>{p.highlight}</p> : null}
+              <Title className={t.name}>{p.name}</Title>
+              <p className={t.price}>
+                <span className={t.amount}>{p.price}</span>
+                {p.period ? <span className={t.period}>{p.period}</span> : null}
+              </p>
+              {p.description ? <p className={t.description}>{p.description}</p> : null}
+              {p.features.length ? (
+                <ul className={t.features}>
+                  {p.features.map((f, j) => (
+                    <li key={j} className={t.feature}>
+                      <span aria-hidden className={t.check} />
+                      {f}
+                    </li>
+                  ))}
+                </ul>
+              ) : null}
+              {p.cta ? (
+                <div className={t.actions}>
+                  <Button link={p.cta} variant={p.highlight ? "primary" : "secondary"} />
+                </div>
+              ) : null}
+            </Part>
           </li>
         ))}
       </ul>
@@ -206,14 +235,18 @@ export function CallToAction({ block }: { block: BlockOf<"cta"> }) {
   const content = (
     <div className={t.row}>
       <div className={t.text}>
-        <h2 className={t.title}>
-          <Emphasis text={d.heading} />
-        </h2>
-        {d.body ? <p className={t.body}>{d.body}</p> : null}
+        <Part name="cta.heading" props={{ block }}>
+          <h2 className={t.title}>
+            <Emphasis text={d.heading} />
+          </h2>
+          {d.body ? <p className={t.body}>{d.body}</p> : null}
+        </Part>
       </div>
       <div className={t.actions}>
-        <Button link={d.primary} />
-        <Button link={d.secondary} variant="secondary" />
+        <Part name="cta.actions" props={{ block }}>
+          <Button link={d.primary} />
+          <Button link={d.secondary} variant="secondary" />
+        </Part>
       </div>
     </div>
   );
@@ -225,7 +258,9 @@ export function CallToAction({ block }: { block: BlockOf<"cta"> }) {
     );
   return (
     <section id={block.anchor} data-block="cta" {...ground("inverse")} className={cx(t.imageRoot, block.anchor && theme.section.anchored)}>
-      <Img image={d.image} crop className={t.image} />
+      <Part name="cta.media" props={{ block }}>
+        <Img image={d.image} crop className={t.image} />
+      </Part>
       <div className={t.overlay}>
         <div className={t.overlayInner}>{content}</div>
       </div>
@@ -237,15 +272,19 @@ export function Faq({ block }: { block: BlockOf<"faq"> }) {
   const t = theme.faq;
   return (
     <Section block="faq" id={block.anchor}>
-      <SectionHeading heading={block.data.heading} />
+      <Part name="faq.heading" props={{ block }}>
+        <SectionHeading heading={block.data.heading} />
+      </Part>
       {block.data.display === "list" ? (
         <dl className={t.terms}>
           {block.data.items.map((q, i) => (
             <div key={i} className={t.term}>
-              <dt className={t.termQuestion}>{q.question}</dt>
-              <dd>
-                <Markdown className={t.termAnswer}>{q.answer}</Markdown>
-              </dd>
+              <Part name="faq.item" props={{ block, item: q, index: i }}>
+                <dt className={t.termQuestion}>{q.question}</dt>
+                <dd>
+                  <Markdown className={t.termAnswer}>{q.answer}</Markdown>
+                </dd>
+              </Part>
             </div>
           ))}
         </dl>
@@ -253,11 +292,13 @@ export function Faq({ block }: { block: BlockOf<"faq"> }) {
         <div className={t.list}>
           {block.data.items.map((q, i) => (
             <details key={i} className={t.item}>
-              <summary className={t.question}>
-                {q.question}
-                <span aria-hidden className={t.icon} />
-              </summary>
-              <Markdown className={t.answer}>{q.answer}</Markdown>
+              <Part name="faq.item" props={{ block, item: q, index: i }}>
+                <summary className={t.question}>
+                  {q.question}
+                  <span aria-hidden className={t.icon} />
+                </summary>
+                <Markdown className={t.answer}>{q.answer}</Markdown>
+              </Part>
             </details>
           ))}
         </div>

package/template/src/hearth/blocks/events.tsx

@@ -6,6 +6,7 @@ import { Registration } from "../components/Registration";
 import { VolunteerForm } from "../forms/VolunteerForm";
 import { formatEventDate } from "../format";
 import { overrides, type CardHeading } from "../overrides";
+import { Part } from "../parts";
 import { fill, Img, Section, SectionHeading, toTone } from "../ui";
 
 export { formatEventDate };
@@ -39,12 +40,18 @@ export function EventCard({ event, heading: Heading = "h3" }: { event: HearthEve
 /** Event cards (the site's own, if it replaces them). `heading` is the level of their titles; `emptyText` is what to say when there are none. */
 export function EventList({ events, heading = "h3", emptyText }: { events: HearthEvent[]; heading?: CardHeading; emptyText?: string }) {
   if (!events.length) return <p className={theme.eventCard.empty}>{emptyText || theme.text.noEvents}</p>;
-  const Card = overrides.EventCard ?? EventCard;
+  const Card = overrides.EventCard;
   return (
     <ul className={theme.eventCard.list}>
-      {events.map((e) => (
-        <Card key={e.slug} event={e} heading={heading} />
-      ))}
+      {events.map((e) =>
+        Card ? (
+          <Card key={e.slug} event={e} heading={heading}>
+            <EventCard event={e} heading={heading} />
+          </Card>
+        ) : (
+          <EventCard key={e.slug} event={e} heading={heading} />
+        ),
+      )}
     </ul>
   );
 }
@@ -54,7 +61,9 @@ export function UpcomingEvents({ block }: { block: BlockOf<"upcomingEvents"> })
   const href = d.collection?.path ?? "/events";
   return (
     <Section block="upcomingEvents" id={block.anchor}>
-      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
+      <Part name="upcomingEvents.heading" props={{ block }}>
+        <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
+      </Part>
       <EventList events={d.events} heading={d.heading ? "h3" : "h2"} emptyText={d.emptyText} />
       {/* A limit of 0 is every event already, and on the page it points at the link would go nowhere. */}
       {d.events.length && d.limit !== 0 ? (
@@ -74,7 +83,9 @@ export function PastEvents({ block }: { block: BlockOf<"pastEvents"> }) {
   if (!d.events.length && !d.emptyText) return null;
   return (
     <Section block="pastEvents" id={block.anchor} tone={toTone(theme.pastEvents.tone)}>
-      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
+      <Part name="pastEvents.heading" props={{ block }}>
+        <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
+      </Part>
       <EventList events={d.events} heading={d.heading ? "h3" : "h2"} emptyText={d.emptyText} />
     </Section>
   );
@@ -94,12 +105,16 @@ export function EventSpotlight({ block }: { block: BlockOf<"eventSpotlight"> })
           {e.location.name ? <p className={t.place}>{e.location.name}</p> : null}
           {e.summary ? <p className={t.summary}>{e.summary}</p> : null}
           <div className={t.actions}>
-            <Link href={e.path} className={theme.button.primary}>
-              {theme.text.eventDetails}
-            </Link>
+            <Part name="eventSpotlight.actions" props={{ block }}>
+              <Link href={e.path} className={theme.button.primary}>
+                {theme.text.eventDetails}
+              </Link>
+            </Part>
           </div>
         </div>
-        {e.image ? <Img image={e.image} crop={4 / 3} className={t.image} /> : null}
+        <Part name="eventSpotlight.media" props={{ block }}>
+          {e.image ? <Img image={e.image} crop={4 / 3} className={t.image} /> : null}
+        </Part>
       </div>
     </Section>
   );

package/template/src/hearth/blocks/giving.tsx

@@ -5,6 +5,7 @@ import { NotHere } from "../components/NotHere";
 import { DonationForm } from "../forms/DonationForm";
 import { money } from "../format";
 import { overrides, type CardHeading } from "../overrides";
+import { Part } from "../parts";
 import { fill, Img, Section, SectionHeading, toTone } from "../ui";
 
 export { money };
@@ -56,12 +57,18 @@ export function FundraiserCard({ fundraiser, heading: Heading = "h3" }: { fundra
 /** Fundraiser cards (the site's own, if it replaces them). `heading` is the level of their titles; `emptyText` is what to say when there are none. */
 export function FundraiserList({ fundraisers, heading = "h3", emptyText }: { fundraisers: Fundraiser[]; heading?: CardHeading; emptyText?: string }) {
   if (!fundraisers.length) return <p className={theme.fundraiserCard.empty}>{emptyText || theme.text.noFundraisers}</p>;
-  const Card = overrides.FundraiserCard ?? FundraiserCard;
+  const Card = overrides.FundraiserCard;
   return (
     <ul className={theme.fundraiserCard.list}>
-      {fundraisers.map((f) => (
-        <Card key={f.slug} fundraiser={f} heading={heading} />
-      ))}
+      {fundraisers.map((f) =>
+        Card ? (
+          <Card key={f.slug} fundraiser={f} heading={heading}>
+            <FundraiserCard fundraiser={f} heading={heading} />
+          </Card>
+        ) : (
+          <FundraiserCard key={f.slug} fundraiser={f} heading={heading} />
+        ),
+      )}
     </ul>
   );
 }
@@ -70,7 +77,9 @@ export function FundraiserGrid({ block }: { block: BlockOf<"fundraiserGrid"> })
   const d = block.data;
   return (
     <Section block="fundraiserGrid" id={block.anchor}>
-      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
+      <Part name="fundraiserGrid.heading" props={{ block }}>
+        <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
+      </Part>
       <FundraiserList fundraisers={d.fundraisers} heading={d.heading ? "h3" : "h2"} emptyText={d.emptyText} />
       {d.fundraisers.length ? (
         <NotHere href="/fundraisers">
@@ -96,17 +105,21 @@ export function FundraiserSpotlight({ block }: { block: BlockOf<"fundraiserSpotl
           {f.summary ? <p className={t.summary}>{f.summary}</p> : null}
           <Progress fundraiser={f} large />
           <p className={t.actions}>
-            {f.status === "active" ? (
-              <Link href={`${f.path}#donate`} className={theme.button.primary}>
-                {theme.text.donate}
+            <Part name="fundraiserSpotlight.actions" props={{ block }}>
+              {f.status === "active" ? (
+                <Link href={`${f.path}#donate`} className={theme.button.primary}>
+                  {theme.text.donate}
+                </Link>
+              ) : null}
+              <Link href={f.path} className={t.learnMore}>
+                {theme.text.learnMore}
               </Link>
-            ) : null}
-            <Link href={f.path} className={t.learnMore}>
-              {theme.text.learnMore}
-            </Link>
+            </Part>
           </p>
         </div>
-        {f.image ? <Img image={f.image} crop={4 / 3} className={t.image} /> : null}
+        <Part name="fundraiserSpotlight.media" props={{ block }}>
+          {f.image ? <Img image={f.image} crop={4 / 3} className={t.image} /> : null}
+        </Part>
       </div>
     </Section>
   );
@@ -118,7 +131,9 @@ export function Donate({ block }: { block: BlockOf<"donate"> }) {
   return (
     <Section block="donate" id={block.anchor}>
       <div className={t.wrap}>
-        <SectionHeading heading={d.heading} intro={d.intro} />
+        <Part name="donate.heading" props={{ block }}>
+          <SectionHeading heading={d.heading} intro={d.intro} />
+        </Part>
         {d.fundraiser ? <p className={t.supporting}>{fill(theme.text.supporting, { fundraiser: d.fundraiser.title })}</p> : null}
         <DonationForm presetsCents={d.presetsCents} minCents={d.minCents} maxCents={d.maxCents} fundraiser={d.fundraiser?.slug} submitLabel={d.submitLabel} />
       </div>

package/template/src/hearth/blocks/index.tsx

@@ -1,10 +1,11 @@
 import type { BlockOf, ResolvedBlock } from "@the-smithy/hearth";
 import { HearthBlocks, type BlockComponents } from "@the-smithy/hearth/react";
-import type { ComponentType } from "react";
+import type { ComponentType, ReactNode } from "react";
 import { theme } from "@/theme";
 import { EmberFormBlock } from "../forms/EmberFormBlock";
 import { HearthForm } from "../forms/ContactForm";
 import { overrides } from "../overrides";
+import { Part } from "../parts";
 import { Section, SectionHeading } from "../ui";
 import { CollectionList } from "./collections";
 import { CallToAction, CardGrid, Faq, Hero, MediaText, Pricing, Projects, Quote, RichText, Stats } from "./content";
@@ -18,7 +19,9 @@ function FormBlock({ block }: { block: BlockOf<"form"> }) {
   return (
     <Section block="form" id={block.anchor}>
       <div className={theme.formBlock.wrap}>
-        <SectionHeading heading={block.data.heading} intro={block.data.intro} />
+        <Part name="form.heading" props={{ block }}>
+          <SectionHeading heading={block.data.heading} intro={block.data.intro} />
+        </Part>
         {/* Set to an Ember form in Hearth: Ember renders it and keeps the leads; the site's form is the fallback. */}
         {block.data.emberFormId ? (
           <EmberFormBlock formId={block.data.emberFormId} fallback={<HearthForm form={block.data} />} />
@@ -32,7 +35,7 @@ function FormBlock({ block }: { block: BlockOf<"form"> }) {
 
 /**
  * One component per Hearth block type. Sites style them through the theme (src/theme/index.ts); a site that has to
- * replace one entirely does it in src/theme/overrides.tsx. Types without a component (including ones Hearth adds
+ * change one adds to it, replaces one of its parts or replaces it in src/theme/overrides.tsx. Types without a component (including ones Hearth adds
  * later) render nothing.
  */
 export const blocks: BlockComponents = {
@@ -66,15 +69,21 @@ export const blocks: BlockComponents = {
   custom: CustomBlock,
 };
 
-/** A site's replaced block keeps working with anchors from Hearth, whether or not its code knows about them. */
-const anchored = (Component: ComponentType<{ block: ResolvedBlock }>) =>
-  function Anchored({ block }: { block: ResolvedBlock }) {
+type Drawn = ComponentType<{ block: ResolvedBlock; children?: ReactNode }>;
+
+/**
+ * A site's block, given Hearth's own as its children, to keep, add to or leave out. Anchors from Hearth keep working
+ * around it, whether or not its code knows about them, so Hearth's inside it goes without one.
+ */
+const extended = (Component: Drawn, Hearths: Drawn | undefined) =>
+  function Extended({ block }: { block: ResolvedBlock }) {
+    const drawn = <Component block={block}>{Hearths ? <Hearths block={{ ...block, anchor: undefined }} /> : null}</Component>;
     return block.anchor ? (
       <div id={block.anchor} className={theme.section.anchored}>
-        <Component block={block} />
+        {drawn}
       </div>
     ) : (
-      <Component block={block} />
+      drawn
     );
   };
 
@@ -87,7 +96,9 @@ let components: BlockComponents | undefined;
 function allBlocks() {
   components ??= {
     ...blocks,
-    ...Object.fromEntries(Object.entries(overrides.blocks ?? {}).map(([type, component]) => [type, anchored(component as ComponentType<{ block: ResolvedBlock }>)])),
+    ...Object.fromEntries(
+      Object.entries(overrides.blocks ?? {}).map(([type, component]) => [type, extended(component as Drawn, blocks[type as keyof BlockComponents] as Drawn | undefined)]),
+    ),
   };
   return components;
 }