Blockly lets you customize certain functionality by replacing the corresponding Blockly classes.
Replaceable classes
The following Blockly classes can be replaced:
Blockly class | Interface | Registration name(s) |
---|---|---|
Blockly.dragging.Dragger | Blockly.IDragger | blockDragger |
Blockly.ConnectionChecker | Blockly.IConnectionChecker | connectionChecker |
Blockly.InsertionMarkerPreviewer | Blockly.IConnectionPreviewer | connectionPreviewer |
Blockly.Flyout | Blockly.IFlyout | flyoutsVerticalToolbox flyoutsHorizontalToolbox |
Blockly.MetricsManager | Blockly.IMetricsManager | metricsManager |
Blockly.blockRendering.Renderer* | -- | renderer |
Blockly.Toolbox | Blockly.IToolbox | toolbox |
* This is the base class for all renderers. You can subclass it or an existing renderer. See Create a new renderer.
Blockly's interfaces are defined in
core/interfaces
.
Create a replacement class
To create a replacement class, implement the functions in the corresponding interface. You can implement all of these functions in a new class, or extend the Blockly class and only override the functions you want to change. The only requirement is that you (or the base class) implement all of the functions in the interface and adhere to any requirements described in comments on the interface.
To indicate to the type checker that you implement a specific interface,
annotate your class with the @implements {InterfaceName}
JSDoc tag (in
JavaScript) or the implements
keyword (in TypeScript).
Inject your replacement class
To tell Blockly about your replacement class, use the plugins
property in the
BlocklyOptions
object
passed to Blockly.inject
. (In spite of this property's name, your class does
not need to be packaged and distributed through npm like the plugins used to
extend Blockly.)
You can pass your subclass into the inject
method.
Blockly.inject('blocklyDiv', {
plugins: {
'metricsManager': CustomMetricsManagerClass
}
}
Or you can register your class using Blockly.registry
and use the registry
name to inject the class. This is useful if you store your injection options as
pure JSON.
Blockly.registry.register(Blockly.registry.Type.METRICS_MANAGER, 'YOUR_NAME', SubClass);
Blockly.inject('blocklyDiv', {
plugins: {
'metricsManager': 'YOUR_NAME'
}
}