Link it to Your Model

Now we've created the structure for our blocks, we need to update the schema with knowledge of each section.

Update the Schema

1. Navigate back to our tina/config.ts file.

2. Replace the old schema with a new object type field to unlock the power of our templates 💪

import { amazingTitleBlock } from "@/app/amazing-header/amazing-header.template";
import { beautifulImageBlock } from "@/app/beautiful-image/beautiful-image.template";
import { incredibleBodyBlock } from "@/app/incredible-body/incredible-body";
// at the top of your file ⤴️


//...
collections: [
      {
        name: "my_first_collection",
        label: "My first collection",
        path: "content/first",
        fields: [
          {
            type: "object", // <--- oooohhh, fancy.
            name: "blocks",
            label: "Blocks",
            list: true,
            templates: [amazingTitleBlock, beautifulImageBlock, incredibleBodyBlock], // Templates for days!
          }
        ],
        ui: {
          router: ({ document }) => {
            if (document._sys.filename == "Hello-World") {
              return "/";
            }
          },
        },
      }
    ],

We have changed the schema of our my_first_collection object, but the Hello-World.md file is still using the old schema. Be aware that you can easily break your page/site if you don't update the content to match schema changes.

Fixing the Content Syntax

1. We'll need to manually open Hello-World.md and delete the contents of that file.

Test it Out

1. To help us build out the React component changes, let's add some new content to our Hello-World.md file by opening up the Visual Editor (http://localhost:3000/admin/index.html and navigating to our my_first_collection list, and edit the Hello-World content through the editor.)

Notice how the Visual Editor now has a field called Blocks. This is our fancy object field we declared in our tina/config.ts file. See how it gives us a magical + button. Click it!

1. Add an amazing title, a beautiful image, and an incredible body!
2. Examine the Hello-World.md file in your IDE. You'll see the shape of it has changed, and our templates/content are now all stored in front-matter.

TinaCMS can be configured to save content to other formats, such as JSON, which is great for this kind of data.