Blocks Campaign Pack

Crowdfunding-campaign-page blocks for a single-page, all-or-nothing pledge campaign — promoted from wabbit.com's site-local Campaign* block family into a standalone, sellable Tome block pack (family: block-packs, tier: addon).

What this is

Five blocks that together make up a pledge-campaign landing page: an opening hero, a live-progress strip, a reward-tier wall, a plain-language terms strip, and a closing call to action. Copy, prices and links are authored on the block. Campaign figures (pledged, goal, backers, days left, percent funded) are not: they come from your site's own campaign source at render, through the @wabbit/tome-blocks-campaign-pack/server subpath — see Live campaign figures. The pack itself never imports a database client or a payment provider, so it installs and renders on a stock site; without a source the figures simply do not appear.

Blocks

Install into an existing Payload project

npm install @wabbit/tome-blocks-campaign-pack

@wabbit/tome-blocks-core and @wabbit/tome-blocks-house are required peers and install automatically (npm 7+/pnpm). Add the blocks you want to an existing blocks field and render them — see @wabbit/tome-blocks-core's "Add Tome blocks to an existing Payload project" for the full walkthrough:

// payload.config.ts
import { campaignHeroBlock, campaignCloseBlock } from '@wabbit/tome-blocks-campaign-pack'
// blocks: [...existingBlocks, campaignHeroBlock.block(), campaignCloseBlock.block()]

// blockComponents.ts
import { renderers as campaignRenderers } from '@wabbit/tome-blocks-campaign-pack/render/register'
import { adaptRenderersForPayload } from '@wabbit/tome-blocks-core/render'
// blockComponents: { ...adaptRenderersForPayload(campaignRenderers) }

@import '@wabbit/tome-blocks-core/styles.css';

Render through this package's RenderBlocks with the grid — skipping the grid class doesn't error at install or build time, it just renders every block flush against the viewport edge with zero gutters:

// src/blocks/RenderBlocks.tsx
import { RenderBlocks as TomeRenderBlocks, adaptRenderersForPayload } from '@wabbit/tome-blocks-core/render'
import { renderers as campaignRenderers } from '@wabbit/tome-blocks-campaign-pack/render/register'
import gridStyles from '@wabbit/tome-ui/grid'

const blockComponents = { ...adaptRenderersForPayload(campaignRenderers) }

export function RenderBlocks({ blocks }: { blocks: LayoutBlock[] }) {
  return <TomeRenderBlocks blocks={blocks} components={blockComponents} gridClassName={gridStyles.grid} />
}

Every renderer is typed React.FC<BlockRenderProps<T>> — it destructures { block, className, index }, not the block's own fields spread at the top level; that mismatch is the most common first-render crash. campaign-hero's marginalia figure needs the upload relationship populated at depth >= 1 — a bare, unpopulated id resolves to nothing and logs a one-time console warning, per @wabbit/tome-blocks-core's default media adapter.

Registering everything from scratch instead of adding to an existing field:

// payload.config.ts
import { BlockRegistry, BundleRegistry } from '@wabbit/tome-blocks-core/registry'
import { register } from '@wabbit/tome-blocks-campaign-pack'

const blockRegistry = new BlockRegistry()
const bundleRegistry = new BundleRegistry()

register(blockRegistry, bundleRegistry)

Register renderers once at app startup:

import { registerRenderers } from '@wabbit/tome-blocks-campaign-pack/render/register'

registerRenderers()

@wabbit/tome-crowdfund is optional (peerDependenciesMeta) — the blocks never import it; it is listed for sites that pair the pack with live campaign data.

Bands and layout

Every block is a band that spans the full row it is placed in, so its background runs edge to edge of the page while its content sits on the page's content column. The root is a LaneGrid from @wabbit/tome-blocks-house/components with bleed: inside tome-ui's page grid (or a RenderBlocks wrapper spanning the full row) it subgrids the grid from edge to edge, and anywhere else it lays out the same tracks itself. Under a wrapper that spans only the content column, the band takes the content column, as before.

Every band paints through resolveBackground from @wabbit/tome-blocks-house/fields, so a site that registers or overrides an appearance there restyles these bands too, and text on a band reads the band's companion inks (--blk-accent-ink and the rest) before the theme tokens. A stored background set per theme (perTheme) paints its light and dark values under tome-ui's data-theme. The root carries data-band-tone (light or dark) for tone-conditional styling.

Size tokens

Each token below is read with the value it replaced as its fallback, so a site that sets none renders exactly as before. Set them on the block root (by slug, through your own stylesheet) or higher up.

Mono labels sit on the xxs step, which tome-ui's default scale makes the same size as xs (their step before this release). The wash's second color follows --tome-color-primary, which changes with the theme; set --tome-campaign-night-wash to hold it to one color in both themes.

--tome-campaign-on-accent is read before the band's companion ink because the band sets that companion inline on the block root, where a site stylesheet cannot reach it; set the token wherever you want a fixed label color on the accent fill.

Tier tokens

The same rule: unset, each renders as before. Color and border tokens may use currentColor, which resolves on the element that reads them. A var() inside a token resolves where you set the token, so the band's own inks (--blk-*, set on the block root) are not reachable from a token set higher up; the numeral stroke takes an accent share for that reason.

Stacked (767px or less), Wall cells are separated by a rule under each cell (the wall rule color) instead of the right-hand seam, and the last cell has none. The Wall buttons' color rules carry two classes (.cta .btnSolid, .cta .btnGhost), so a site's :root a { color: inherit } does not repaint them. The hand-note face tokens are shared by Campaign Hero and Campaign Tiers; the accent ink they fall back to is the band's, so a site that wants the plain accent sets --tome-campaign-hand-ink on the block root, where the band's inks resolve.

Entrance reveal (opt-in)

The five blocks can fade their parts in as they scroll into view, when the host asks. The switch is the render context that RenderBlocks and RenderBlock from @wabbit/tome-blocks-core/render already forward to every renderer (the @wabbit/tome-blocks-campaign-pack/server renderers forward it too). Nothing is stored on the block, so there is no schema change, and a render without the key is the block's ordinary markup with no motion: no wrapper, class, attribute, inline style, stylesheet or client component. The reveal is off by default.

import { RenderBlocks } from '@wabbit/tome-blocks-core/render'
import type { CampaignRenderContext } from '@wabbit/tome-blocks-campaign-pack/render'

// The pack's own timing:
const context: CampaignRenderContext = { campaignReveal: true }

// Or match your site's motion; every field is optional:
const tuned: CampaignRenderContext = {
  campaignReveal: { duration: 0.56, stagger: 0.08, ease: 'power3.out', start: 'top 85%', rise: '1.625rem' },
}

<RenderBlocks blocks={layout} components={blockComponents} context={context} />

An invalid value falls back to its default. ease goes to GSAP unchanged, so it must be a name GSAP parses (power3.out, expo.out); a CSS cubic-bezier() string is not one, and GSAP then uses its own default ease.

Render RevealGate from @wabbit/tome-blocks-house/reveal-gate once in the root layout (see that package's README). Pending parts are hidden by opacity only, and only once the gate has marked <html> before first paint, so content shows in full when JavaScript is off, blocked or fails; without the gate nothing is hidden and nothing moves. Under prefers-reduced-motion: reduce nothing is hidden and nothing moves either. The tween moves opacity and translate only, so nothing shifts layout, and when each part settles its inline reveal styles are cleared, so it renders exactly as it does with the reveal off. The motion runs on @wabbit/tome-blocks-house/motion (GSAP, a dependency of that package); the pack needs no @wabbit/tome-motion provider.

Copy the pack does not supply

The pack is not tied to one campaign's wording, so its fields start blank: there are no default terms, section-header labels, count labels, rule line, tally label or caption, and no default tier button text. A block shows only what the editor (or your content mapping) supplies:

To pre-fill new blocks with your own copy, set field defaults in your Payload config or supply the values when you map content to these blocks. The pack's few fixed captions (PLEDGE, DAYS LEFT, the figure captions on campaign-count) are part of the design and stay.

Live campaign figures

Three blocks show campaign figures: campaign-count (all of it), campaign-hero's Night Launch monument, and campaign-close's Monument numeral. Those figures are never typed by an editor. Each block stores a Campaign key (campaignRef, a plain text field: a slug or id), and your site supplies a source that turns that key into live figures when the page renders, on the server, with no client fetch.

What a site provides: one function, getCampaignFigures(campaignRef), returning a CampaignFigures object or null for an unknown campaign. Every field is optional; money is in cents.

Wire it with createHydratedRenderers from @wabbit/tome-blocks-campaign-pack/server, spread after the static renderers so only the three figure blocks are replaced. Call it once at module scope: calls to your source are wrapped in React.cache(), so a hero, a count and a close for the same campaign share one lookup per request.

// src/blocks/campaignComponents.ts (server module graph only)
import { renderers as campaignRenderers } from '@wabbit/tome-blocks-campaign-pack/render/register'
import { createHydratedRenderers, type CampaignFigures } from '@wabbit/tome-blocks-campaign-pack/server'
import { readCampaignTotals } from '@/lib/campaigns' // your own data access

async function getCampaignFigures(campaignRef: string): Promise<CampaignFigures | null> {
  const totals = await readCampaignTotals(campaignRef)
  if (!totals) return null
  return {
    pledgedCents: totals.pledgedCents,
    goalCents: totals.goalCents,
    backers: totals.backerCount,
    daysLeft: totals.daysLeft,
  }
}

export const campaignComponents = {
  ...campaignRenderers,
  ...createHydratedRenderers({ getCampaignFigures }),
}

Pass campaignComponents (through adaptRenderersForPayload if your RenderBlocks spreads block fields) as the components map, as in the install section above. The hydrated renderers are async Server Components, so keep this module out of any 'use client' tree. A source that throws is treated as returning nothing.

What renders without a source (a stock install, a blank Campaign key, or a source that returns null):

A partial source renders only what it supplies: the bar and percent need both pledgedCents and goalCents; "pledged OF goal" falls back to "pledged PLEDGED" without a goal and is omitted without a pledged total; the ledger row closes up to the figures present. A goal of 0 reads 0% (an empty bar, and {percent} fills with 0), since the source did supply it. A caption that uses a {token} with no figure (Rule line, Tally caption) is hidden rather than shown with a gap. A missing figure never renders as a zero or a placeholder, and nothing is announced with aria-live: figures are server-rendered once per request and do not update in the browser. Money is formatted en-US ($18,400); counts (backers, days) print plain (1204).

Previews and the gallery: @wabbit/tome-blocks-campaign-pack/demo fills the same campaignFigures key with clearly fictional figures, so previews render figures through the plain static renderers with no source wired. campaignFigures is not an admin field; on a real page only the @wabbit/tome-blocks-campaign-pack/server wrapper sets it, and it replaces whatever the block carried.

Existing documents: the old typed number fields (pledged, goal, backers, daysLeft, dayNumber, totalDays) stay in the schema so stored values are not lost, but they are never rendered. They are labeled deprecated in the admin, are no longer required, and are hidden on any block that holds no value, so new blocks never offer them. Clear them once a source is wired.

The Running Total

One renderer, RunningTotalLine, draws the Running Total for campaign-count line and campaign-hero portrait (with Show the Running Total on): one filled sentence of live figures, a fill bar and a meta line. line paints no band and does not bleed, so it inherits the surface it sits on (a dark closing band, a lane of a grid). The Ledger Strip is the same figures as cells and gains the same motion.

Tokens (in lineTemplate, lineFallback, barLabel, ruleLine, tallyCaption): {raised} (= {pledged}), {goal}, {count} (= {backers}), {daysLeft}, {percent} (a whole number), {dayNumber}, {totalDays} and {updated} ("Sat, Oct 24" in en-US, from updatedAt). A token with no figure holds the whole line back. Write "gifts" when your source counts gifts; the cell captions (captions) say what the source counts.

Money goes through one formatter, formatMoney(cents, { currency, locale }): no currency is formatUsd, a currency is Intl.NumberFormat with no decimals and the minor-unit exponent from Intl (JPY is not divided by 100). formatMoneyExact keeps cents ($51.50). Pass locale to createHydratedRenderers.

Motion: the markup always holds the final values. A small island (RunningTotalMotion, root [data-running-total][data-tome-motion="self"]) counts each number from 0 to the real figure, never above it, and lets the bar transition to the real fill once, then sets data-filled="true". Reduced motion renders final at load; no script renders final. Put RunningTotalHeadScript (from @wabbit/tome-blocks-campaign-pack/render) in the document head to hold a bar at zero until the island plays it (a 3s CSS animation restores it if the island never runs); without it a Running Total already in view at load keeps its final values and one below the fold resets and plays on entry. Tokens: --campaign-dur-bar (1100ms), --campaign-ease, --campaign-bar-fill, --campaign-bar-track, --campaign-bar-height, --campaign-bar-radius (the Ledger Strip's and Counter Tally's bar read these four too, falling back to their own defaults), --campaign-line-size, --campaign-line-weight, and --campaign-hero-ratio (Portrait's photo, 4 / 5).

campaign-tiers giving-levels renders plain cells (div[data-tier] with data-tier-price, data-tier-title, data-tier-body, data-tier-cta), never the "PLEDGE" word, features or a flag, then an optional note and sampleLabel.

Give form

give-form takes an amount and a cadence and hands off to secure checkout. The block never calls a payment provider and the pack never imports @wabbit/tome-economy: your site supplies three things through @wabbit/tome-blocks-campaign-pack/server, as it supplies campaign figures.

• Prices (getPrices, a PriceFactsSource): the block stores Price ids as text (oneTimePriceRef, required; monthlyPriceRef, optional). The amounts, the currency and the minimum and maximum come from those Prices. createPriceSource({ payload }) is a ready source over economy's prices collection (overrideAccess: false, no user, so only active Prices return).
• The action (giveAction): your 'use server' function, (state: GiveFormState, formData: FormData) => Promise<GiveFormState>. It reads the post with readGiveSubmission(formData, prices), calls economy's checkout action and redirect()s to the provider, or returns an error state the form shows inline.
• The fee rule (feeCover, economy's FeeCoverRule shape): the same rule you give economy. Without it the form offers no fee cover.

// server module graph only
import { createHydratedRenderers, createPriceSource } from '@wabbit/tome-blocks-campaign-pack/server'
import { giveAction } from './actions' // a 'use server' module

export const campaignComponents = createHydratedRenderers({
  getCampaignFigures,
  getPrices: createPriceSource({ payload }),
  giveAction,
  feeCover: { percentBps: 300 },
  locale: 'en-US',
})

In the action, readGiveSubmission(formData, prices) returns a GiveSubmission (cadence, priceRef, amountCents in the Price's minor units, the Price's currency, coverFees, expectedTotalCents, email, campaignRef) or a GiveSubmissionError (isGiveSubmissionError) whose message you can return as the error state. Map economy's GiftAmountOutOfRangeError to amount-out-of-range (outOfRangeMessage words it from the Price's bounds) and GiftTotalChangedError to total-changed.

Opt-in lines (each blank by default, and a form that writes none prints exactly what it did before): amountHint (one line under the amounts, {min} and {max} filled from the one-time Price's bounds, e.g. "Any amount from $5 to $10,000.", and added to the custom field's description); largeGift { note, linkLabel, href } (a line after the over-the-maximum message, {link} marking the link, e.g. "For a larger gift, write to Ruth and she'll set it up with you."); labels.feeTotal and labels.feeTotalMonthly (a visible line over the button while fee cover is ticked, with {total}, {amount} and {fee}); labels.monthlyCharge (a line under the button while Monthly is chosen, with {total} and {day}, today's day of the month as "25th" in English). The island fills the last two after hydration, so the server markup holds them empty. For the no-script path, pass the same larger-gift words to your action's message: outOfRangeMessage(bounds, { reason, contact: largeGiftText(block.largeGift) }) appends them (as text) to the above-maximum message only.

What it never does. No amount chip, no Monthly and no fee cover is ever checked in the server markup; One-time is the only pre-selection. There is no field that could change that, and no decline copy, countdown or social proof. The custom amount sits in the same grid as the chips with the same size and border. The button repeats the total ("Give $51.50", "Give $25 a month") once an amount is chosen, and a visually hidden live region repeats it.

Without script the form posts natively to your action: the radios and the custom field submit, the custom amount winning if both are filled, and the provider's page shows the total before anything is charged. With script, a small island clears the chip when a custom amount is typed (and the reverse), fills {fee} with the computed fee, sends give.expectedTotal so economy can refuse a total that changed, and shows bounds and format errors inline in an aria-live region tied to the field by aria-describedby, using the Price's own minimum and maximum.

States. Live (action and a resolvable one-time Price); absent (no action, or no one-time Price that is active, one-time and allows custom amounts: the block renders nothing); demo (gallery props: an inert form with a visible "Demo" tag and data-demo); error (the action's message, inline). A monthly Price that does not resolve, is not monthly, does not allow custom amounts or is in another currency hides the cadence control. Chips outside the Price's bounds are not shown.

Posted fields (GIVE_FIELDS): give.cadence, give.amount (a chip, major units), give.other (the custom amount as typed), give.coverFees, give.expectedTotal (only from the island), give.email (with Ask for an email), and the hidden give.campaignRef, give.priceRef.oneTime, give.priceRef.monthly. readGiveSubmission never rounds: a third decimal (any decimal for a zero-decimal currency such as JPY), a negative, an empty amount or a non-number is a typed error; grouping separators and a decimal comma are accepted. Bounds are checked by economy on the server from the Price, never only by the form.

Hooks for themes: root form[data-give-form] (data-variant="default", data-block-variant="default", data-give-state="idle|pending|error", data-demo in gallery props), data-give-heading, data-give-intro, fieldset[data-give-cadence], label[data-give-cadence-option][data-cadence="one-time|month"], data-give-monthly-note, a[data-give-manage], fieldset[data-give-amounts], label[data-give-chip] (wrapping a native radio), data-give-chip-note, label[data-give-custom], data-give-currency, label[data-give-fee], data-give-fee-amount, label[data-give-email], button[data-give-submit], p[data-give-total] (aria-live="polite", visually hidden), data-give-reassurance, p[data-give-error] (aria-live="polite"); with the opt-in lines, p[data-give-hint], span[data-give-error-contact] (hidden until the over-the-maximum message) with a[data-give-error-contact-link], p[data-give-fee-total] and p[data-give-charge-note] (aria-live="polite"), each empty until the island fills it. Tokens: --tome-give-gap, --tome-give-target, --tome-give-chip-target, --tome-give-field-radius, --tome-give-field-border, --tome-give-measure.

Membership card

membership-card shows each tier as a card at wallet proportion. A live tier is bound to a recurring Price (interval month or year) by id, through the same getPrices source the give form uses, so the printed amount and period are the Price's own and the card cannot disagree with the charge. A tier whose Price is missing, inactive or one-time is dropped (with a development warning); with no tier left the block renders nothing. The monthly figure ("$2 a month") prints only when monthlyPriceRef resolves to a monthly Price and is never worked out from the yearly one. source: authored prints the editor's priceLabel and periodLabel instead, for dues collected offline.

Pass getPrices to createHydratedRenderers and the card is in the map. There is no popularity copy: no field or default says which tier people choose. One tier may be recommended: a 2px ink border all round (no accent rule, no badge) and a visually hidden "(Recommended)".

The phone picker is CSS only. The block is its own size container. Under 55rem (880px) of container width a segmented control of native radios (a fieldset, legend pickerLabel) shows one card at a time with :has(:checked), opening on the recommended tier, else the first (a view state: each CTA still names its tier and nothing is charged). From 55rem the picker is display: none and the cards sit side by side. A container query cannot read a custom property, so 55rem is fixed in the pack; a theme that needs another threshold overrides the layout inside its own @container rule on [data-membership]. A browser without :has() shows no picker and stacks every card.

Hooks: root div[data-membership] (data-membership-source="live|authored", data-variant="default", data-block-variant="default"), data-membership-heading, fieldset[data-membership-picker], label[data-membership-picker-option], div[data-membership-list] (data-count), article[data-membership-tier] (data-tier-index, 1-based; data-recommended), div[data-membership-face], data-membership-kicker, data-membership-name, data-membership-recommended-label, data-membership-suits, data-membership-price (data-membership-amount, data-membership-period, data-membership-monthly), data-membership-covers / data-membership-not-covers (each with a -label span), a[data-membership-cta]. Tokens: --membership-card-ratio (1.59), --membership-card-radius (14px), --membership-card-max, --membership-card-bg, --membership-card-ink, --membership-card-muted, --membership-card-rule, --membership-gap.

Campaign case

campaign-case is the case for a campaign: the argument in the reading column (rich text body; the block renders nothing without it), with the start margin holding who is accountable and the last update, and the end margin the budget, its source and the terms. The budget lines are typed in whole currency units; the total is computed from the lines, never typed, and formatted in the campaign's currency (the live figures' currency when campaignRef resolves through @wabbit/tome-blocks-campaign-pack/server, else US dollars). When the figures carry a goal and the total differs, a development warning says so; production prints the computed total either way. A note or margin with nothing in it does not render.

From 1024px the prose, start margin and end margin take the page's lanes; below it the two margins fold after the prose into one tinted region, by grid and never by order.

Hooks: root section[data-campaign-case] (data-variant="default", data-block-variant="default"), div[data-case-prose] (data-case-heading), div[data-case-margins] (a display: contents wrapper from 1024px), aside[data-case-marg="start|end"], div[data-case-note] (h3[data-case-note-title]), p[data-case-person], p[data-case-update], dl[data-case-budget] (div[data-case-budget-line], div[data-case-budget-total]), p[data-case-citation], span[data-case-sample][data-compliance-label], p[data-case-terms], a[data-case-link]. Token: --tome-campaign-case-gap.

Public API

Server / client posture

Three files carry a 'use client' directive: src/render/CampaignReveal.client.tsx, the opt-in entrance reveal's island, which renders only while the reveal is on, src/render/RunningTotalMotion.client.tsx, the Running Total's count-up island, and src/render/GiveForm.client.tsx, the give form's island (the action state and the enhancement; its first render is the server markup). Every renderer is a static server-safe component that renders its props (authored copy plus any live figures already on the block), so it works from either a server or a client component tree. The @wabbit/tome-blocks-campaign-pack/server subpath is different: its hydrated renderers are async Server Components that call your campaign source, so import it only from a server module graph. Both render subpaths (@wabbit/tome-blocks-campaign-pack/render/register and the legacy @wabbit/tome-blocks-campaign-pack/render barrel) load under plain Node — each renderer's per-block stylesheet ships precompiled as a JS module — so seed scripts and tests can import them. Keep payload.config.ts on the root entry point (block descriptors + register(), no React): that keeps React out of your config. Between the two render subpaths, prefer @wabbit/tome-blocks-campaign-pack/render/register: it has no import-time side effects.

Ported from the wabbit.com site

Source: the wabbit.com site's src/blocks/{CampaignHero,CampaignCount,CampaignTiers,CampaignTerms,CampaignClose} + src/lib/crowdfund/campaignStats.ts. Every block dropped its Payload campaign/tier relationships, its Local API stats lookups, and (campaign-tiers) its live Stripe checkout call. Links became plain ctaLabel/ctaHref pairs. The stats lookup became the @wabbit/tome-blocks-campaign-pack/server seam: a block stores a plain-text campaignRef, and the site's own getCampaignFigures replaces the source site's database reconciler, so the pack carries no collection or payment dependency. src/lib/campaignStats.ts keeps the pure formatting helpers (formatUsd, fillStatTemplate). Styling is retokenized onto @wabbit/tome-ui/@wabbit/tome-blocks-house tokens — see each render/*.tome-css file's header for its token-mapping table.