Going Further

You've built and launched a site that looks like it's yours. You can stop here if you're satisfied, but there's more.

So far you've been using the blocks I've made. If you want to add animation, interactivity, or a unique layout, you need to build your own blocks.

Building blocks is the best part of Geppetto. The live preview and AI assistant enable an iterative workflow focused on refinement. You prompt and the AI gets it close, then you refine in the code editor.

All of the fields we've been editing in the sidebar so far feed variables inside of a block template. A variable is just a formatted version of the field name inside a couple of curly braces.

<h1>{{headline}}</h1>

The value you type into the field replaces the {{headline}} bit in your template and updates your website. You've been watching this happen in the preview every time you edit a field.

Each time you add a block to a page you get a new copy of the block's data, but every copy of the block uses the same template and sidebar form. This means if you update a block's code or sidebar you update it on every page it's used on. This is good as long as you plan for it.

If you understand this you know how Geppetto blocks work.

Who is this for?

Building custom blocks is for people who really care about the details. It's for developers who want complete control over their code. It's for designers who don't want to compromise even one pixel.

You can absolutely write blocks from scratch. I do it all the time, I like it. But you don't need to know how to code. You can let the AI create the block and then refine it together. You'll get explanations along the way and will find yourself "just changing it" before you know it.

If you're working with others the blocks you create are for them as well. Your work in the sidebar is about providing a set of fields that allows them to update the block content without breaking the block design. Publishers and Contributors on team plans don't have access to the block editor, for them Geppetto is a CMS.

What's ahead

We're going to talk about the 12 field types and when to use which one. You'll build and style your first template and we'll learn how to add animation and interactivity to it.

We'll wrap up by talking about posts. They allow you to add real data structure to your site. Blogs, event calendars and case studies are all examples of posts.

It's something everyone can learn, and it's not weeks. It's a couple of focused sessions.

Thanks — your message has been sent.