The schema property

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

Properties

interface IBlockType {
  name: string
  label: string // for the Add menu
  getDefaultProps: () => object
  hideFromAddMenu?: boolean
  sideEditProps?: Array<ISideEditProp | ISideGroup>
  repeaterItems?: IRepeaterItem[]
  newItemMenuOpen?: boolean
  mapExternalDataToProps?: (externalData: Props, brickProps?: Props) => Props
  playgroundLinkUrl?: string
  playgroundLinkLabel?: string
  category?: string
  tags?: string[]
}

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

Properties definition

PropertyDefinition
nameThe unique name for this block type (for example "hero-unit").
labelThe name displayed in the Sidebar when you want to add a new block (for example "Hero Unit").
getDefaultPropsA function returning the default props for new added blocks.
hideFromAddMenuIf 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 />.
sideEditPropsThe 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.
repeaterItemsArray to specify behaviour of the bricks used in the <Repeater> components. See Repeater.
newItemMenuOpenIf 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.
mapExternalDataToPropsFunction 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.
playgroundLinkUrlUrl to link in the Playground, for example to link docs, guidelines, etc.
playgroundLinkLabelText for the link in the Playground, for example to link docs, guidelines, etc.
categoryUsed to categorize bricks. Bricks will be shown grouped by category.
tagsTags are used to search bricks in the Admin interface.

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',
          },
        ],
      },
    },
  ],
}