Suncel home pageSuncel v1.0
  1. 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

isAdmin

Indicate if you are on the page builder.

pageProps

To access page properties.

onEditProps

To edit properties of the block.

slug: The property slug to edit.

value: The value you want to edit the property with