Blocks > Register block
Once your block is created, you must register it to be accessible in the page builder.
To register it, add the component to your Block menu list.
Menu blocks is the list of all your Blocks. It is used to register your Blocks into Suncel for them to appear in the Page builder.
The blocks can be arranged in 3 levels:
Category
Blocks variants
Block
The name, description, and image of the block can be defined
interface BlockVariant {
image?: string | JSX.Element; // url of the image or a svg
name: string; // The name of the component
component: any; // The component to register
description?: string; // The description of the component
}
interface BlockMenu {
name: string;
variants: BlockVariant[];
}
interface MenuBlockSchema {
category: string;
blocks: BlockMenu[];
}
import { MenuBlockSchema } from "@suncel/nextjs";
export const menuBlocks: MenuBlockSchema[] = [
{
category: "Blocks",
blocks: [
{
name: "Hero",
variants: [
{
image: "https://assets.suncel.io/61bf5e233c962a862faf209f/hero_comp.png",
component: Hero,
name: "Hero",
description: "Hero description",
},
...
],
},
]
...
},
];
Once your menu block is defined, it needs to be added to the menuBlocks
attribute of the SuncelContext.
// pages/_app.tsx file
import "../styles/globals.css";
import type { AppProps } from "next/app";
import { SuncelContext } from "@suncel/nextjs";
import { menuBlocks } from "@/suncel/menuBlocks";
function MyApp({ Component, pageProps }: AppProps) {
return (
<SuncelContext menuBlocks={menuBlocks}>
<Component {...pageProps} />
</SuncelContext>
);
}
export default MyApp;