Process steps

Process steps · sample rowDesktopTabletPhoneOpen ↗

Renders ProcessStepsBlock from @bison-lab/ui. Steps are numbered by position and reordered by drag and drop; there is deliberately no per-step number override. Three to six steps, opening with three. In the admin the steps are edited with the kit items list (ITEMS_FIELD): each closed row reads as its title with its image beside it and “Step 2” by position, so the numbers follow a reorder. Delete is withheld at three steps, and Add at six.

Auto-advance is always off for visitors who prefer reduced motion, whatever the field says.

Usage

payload.config.ts / collections

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

// In the collection's `blocks` array:
ProcessStepsBlock

blocks/registry.ts

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

// In the site's registry:
processSteps: ProcessStepsBlockRenderer,

Fields

Field	Type	Notes
items *	array	3 to 6 rows. Opens with 3 empty rows; the admin field will not remove below that.
items[].title *	text
items[].description *	textarea
items[].image *	upload	From the media collection.
autoAdvance	checkbox	Advance on a timer. Always off for visitors who prefer reduced motion. Default true.
autoAdvanceDuration	number	Milliseconds each step holds before advancing. At least 1000. Default 6000.
pauseOnHover	checkbox	Default true.
defaultActiveIndex	number	Which step is active on load, counting from 0. At least 0. Default 0.
settings	group	Labelled “Block Settings”.
settings.background	select	Labelled “Background”. The surface this section sits on. Page is the plain page background. One of page, card, muted, color, gradient. Default "page".
settings.backgroundColor	text	Labelled “Color”.
settings.backgroundColorDark	text	Labelled “Dark mode color”.
settings.gradientTo	text	Labelled “Gradient end”.
settings.gradientToDark	text	Labelled “Dark mode gradient end”.
settings.gradientDirection	text	Labelled “Gradient direction”.
settings.spacing	select	Labelled “Spacing”. The air above and below this section. Default is the block's own padding; Compact and Spacious replace it. This is the band, not the site-wide spacing in Theme → Appearance. One of compact, default, spacious. Default "default".
settings.anchor	text	Labelled “Anchor”. In-page links can target this section. Leave blank for none.
settings.hidden	checkbox	Labelled “Hidden”. The section stays in the editor and is left off the page. Default false.

* required.