- Create block
Blocks > Create a block
Create a Block
A Block is a content element that can be added to the page builder.
It is created by the developer and can be used and edited by the Editor to create a page.
What is a Block ?
A Block is just a React Component with two specificities:
A schema defines its basic information and overloads the component with additional editing settings.
The Suncel Builder component : allows editing the component in real-time in the page builder.
Then, the block needs to be registered into the page builder to be used in the page builder.
import React from "react";
import { SuncelBlock } from "@suncel/nextjs";
import { Text } from "@suncel/nextjs/components";
type BlockNameProps = {
text: string;
};
// Simple React component
export const BlockName: SuncelBlock<BlockNameProps> = ({ text }) => {
return (
<div>
{/* Text component form Suncel Editing Component */}
<Text slug='text' value={text} />
</div>
);
};
// Suncel Schema
BlockName.suncel = {
slug: "BlockName",
displayName: "BlockName",
defaultProps: {
text: "New Block",
},
editor: {
settings: [],
},
};Properties
A Block type is SuncelBlock<YOUR_BLOCK_PROPS> .
In your component you will be able to access the props you have defined and 3 Block props:
export interface SuncelBlockBaseProps {
isAdmin?: boolean;
pageProps?: Record<string, any>;
onEditProps?: (slug: string, value: any) => void;
}Name | Description |
|---|---|
| Indicate if you are on the page builder. |
| To access page properties. |
| To edit properties of the block.
|