Block

Block

The Block component is used for wrapping fields in BlockRepeater, BlockEditor or DiscriminatedBlocks components.

<Block discriminateBy="gallery" label="Gallery" />

Props

Prop	Description
discriminateBy	OptionallyVariableFieldValue Field to discriminate by. Required
label	ReactNode The label for the field.
description	ReactNode The description for the field.
alternate	ReactNode
children	Renders content of the component.

Block in BlockEditor

Component

<BlockEditor
  field="blocks"
  label="Content"
  sortableBy="order"
  contentField="content"
  referencesField="references"
  referenceDiscriminationField="type"
  blockButtons={[
    {
      discriminateBy: "gallery",
      blueprintIcon: "heat-grid",
      title: "Gallery",
    },
    {
      discriminateBy: "quote",
      blueprintIcon: "citation",
      title: "Quote",
    }
  ]}
>
  <Block discriminateBy="gallery" label="Gallery">
    <ImageFileRepeater
      field="images"
      urlField="image.url"
      label={undefined}
      sortableBy="order"
    />
  </Block>
  <Block discriminateBy="quote" label="Quote">
    <TextAreaField field="content" label="Content" />
    <TextField field="author" label="Author" />
  </Block>
</BlockEditor>

Component preview

Schema

export class BlockEditor {
  blocks = def.oneHasMany(ContentBlock, 'blockEditor')
}

export class ContentBlock {
  order = def.intColumn().notNull()
  type = def.enumColumn(ContentBlockType).notNull()

  content = def.stringColumn()
  blockEditor = def.manyHasOne(BlockEditor, 'blocks')
  references = def.oneHasMany(ContentReference, 'contentPart')
}

export class ContentReference {
  type = def.enumColumn(def.createEnum('gallery')).notNull()
  contentPart = def.manyHasOne(ContentBlock, 'references')
  content = def.stringColumn()
  author = def.stringColumn()
  images = def.oneHasMany(ContentGallery, 'contentReference')
}

export class ContentGallery {
  order = def.intColumn().notNull()
  image = def.manyHasOne(Image).notNull()
  contentReference = def.manyHasOne(ContentReference, 'images').cascadeOnDelete()
}