Blocks

Block

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

Component - simple

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

Component - advanced

<Block 
  discriminateBy="gallery" 
  label="Gallery" 
  description="" 
  alternate=""
> 
  ...
</Block>

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.

Discriminated blocks

The DiscriminatedBlocks component is a wrapper for a block of content.

Component - simple

<DiscriminatedBlocks> 
  ...
</DiscriminatedBlocks>

Component - advanced

<DiscriminatedBlocks 
  allowBlockTypeChange={true} 
> 
  ...
</DiscriminatedBlocks>

Props

Prop	Description
children	Renders content of the component. Required
allowBlockTypeChange	boolean
size	Size
labelPosition	FormGroupLabelPosition
labelDescription	ReactNode
description	ReactNode The description for the field.
useLabelElement	boolean

getDiscriminatedBlock

The getDiscriminatedBlock function returns a block of content.

const discriminatedBlock = getDiscriminatedBlock(blocks, field)