Register an Element Definition
As elements are defined in JavaScript, we'll have to hook into the wpce_instance_added event to get the editor instance and register the element definition there.
js
document.addEventListener('wpce_instance_added', function (event) {
const editor = event.detail.instance
const elementDefinition = {
id: 'text',
label: 'Text',
icon: '<span class="dashicons dashicons-editor-textcolor"></span>',
isContainer: false,
groups: ['content'],
properties: [
{
id: 'content',
label: 'Inhalt',
description: 'Der anzuzeigende Text',
input: {
type: 'visualtext'
},
defaultValue: 'my default value!'
}
]
}
editor.definition.mountElement(elementDefinition)
})Depending on the Post Type
If you want to adjust behavior of your element definitions based on the post type the WPCE instance refers to, you can access it at through the event object:
js
document.addEventListener('wpce_instance_added', function (event) {
const editor = event.detail.instance
const manager = event.detail.instanceManager
const elementDefinition = {
id: 'root',
label: manager.postType === 'wpce-element'
? 'Globales Element'
: 'Dokument'
// ...
}
editor.definition.mountElement(elementDefinition)
})