Skip to main content
The block library is the core of the YWCC Capstone page-building system. Content editors compose every page in Sanity Studio by stacking blocks — no code required. Developers add new blocks without touching any existing code.

​
What is a block?

A block is a self-contained section of a page: a hero, a feature grid, a contact form, a stats row. Each block:
  • Has its own Sanity schema (the fields editors fill in)
  • Has its own Astro component (the rendered output)
  • Receives its data as flat spread props — no wrapper objects
  • Is controlled by the block registry, which maps _type strings to components
Pages hold a flat array of blocks. There are no nested blocks.

​
Two categories of blocks

Custom blocks

22 blocks in blocks/custom/. Built for the YWCC Capstone program with business logic, Sanity document references, and Portable Text. Fully CMS-connected.

Template blocks

102 variants in blocks/. Pre-built fulldev/ui design variants installed via the shadcn CLI. Sanity wiring is in progress (Stories 2.4–2.8).

​
Custom blocks

These 22 blocks live in astro-app/src/components/blocks/custom/ and have complete Sanity schema + GROQ projections:

​
Template blocks

102 pre-built design variants across 12 categories, installed via npx shadcn@latest add @fulldev/{name}:
Template blocks have Storybook stories with demo data. Connecting them to Sanity follows the adapter pattern described in the wiring guide.

​
How blocks compose into pages

A Sanity page document holds a blocks[] array. At build time, Astro fetches the page with a GROQ query that projects each block’s fields into flat props. BlockRenderer iterates the array, looks up each block’s component in the registry by _type, and renders it: BlockWrapper handles the layout context shared by every block — background color, vertical spacing, and max-width — using three Sanity-controlled fields present on every block schema: backgroundVariant, spacing, and maxWidth.

​
Next steps

Block architecture

The flat-props interface pattern, filename–type mapping, and auto-discovery mechanics.

Block registry

The full block-registry.ts source and how BlockRenderer dispatches to components.

Adding a custom block

Step-by-step guide for building a new CMS-connected block.

Wiring a template block

Connect an existing fulldev/ui template to Sanity without touching the .astro file.