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.