@orion-studios/payload-blocks

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

Installation

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

// 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

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

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:

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