Building Custom Block Types

Blocks are one of the most powerful features in Kide CMS. They let editors build flexible page layouts from predefined content types, while developers maintain full control over the rendering.

Defining block types

Block types are defined in your collection config. Each type has its own set of fields: a hero block might have a heading, body text, and a CTA link, while an FAQ block has a list of question-answer pairs.

Custom Astro components

Create an Astro component in src/components/blocks/ matching the block type name. The BlockRenderer automatically discovers and uses it. If no custom component exists, the built-in generic renderer handles it.

Example: Hero block

A Hero.astro component receives the block's fields as props. You have full control over the markup, styles, and any additional logic like image optimization.

Best practices

• Keep block types focused: one purpose per block

• Use text fields for short content, richText for long-form

• The JSON field with the repeater component works great for lists

• Test your blocks with the preview feature before publishing