Create custom inputs

  • Subclass Blockly.inputs.Input to create a custom input, ensuring the constructor accepts a name and block for JSON compatibility.

  • Optionally create a connection for the input using the makeConnection method within the constructor.

  • Register the custom input with Blockly.registry to enable its usage in JSON block definitions, associating it with a unique string identifier.

  • Custom inputs cannot replace built-in inputs, nor can custom JSON configuration be added to built-in inputs.

To create a custom input, you need to subclass Input, or one of its subclasses.

class MyInput extends Blockly.inputs.Input {

  // The constructor should always take in a name and a block to be compatible
  // with JSON block definitions.
  constructor(name, block) {
    super(name, block);
    // etc...
  }
}

Optionally create a connection

If you want your input to have a connection, that should be created in the constructor, by calling the makeConnection method.

constructor(name, block) {
  super(name, block);

  this.connection = this.makeConnection(ConnectionType.INPUT_VALUE);
}

Register the input

To be able to use your custom input in a JSON block definition you need to register it and associate it with a string.

class MyInput extends Blockly.inputs.Input {}

Blockly.registry.register(Blockly.registry.Type.INPUT, 'my_input', MyInput);