npm package: @orion-studios/payload-blocks
Description: Reusable Payload CMS block definitions and admin components
Author: Orion Studios
Latest version: 0.1.2

# @orion-studios/payload-blocks

Reusable Payload CMS block definitions and admin components for building content-rich websites.

## Installation

```bash
npm install @orion-studios/payload-blocks
```

## Features

- **9 Production-Ready Blocks**: Hero, RichText, Media, FeatureGrid, Testimonials, FAQ, CTA, FormEmbed, BookingEmbed
- **Admin UI Components**: Custom block labels and controls
- **Section Presets**: Pre-configured block combinations for common page sections
- **Template Starters**: Complete page layouts for contact, landing, services pages
- **TypeScript Support**: Full type definitions included

## Usage

### Quick Start

```typescript
// src/collections/Pages.ts
import { CollectionConfig } from 'payload'
import { defaultPageLayoutBlocks } from '@orion-studios/payload-blocks'

export const Pages: CollectionConfig = {
  slug: 'pages',
  fields: [
    {
      name: 'title',
      type: 'text',
      required: true,
    },
    {
      name: 'layout',
      type: 'blocks',
      blocks: defaultPageLayoutBlocks, // All 9 blocks ready to use
    },
  ],
}
```

### Using Individual Blocks

```typescript
import {
  HeroBlock,
  CtaBlock,
  FaqBlock,
} from '@orion-studios/payload-blocks'

export const Pages: CollectionConfig = {
  slug: 'pages',
  fields: [
    {
      name: 'layout',
      type: 'blocks',
      blocks: [HeroBlock, CtaBlock, FaqBlock], // Pick only what you need
    },
  ],
}
```

### Using Presets

```typescript
import {
  sectionPresets,
  templateStarterPresets,
  clonePresetBlocks,
} from '@orion-studios/payload-blocks'

// Section presets for common patterns
console.log(sectionPresets)
// [
//   { id: 'hero-conversion', title: 'Hero + Conversion CTA', blocks: [...] },
//   { id: 'services-grid', title: 'Services Grid', blocks: [...] },
//   { id: 'social-proof', title: 'Testimonials + FAQ', blocks: [...] },
//   { id: 'lead-capture', title: 'Lead Capture', blocks: [...] }
// ]

// Template starters for entire pages
console.log(Object.keys(templateStarterPresets))
// ['contact', 'landing', 'services', 'standard']

// Clone preset blocks for customization
const myBlocks = clonePresetBlocks(templateStarterPresets.landing)
```

## Available Blocks

### 1. Hero Block
Large hero section with headline, subheadline, CTA buttons, and optional background image.

### 2. Rich Text Block
Full-featured rich text editor powered by Lexical.

### 3. Media Block
Image/video display with caption support.

### 4. Feature Grid Block
Grid layout for showcasing features, services, or benefits. Supports two variants: cards and highlights.

### 5. Testimonials Block
Customer testimonials with quotes, names, and locations.

### 6. FAQ Block
Frequently asked questions in an accordion format.

### 7. CTA Block
Call-to-action section with headline, description, and button.

### 8. Form Embed Block
Embed form components (customize for your needs).

### 9. Booking Embed Block
Embed booking/scheduling components.

## Admin Components

The package includes custom admin UI components that enhance the Payload admin experience:

```typescript
import { BuilderBlockLabel } from '@orion-studios/payload-blocks'

// Used automatically with defaultPageLayoutBlocks
// Provides better visual labels for blocks in the admin panel
```

## License

MIT © Orion Studios