Suncel home pageSuncel logoSuncel v1.1
  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, PagePropsType> .

PagePropsType is meant to type the pageProps so it is is only usefull if pageProps is used in the Block optional.

In your component you will be able to access the props you have defined and 3 Block props:

export interface SuncelBlockBaseProps {
  isAdmin?: boolean;
  pageProps?: PagePropsType;
  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

Previous
Next config
Next
Schema