28 lines
1 KiB
Markdown
28 lines
1 KiB
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>;
|
|
```
|
|
|
|
## Go by example
|
|
|
|
As Schlechtenburg is still in active development, it's good to check out the official blocks to see what they look like.
|