Defining your components

For the editor to work you have to define the components you want to use on your page. Each component can be registered using the registerComponent() method

// Register a component / block
editor.registerComponent('<COMPONENT_IDENTIFIER>', {
  category: '<CATEGORY_LABEL>',
  title: '<COMPONENT_TITLE>',
  label: '<FIELD_USED_AS_BLOCK_DESCRIPTION>', // optional
  fields: [/* An array of fields */]
})

The fields property is an array of field definition. You can use the built in fields (explained in the next chapter of this documentation) or create your own.

Example

Here is an example of fields for a hero banner.

import {Text, HTMLText, Repeater, Select} from '@boxraiser/visual-editor'

editor.registerComponent('hero', {
  title: 'Hero',
  fields: [
    Text('title', {label: 'Title'}),
    HTMLText('content', {label: 'Content'}),
    Repeater('actions', {
      label: 'Buttons',
      fields: [
        Text('label', { label: 'Label', default: 'Call to action' }),
        Text('url', { label: 'Link' }),
        Select('type', {
          default: 'primary',
          label: 'type',
          options: [
            { label: 'Primary', value: 'primary' },
            { label: 'Secondary', value: 'secondary' }
          ]
        })
      ]
    })
  ]
})