Oak Flats UI Primitives Catalogue

Reusable editorial blocks — gallery, code, table, embed, quote, poll, sandbox, timeline, divider, video, callout, checklist, accordion, CTA. Every block shares the same render / edit / error mode triplet and emits typed BlockData<T> envelopes. Visual reference only — nothing wired to real storage.

Production answer

Block-editor primitives is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Block-editor primitives states

Generative search brief

Block-editor primitives: Reusable editorial blocks — gallery, code, table, embed, quote, poll, sandbox, timeline, divider, video, callout, checklist, accordion, CTA. Every block shares the same render / edit / error mode triplet and emits typed BlockData<T> envelopes. Visual reference only — nothing wired to real storage.

Visual reference only — block hosts are not wired

Primitive 01

Gallery

Workshop time-lapse + before/after exhaust + dyno bay shots — grid, carousel, masonry layouts.

Primitive 02

Code block

Language picker + syntax theme + copy + line numbers. Bash fitment check + parts-API JSON.

Primitive 03

Table

Dyno comparison grid — sortable columns, resize, cell formatting, AUD currency formatting.

Primitive 04

Embed

YouTube / Vimeo / CodePen / Twitter embed with aspect-ratio picker. Workshop walk-around demo.

Primitive 05

Quote

Pull-quote with citation, author, optional headshot — Mick Davis 4WD testimonial baked in.

Primitive 06

Poll

Multi-choice poll with live results bars — Manta / Pacemaker / XForce / Genie supplier vote.

Primitive 07

Code sandbox

Live HTML / CSS / JS playground with preview pane. Booking-widget mock loaded.

Primitive 08

Timeline

Vertical event timeline (year / month / event) — half a century on the Oak Flats workshop floor.

Primitive 09

Divider

Section divider variants — line, dot, icon, wave, zigzag — with optional bay-change label.

Primitive 10

Video

Self-hosted workshop video with poster + chapters + captions toggle. Dyno walk-through baked in.

Primitive 11

Callout

Info / warning / tip / danger callout with icon + dismissible flag — DPF cleaning notice.

Primitive 12

Checklist

Interactive todo with checkbox + completion meter — pre-service walk-around.

Primitive 13

Accordion

Collapsible Q&A block with expand-all / collapse-all controls — workshop FAQ.

Primitive 14

Call to action

Heading + body + button + background — Bay 4 dyno booking card with accent tone picker.

Composition

Full document

Composed long-form post mixing every block — masthead, gallery, table, quote, poll, callout, CTA.