Samples

The previews on this site, and a site’s Block library page, render from blockSamples:

import { blockSamples } from "@bison-lab/payload-blocks";

blockSamples.showcasePanels; // a ShowcasePanelsBlockData with three panels

blockSamples is one map keyed by blockType, typed per block (BlockSamples) and assignable to Record<BisonBlockType, BisonBlockData>. It comes from the main entry and is React-free, so a global’s field config and a route handler can both read it.

Each sample has realistic copy at the length the layout was designed for (three showcase panels, four process steps, six testimonials) and sets every field its config has at least once, so a preview shows the block’s full range.

Header samples

The header blocks are in the map too. megaMenu renders through MegaMenuBlockRenderer, and its sample fits a config built with megaMenuBlock(megaMenuSampleOptions), the options it was written against. navLink is data only.

Images travel with the sample

No site media exists in a preview, so every upload in a sample is an inline SVG data: URL in the MediaDoc shape, with width and height set. resolveMedia accepts it as-is, and the data: scheme is how an adapter knows what it has: next/image marks a data: src unoptimized by itself. A site that wants the same placeholders for its own blocks builds them with:

import { sampleImage } from "@bison-lab/payload-blocks";

sampleImage({ label: "Panel 1 · 1400 × 1000", width: 1400, height: 1000 });

Structured data

The nap sample sets emitJsonLd: false. The block emits schema.org LocalBusiness by default, and a preview must not put a fictional clinic into a site’s structured data.

Only what the package ships has a sample here. A site’s own blocks supply theirs.