Creating Blocks

The simplest way to create a new block is with a prompt. Select the "Content" tab and choose "Blocks" from the sidebar. You'll see a grid of blocks used on your site. Let's add a new one by clicking the "Create" button.

Name the block whatever you like and choose a category that seems appropriate. Select "From prompt" from the select menu. Describe the block you want in the Prompt field. Focus on the layout and functionality of your block. Avoid describing intricate design details as those come from the site theme.

You can also import an image and the AI will write markup to create a block for it. The process is the same as creating a block from a prompt but choose "From image" instead. Your image doesn't need to be especially detailed, even a sketch on a napkin will work. The typography and colors in your generated block are driven by the theme not the image. The AI looks at the image and thinks, "I see a large headline" not "I see the font Helvetica at 36 pixels".

Even if you don't write code you can still copy and paste it. Many marketplaces exist with HTML blocks, search "Tailwind CSS Blocks". You can paste the code from one of these blocks into a new block using the "From code" option. The AI will translate the code into Geppetto fields and theme classes. The generated block will match your theme.

After creating a block using one of these methods you will be brought to the block editor. This is the same as dev mode, and you can use the AI assistant to refine your blocks. Getting the look you want is a combination of refining the block and making adjustments to the theme.