Blocks > 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.
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: [],
},
};
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.
|