The schema property

Each brick should have a schema static property, which has the following TypeScript interface:

Properties

interface IBlockType<T = Props> {
  name: string
  label: string
  getDefaultProps?: () => Partial<T>
  hideFromAddMenu?: boolean
  sideEditProps?: Array<ISideEditProp<T> | ISideGroup<T>>
  repeaterItems?: IRepeaterItem[]
  newItemMenuOpen?: boolean
  groupByRepeater?: boolean
  getExternalData?: (
    page: Page,
    brickProps?: T,
    args?: any
  ) => Promise<Partial<T>>
  mapExternalDataToProps?: (externalData: Props, brickProps?: T) => Partial<T>
  playgroundLinkUrl?: string
  playgroundLinkLabel?: string
  theme?: string
  category?: string
  tags?: string[]
  previewImageUrl?: string
  previewIcon?: React.ReactElement
  stories?: BrickStory<Partial<T>>[]
}

The ISideEditProp / ISideGroup interface is explained in the Side edit props page.
The Repeater interface is explained in the Repeater page.

Properties definition

Property	Definition
name	The unique name for this block type (for example "hero-unit"). "RB_PAGE_EMBED is a reserved word and should be used only for a "page/entity embed" brick.
label	The name displayed in the Sidebar when you want to add a new block (for example "Hero Unit").
getDefaultProps	A function returning the default props for new added blocks.
hideFromAddMenu	If true, the component isn't shown in the list of components available in the "add block" menu. For example, you may want to hide a block that can be used only inside of a <Repeater />.
sideEditProps	The array of objects representing the props the user will be able to modify in the right Sidebar, with their display properties. See Side Edit Props.
repeaterItems	Array to specify behaviour of the bricks used in the <Repeater> components. See Repeater.
newItemMenuOpen	If true the "Add new..." accordion menu is open by default; if false it is closed by default; otherwise, by default it is open when the number of repeaterItems is less than or equal to 4 and closed otherwise.
groupByRepeater	false by default. If set to true the items that can be repeated are grouped by repeater (if you set the positionLabel the title of each collapsible section is the positionLabel).
getExternalData	Function to fetch external data. It has the page, the brick's props and a third argument as arguments and should return (async) an object which is merged to the brick's props. See External content.
mapExternalDataToProps	Function that gets as first argument the external data (from the getExternalData function specified on the pageType) and as second argument the props on this brick. It should return the new props for this brick. See External content.
playgroundLinkUrl	Url to link in the Playground, for example to link docs, guidelines, etc.
playgroundLinkLabel	Text for the link in the Playground, for example to link docs, guidelines, etc.
category	Used to categorize bricks. Bricks will be shown grouped by category.
tags	Tags are used to search bricks in the Admin interface.
previewImageUrl	Image URL to be used as preview image for this brick. You can create easily a "screenshot image" of a brick from the Playground. It is shown only if you set the enablePreviewImage flag to true in the React Bricks configuration.
stories	You may define default stories on a brick. Editors will be able to add their own stories saved on the React Bricks APIs. This feature is available only for "Pro" and upper plans. See Stories and the BrickStory type

Usage example

HeroUnit.schema = {
  name: 'hero-unit',
  label: 'Hero Unit',
  category: 'headings', // to organize bricks by category
  tags: ['hero', 'jumbotron', 'heading'],
  // Defaults when a new brick is added
  getDefaultProps: () => ({
    background: { color: '#fff', className: 'bg-white' },
    title: 'Thick as a React Brick',
  }),
  // Sidebar Edit props
  sideEditProps: [
    {
      name: 'background',
      label: 'Background',
      type: types.SideEditPropType.Select,
      selectOptions: {
        display: types.OptionsDisplay.Color,
        options: [
          // The color is the unique mandatory property for a select with display "color"
          { value: { color: '#fff', className: 'bg-white' }, label: 'White' },
          {
            value: { color: '#f3f4f6', className: 'bg-gray-100' },
            label: 'Gray',
          },
        ],
      },
    },
  ],
}