24 lines
901 B
Markdown
24 lines
901 B
Markdown
# 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.
|
|
|
|
```ts
|
|
export default {
|
|
name,
|
|
getDefaultData,
|
|
edit: defineAsyncComponent(() => import('./edit')),
|
|
view: defineAsyncComponent(() => import('./view')),
|
|
} as IBlockDefinition<any>;
|
|
```
|