How to Add Element Proptypes

1. Find the Current Block Configs

Open up your block's code and find /src/configs.js. It will look something like this:

import { ElementPropTypes } from '@volusion/element-proptypes'

export const configSchema = {
  text: {
    label: 'Text content',
    type: ElementPropTypes.string,
 },
}

export const defaultConfig = {
  text: 'Element Starter Block',
}

2. Add a New Element Proptype

Add another proptype to the schema. You will need to provide a label property and a type. For this example, we'll add a textColor prop with a PropType of color, but look at the "Proptypes" reference for other available types.

import { ElementPropTypes } from '@volusion/element-proptypes'

export const configSchema = {
  text: {
    label: 'Text content',
    type: ElementPropTypes.string,
 },
  textColor: {
    label: 'Text color',
    type: ElementPropTypes.color,
 },
}

3. Add a New Default Value

When you add a new Element Proptype to a schema in config.js, you need to give it a default value:

export const defaultConfig = {
  text: 'Element Starter Block',
  textColor: 'rgba(130,104,252,.8)',
}

4. Use the New Prop in the Block

We can now use that new proptype in the block. Open /src/Block.js and add a style attribute to the <h1> tag assigning our new textColor prop to the color.

<h1 style="{{color:" props.textColor}}></h1>

5. Add Another Related Element Proptype

Return to /src/configs.js and add another prop: backgroundColor.

import { ElementPropTypes } from '@volusion/element-proptypes'

export const configSchema = {
  text: {
    label: 'Text content',
    type: ElementPropTypes.string,
 },
  textColor: {
    label: 'Text color',
    type: ElementPropTypes.color,
 },
  backgroundColor: {
    label: 'Background color',
    type: ElementPropTypes.color,
 },
}

6. Organize Proptypes with a Section Header

Group the colors together under an ElementPropTypes.sectionHeader:

import { ElementPropTypes } from '@volusion/element-proptypes'

export const configSchema = {
  text: {
    label: 'Text content',
    type: ElementPropTypes.string,
 },
  colorsHeader: {
    type: ElementPropTypes.sectionHeader,
 },
  textColor: {
    label: 'Text color',
    type: ElementPropTypes.color,
 },
  backgroundColor: {
    label: 'Background color',
    type: ElementPropTypes.color,
 },
}

7. Update Config Schema Usage

Update the default configs to include the new props:

export const defaultConfig = {
  text: 'Element Starter Block',
  colorsHeader: 'Colors',
  textColor: 'rgba(130,104,252,.8)',
  backgroundColor: 'yellow', // merchant changes are stored in RBGA
}

Go back into /src/Block.js and update the style of the <h1> to use our new property:

<h1 style={{color: props.textColor, background: props.backgroundColor}}>

8. View Your Config in Site Designer

Build and update your block:

npm run build
element update

Add your block to a theme, or reload your theme with the block, and you'll see the new props and default values grouped under the "Colors" sectionHeader: