Inheritance and Masking

Sometimes there are similar elements with slightly different properties. In this case you, element inheritance can be used, which allows to inherit element properties from a parent element. The following features are supported:

• Multilevel inheritance
• Overwriting properties
• Masking properties to simplify elements again

Inheritance

Inheritance can be achieved with the extends option in the element definition.

Have a look at the following example. Three elements are defined: A "vehicle", a "car" that should inherit its properties from the vehicle and "pickup" which will be at the end of the inheritance chain.

document.addEventListener('wpce_instance_added', function (event) {
  const editor = event.detail.instance

  const elementDefinition = {
    id: 'vehicle',
    label: 'Vehicle',
    groups: ['content'],
    properties: [
      {
        id: 'color',
        label: 'Color',
        input: {
          type: 'text'
        }
      }
    ]
  }

  editor.definition.mountElement(elementDefinition)
})

Here you can see the extends: 'vehicle' option.

document.addEventListener('wpce_instance_added', function (event) {
  const editor = event.detail.instance

  const elementDefinition = {
    id: 'car',
    label: 'Car',
    extends: 'vehicle',
    properties: [
      {
        id: 'power',
        label: 'Power',
        defaultValue: '450PS',
        input: {
          type: 'text'
        }
      },
      {
        id: 'color',
        label: 'Color (overwritten)',
        input: {
          type: 'text'
        }
      }
    ]
  }

  editor.definition.mountElement(elementDefinition)
})

document.addEventListener('wpce_instance_added', function (event) {
  const editor = event.detail.instance

  const elementDefinition = {
    id: 'pickup',
    label: 'Pickup',
    extends: 'car',
    properties: [
      {
        id: 'leather',
        label: 'leather',
        input: {
          type: 'text'
        }
      },
      {
        id: 'power',
        label: 'Power (overwritten)',
        input: {
          type: 'text'
        }
      }
    ]
  }

  editor.definition.mountElement(elementDefinition)
})

Masking

As you can build more complex elements with less redundancy using inheritance, elements will get more and more complex. To get simpler, "preconfigured" elements from a complex element, you can use masking.

With masking, you can prefill some properties with fixed values. These properties are no longer shown to the end user, but they still exist and create the according value in the document tree.

{
   id: 'my-element',
   label: 'My Element',
   extends: 'parent-element',
   mask: {
     maskedProperty: 'this is the prefilled value',
   }
}