Creating Custom Blocks
Add a concise value statement that captures reader interest and previews content value. Focus on benefits while keeping it under two lines. Align with your blog categories.
## Block Architecture
Each block consists of two parts:
1. **Payload Config** (apps/web/src/payload/blocks/*.config.ts) - Defines CMS fields
2. **React Component** (packages/blocks/src/*/) - Renders the frontend
## Creating a New Block
### Step 1: Create Payload Configuration
Define your block schema in a new config file:
```typescript
// apps/web/src/payload/blocks/MyBlock.config.ts
import { Block } from "payload"
export const MyBlock: Block = {
slug: "myblock",
fields: [
{ name: "title", type: "text", required: true },
{ name: "description", type: "textarea" }
]
}
```
### Step 2: Create React Component
Build the frontend component:
```tsx
// packages/blocks/src/MyBlock/index.tsx
export function MyBlock({ title, description }) {
return (
<div>
<h2>{title}</h2>
<p>{description}</p>
</div>
)
}
```
### Step 3: Register Block
Add to shared blocks array and BlockRenderer mapping.