schlechtenburg/docs/creating-blocks/index.md

Creating blocks

After you've been using Schlechtenburg for a short while, you'll probably end up wanting to create your own blocks.

The anatomy of a block

In general, a block is a javascript object that implements the IBlockDefinition<T> interface.

A functional block contains all of the following:

1. A unique name. This will be used to assign JSON data to your specific block. It's good practice to prefix these so you don't run into conflicts with other blocks. Official Schlechtenburg block names are prefixed with sb-.
2. A function that returns a JSON structure representing an "empty" or "default" instance of your block.
3. A component for the edit mode.
4. A component for the view mode.

export default {
  name,
  getDefaultData,
  edit: defineAsyncComponent(() => import('./edit')),
  view: defineAsyncComponent(() => import('./view')),
} as IBlockDefinition<any>;