Hero blocks for Payload CMS

Install the pack

npm install @wabbit/tome-blocks-marketing-starter

Load the design tokens

One line in your global CSS. Without it the blocks render unstyled.

@import '@wabbit/tome-blocks-core/styles.css';

Add the block to a field

Put it in your Pages collection's blocks field, next to the blocks you already have. Run payload generate:types afterwards so your generated types know about the new block.

import { highImpactHeroBlock } from '@wabbit/tome-blocks-marketing-starter'

// in your Pages collection:
{
  name: 'layout',
  type: 'blocks',
  blocks: [...existingBlocks, highImpactHeroBlock.block()],
}

Render it on the Tome grid

import { renderers } from '@wabbit/tome-blocks-marketing-starter/render/register'
import { adaptRenderersForPayload, RenderBlocks } from '@wabbit/tome-blocks-core/render'
import gridStyles from '@wabbit/tome-ui/grid'

const blockComponents = {
  ...yourExistingComponents,
  ...adaptRenderersForPayload(renderers),
}

<RenderBlocks
  blocks={page.layout}
  components={blockComponents}
  gridClassName={gridStyles.grid}
/>