{
  "slug": "blocks",
  "title": "Blocks",
  "description": "Build content-rich pages with reusable block components — hero, features, CTA, and custom blocks.",
  "category": "guides",
  "order": 1,
  "locale": "en",
  "translationGroup": "32325b33-fced-4ff1-9873-c545bf4250ab",
  "helpCardId": null,
  "content": "## What are blocks?\n\nBlocks are reusable content sections that editors can add, remove, and reorder. Each block type has its own fields and renders differently on the frontend.\n\n## Defining blocks\n\n```typescript\nimport { defineConfig, defineBlock, defineCollection } from '@webhouse/cms';\n\nexport default defineConfig({\n  blocks: [\n    defineBlock({\n      name: 'hero',\n      label: 'Hero Section',\n      fields: [\n        { name: 'tagline', type: 'text', required: true },\n        { name: 'description', type: 'textarea' },\n        { name: 'image', type: 'image' },\n        { name: 'ctas', type: 'array', fields: [\n          { name: 'label', type: 'text' },\n          { name: 'href', type: 'text' },\n        ]},\n      ],\n    }),\n    defineBlock({\n      name: 'features',\n      label: 'Features Grid',\n      fields: [\n        { name: 'title', type: 'text' },\n        { name: 'items', type: 'array', fields: [\n          { name: 'icon', type: 'text' },\n          { name: 'title', type: 'text' },\n          { name: 'description', type: 'textarea' },\n        ]},\n      ],\n    }),\n  ],\n  collections: [\n    defineCollection({\n      name: 'pages',\n      fields: [\n        { name: 'title', type: 'text', required: true },\n        { name: 'sections', type: 'blocks', blocks: ['hero', 'features'] },\n      ],\n    }),\n  ],\n});\n```\n\n## How blocks are stored\n\nEach block is an object with a `_block` discriminator field:\n\n```json\n{\n  \"sections\": [\n    {\n      \"_block\": \"hero\",\n      \"tagline\": \"Build faster with AI\",\n      \"description\": \"The CMS that writes content for you.\"\n    },\n    {\n      \"_block\": \"features\",\n      \"title\": \"Why choose us\",\n      \"items\": [\n        { \"icon\": \"⚡\", \"title\": \"Fast\", \"description\": \"Sub-second builds\" }\n      ]\n    }\n  ]\n}\n```\n\n## Rendering blocks in Next.js\n\n```typescript\nfunction BlockRenderer({ block }: { block: any }) {\n  switch (block._block) {\n    case 'hero':\n      return (\n        <section>\n          <h1>{block.tagline}</h1>\n          <p>{block.description}</p>\n        </section>\n      );\n    case 'features':\n      return (\n        <section>\n          <h2>{block.title}</h2>\n          <div className=\"grid grid-cols-3 gap-4\">\n            {block.items?.map((item: any, i: number) => (\n              <div key={i}>\n                <span>{item.icon}</span>\n                <h3>{item.title}</h3>\n                <p>{item.description}</p>\n              </div>\n            ))}\n          </div>\n        </section>\n      );\n    default:\n      return null;\n  }\n}\n```",
  "excerpt": "What are blocks?\n\nBlocks are reusable content sections that editors can add, remove, and reorder. Each block type has its own fields and renders differently on the frontend.\n\n Defining blocks\n\ntypescript\nimport { defineConfig, defineBlock, defineCollection } from '@webhouse/cms';\n\nexport default def",
  "seo": {
    "metaTitle": "Blocks — webhouse.app Docs",
    "metaDescription": "Build content-rich pages with reusable block components — hero, features, CTA, and custom blocks.",
    "keywords": [
      "webhouse",
      "cms",
      "documentation",
      "guides"
    ]
  },
  "createdAt": "2026-03-29T21:41:59.068Z",
  "updatedAt": "2026-03-29T21:41:59.068Z"
}