Hero blocks

HeroSimpleBlock, HeroBackgroundBlock, HeroFeatureBlock (slugs heroSimple, heroBackground, heroFeature), with their field arrays (HeroSimpleFields, HeroBackgroundFields, HeroFeatureFields) on @systhemaui/payload/blocks/hero. They carry the same fields and render the same markup as the matching Hero type of the default page template's hero, as standalone blocks.

The default template uses the same fields for its hero variants. The following screenshots show those field groups, rather than standalone blocks registered in a custom picker.

Enlarge screenshot

Enlarge screenshot

Enlarge screenshot

Where it is offeredLink to this section

No default editor offers them; you register the ones you want through customBlocks, with the tiers you choose (see Converter below).

FieldsLink to this section

heroSimpleLink to this section

heroBackgroundLink to this section

heroFeatureLink to this section

Aspect ratioLink to this section

The feature hero has the same aspectRatio control as the Feature block, for the identical reason — .hero-feature-media releases its child's height the same way — so the hero's existing aspectRatio select is now also offered while Hero type is Feature, not just Simple.

Video playbackLink to this section

Simple and Feature heroes with an uploaded video carry the preload control; background heroes take one image-or-video upload, expose no preload control and use metadata. See Video playback and weight.

Rendered outputLink to this section

Renders HeroSimple, HeroBackground or HeroFeature. The title renders as the page's <h1>.

ConverterLink to this section

No default editor offers them, so adding them does not change any existing block picker. Register the ones you want through customBlocks, with the built-in converters from @systhemaui/payload/lexical/convertLexicalNodesToJSX:

import { HeroSimpleBlock, HeroFeatureBlock } from '@systhemaui/payload/blocks'
import {
  heroSimpleConverter,
  heroFeatureConverter,
} from '@systhemaui/payload/lexical/convertLexicalNodesToJSX'

withSysthema(config, {
  customBlocks: [
    { type: 'block', data: HeroSimpleBlock, editor: 'root', converter: heroSimpleConverter },
    { type: 'block', data: HeroFeatureBlock, editor: 'root', converter: heroFeatureConverter },
  ],
})

The title renders as the page's <h1>, so pair a hero block with the template's Hero type: None rather than a second hero. The description is a slot-tier editor, and its blocks are tagged with that tier like any other nested editor. The converters are also built into the renderer, so client-mode live preview shows the blocks without a livePreview.clientSetup registration.

CustomizingLink to this section

Copy the hero block definition before changing its fields. Register the copy through customBlocks with an explicit editor tier and one of the exported hero converters. Keeping the existing slug replaces its converter; a distinct slug creates a separate hero option. The renderer expects the shared hero field names, and its description must remain a serialized slot editor if you reuse it.

Project converters used in client-mode preview also need browser registration through livePreview.clientSetup; see Client mode.

RelatedLink to this section

• Hero components
• Page templates
• Custom blocks