1. Create an app/amazing-header/ folder

2. Add an amazing-header.template.tsx file in that folder

3. Add the following code to the amazing-header.template.tsx file:

The name of the file is arbitrary, but the Tina team use (and recommend) the .template.tsx suffix for clarity.

import { Template } from "tinacms";

export const amazingTitleBlock: Template = {
    name: 'titleBlock',
    label: 'Amazing title',
    fields: [
      {
        type: 'string',
        label: 'Title',
        name: 'title',
      }
    ],
  }

Our block is pretty basic right now - we only have 1 field. But you can see how, in a real-world application, defining many fields in a block would be super useful!

Think of a Hero banner, which would want a background image, a CTA, and perhaps even a button link.

4. Now repeat this for the beautiful image and the incredible body!

You should end up with something like this:

src/
├── app/
│   ├── amazing-header/
│   │   ├── amazing-header.template.tsx
│   ├── beautiful-image/
│   │   ├── beautiful-image.template.tsx
│   ├── incredible-body/
│   │   ├── incredible-body.template.tsx
│   ├── ...etc.