The Blocks field represents a list of items, similar to the Group List field, but allows each entity in the list to have a unique shape.

For an in-depth explanation of the Blocks field, read our "What are Blocks?" blog post. To see a real-world example of Blocks in use, check out the Tina Grande Starter.

In the gif above, you see a list of Blocks: Title, Image, and Content. The form for this field could be configured like this:

const PageForm = {
  label: 'Page',
  fields: [
    {
      label: 'Page Sections',
      name: 'rawJson.blocks',
      component: 'blocks',
      templates: {
        'title-block': TitleBlock,
        'image-block': ImageBlock,
        'content-block': ContentBlock,
      },
    },
  ],
}

/*
 **  Block template definition for the content block
 **/
export const ContentBlock = {
  label: 'Content',
  key: 'content-block',
  defaultItem: {
    content: '',
  },
  fields: [{ name: 'content', label: 'Content', component: 'textarea' }],
}

The source data for the ContentBlock might look like the example below. When new blocks are added, additional JSON objects will be added to the blocks array:

{
  "blocks": [
    {
      "content": "**Billions upon billions** are creatures of the cosmos Orion's sword cosmic fugue at the edge of forever science?",
      "_template": "content-block"
    }
  ]
}

Blocks Field Options

import { Field } from '@tinacms/core'

interface BlocksConfig {
  name: string
  component: 'blocks'
  label?: string
  description?: string
  templates: {
    [key: string]: BlockTemplate
  }
}

Block Template Options

interface BlockTemplate {
  label: string
  key: string
  fields: Field[]
  defaultItem?: object | (() => object)
  itemProps?: (item: object) => {
    key?: string
    label?: string
  }
}

This interfaces only shows the keys unique to the blocks field. Visit the Field Config docs for a complete list of options.