Editor Input

Use a WPCE editor as input. This enables you to encapsulate complex structures in element dialogs to reduce overall complexity.

{
  input: {
    type: 'editor', 
    definition: {
      // ...
    },
    document: {
      // ...
    },
    mergeDefinition: 'global'
  }
}

For the definition you could use the following template:

{
  id: 'root',
  label: 'Root Group',
  children: [
    {
      id: 'root',
      label: 'Content',
      icon: '<span class="dashicons dashicons-media-default"></span>',
      allowedGroups: ['content'],
      isContainer: true,
      dialog: false,
      properties: []
    }
  ]
}

Input Options

Option	Values	Default	Description
definition	object	-	A definition object.
document	object	-	A document tree.
mergeDefinition	'global' | undefined	-	If you have an own definition and want to use the global definition as well you can inherit the global definition.
mergeInputTypes	boolean	true	Whether input types from the source document should be merged into the editor document.

Template Usage

The simplest way to get HTML from an edtor input is to use $wpce->get_inner_html().

For example:

$props = $element->properties;
$editor_html = $wpce->get_inner_html($props->myEditorProperty);

Conditions

The editor input type supports the following conditions for dynamic visibility:

Condition	Payload	Description
isEmpty	boolean defaults to true	Checks whether or not the editor contains any elements.