React Bricks

Side Edit Props

As you saw in Blocks Schema, each block type has a sideEditProps property.

This property contains an array which defines which props the user will be able to modify in the right sidebar. These props typically don't include the props edited by the WYSIWYG components like Text, RichText and Image.


Here is the Typescript interface for each side-edit prop:

interface ISideEditProp {
  name: string
  label: string
  type: SideEditPropType
  validate?: (value: any, props?: Props) => boolean
  show?: (props: Props) => boolean
  rangeOptions?: {
    min: number
    max: number
    step: number
  selectOptions?: {
    options?: IOption[]
    getOptions?: () => IOption[] | Promise<IOption[]>
    display: OptionsDisplay
  imageOptions?: {
    maxWidth: number

Properties definition


The name of the prop passed to the component.


The label displayed in the edit Sidebar.



The Image prop type is useful when you have an image that won't be edited directly in the content, like a background image. In this case you may upload the image in the Sidebar.


Validation function. The value is valid if the function returns true. You can use the value of this prop, or, if you need it, you may access all the props' values using the second argument (which gets an object with all the key-value props).


If this function (which receives an object with all the key-value props) returns true, this editing control is shown in the sidebar

It's useful to conditionally show a prop's control based on another prop (for example show the "rounded" prop for an image only if the image is loaded).


For props of type NUMBER and RANGE, you may to specify the min, max and step values to correctly display the range selector.


For a props of type SELECT, you may specify:

  1. options: the array of options available to the user. Each option has a value (the value passed to the React component) and a label (the label shown to the user in the Sidebar)
  2. getOptions: function to return options as defined above. The function may return an array of options or a Promise which resolves as an array of options. Useful to have dynamic options, for example from an API call. Alternative to options
  3. display: one of SELECT (drop down select), RADIO or COLOR (a colored square for each color is shown)

For props of type IMAGE, you may to specify the maxWidth value, so that the optimization algorithm knows that the max width of the image to create is 2x this maxWidth (for retina displays).

Usage example

sideEditProps: [
    name: 'backgroundColor',
    label: 'Background',
    type: types.SideEditPropType.Select,
    selectOptions: {
      display: types.OptionsDisplay.Color,
      options: [
        { value: '#fff', label: 'White' },
        { value: '#f7fafc', label: 'Light Gray' },
    name: 'padding',
    label: 'Padding',
    type: types.BlockPropType.Number,
    rangeOptions: {
      min: 1,
      max: 10,
      step: 1
    validate: value => parseInt(value, 10) < 10 ? true : false,