Register a 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

Type

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[];
}

Example

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",
          },
          ...
        ],
      },
    ]
      ...
  },
];

Register in the context

Once your menu block is defined, it needs to be added to the menuBlocks attribute of the SuncelContext.

Example:

// 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;

Custom schema

Overview