Blocks

Blocks are used as a container for grouping related fields together within your Page or Entry Content Types. You as the model builder can decide what blocks to create, and what field types each block needs.

You can create as many blocks as you like, and they can be nested inside each other by using a Block Field Type within a Block Field Type.

You can’t add a block as a top level content type, it can only exist within a Page or an Entry. There is a maximum nesting of 4 levels inside the parent block e.g. Block / Page / Entry > Block > Block > Block > Block.

General Block Settings

All Block have a Name and a Handle field. The Handle is auto generated from the name in snake_case and can be edited before the first save. After the blocks initial save - when you click Create, the handle is not editable.

Once you have created your Block, you will be able to add fields of your choice from the Fields list.

A good example of a block would be a Hero Block that contains a heading Field (For your H1 of the page), a text field for the body copy and an image field for the hero image. You could also add a nested cta_button block as an optional block.

Code Examples

JSON

This is an example of the JSON object for a block.

{
  id: 'f_01Hwmrwq8hA0Sn5gNdZH7PvvF3',
  name: 'Example Block',
  type: 'blocks',
  blocks: [{...}],
  handle: 'example_block',
  help_text: null
}

TypeScript

This is an example of a Hero block using Contento Image component and the Link component from Next.js.

export default function Hero({ block }: { block: BlockData }) {

<section>
	<div>
		<h1>{block.fields.heading.text}</h1>
		<p>{block.fields.body.text}</p>
		{block.fields.cta_buttons.blocks[0] &&
		<Link href={block.fields.cta_buttons.blocks[0].button.fields.button_url.text}>
		{block.fields.cta_buttons.blocks[0].button.fields.button_text.text}
		</Link>
	</div>
	<div>
		<Image asset={block.fields.image.assets[0].asset}/>
	</div>
</section>

})