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.

API

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

name

The name of the prop passed to the component.

label

The label displayed in the edit Sidebar.

type

One of TEXT, NUMBER, DATE, RANGE, BOOLEAN, SELECT, IMAGE

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.

validate

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).

show

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).

rangeOptions

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

selectOptions

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)
imageOptions

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