React Bricks

The blocks schema


The blocks schema defines the set of "bricks" that can be used in pages.

It is an array of objects, one for each block type.
In our starter examples you will create your block types in the /react-bricks/bricks folder.

API

Each object has the following shape (I think it is clear even if you don't use Typescript):

interface IBlockType {
  name: string
  label: string
  superType: BlockSuperType
  render: (props: any) => React.ReactElement
  getDefaultProps: () => object
  hideFromAddMenu?: boolean
  sideEditProps?: ISideEditProp[]
  textEditProps?: string[]
  itemsType?: string
  addItemText?: string
  removeItemText?: string
}

Properties definition

name

The unique name for this block type (for example "heading").

label

The name displayed in the Sidebar when you want to add a new block (for example "Heading")

superType

SINGLE or REPEATER

See Nested blocks »

render

The render function used by the ContentEditor to render this block type.

The returned JSX may also contain the React Bricks WYSIWYG components: Text, RichText and Image.

The render function receives as arguments:

getDefaultProps

A function returning the default props for new 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 use only inside a repeater block.

sideEditProps

The array of the objects representing the props the user will be able to modify in the right Sidebar, with their display properties.

See Side Edit Props definition »

textEditProps

Array of strings, with the names of the props edited via WYSIWYG text components (Text or RichText). This prop is needed now, but it will likely be deprecated in coming versions of React Bricks.

itemsType

The type of the children items (for a repeater component)

addItemText

the text for the "Add item" button (for a repeater component)

removeItemText

the text for the "Remove item" button (for a repeater component)

Is the block in edit mode?

If you need to do conditionally render based on the fact that the brick is in edit mode (inside the admin dashboard) or view mode (frontend site), you may use the AdminContext's prop isAdmin

Usage example

const schema = {
  name: BlockNames.HeroUnit,
  label: 'Hero Unit',
  superType: types.BlockSuperType.Single,
  render: props => <HeroUnit {...props} />,
  getDefaultProps: () => ({
    padding: 'BIG',
    title: Plain.deserialize('We develop beautiful web applications'),
    text: Plain.deserialize(
      "We are a hi-tech web development company committed to deliver great products on time. We love to understand our customers' needs and exceed expectations."
    ),
  }),
  sideEditProps: [
    {
      name: 'padding',
      label: 'Padding',
      type: types.BlockPropType.Select,
      selectOptions: {
        display: types.OptionsDisplay.Select,
        options: [
          { value: 'NO', label: 'No padding' },
          { value: 'SMALL', label: 'Small padding' },
          { value: 'BIG', label: 'Big padding' },
        ],
      },
    },
  ],
  textEditProps: ['title', 'text'],
}

The padding prop value is used by the HeroUnit component to apply the correct CSS class.