Create custom bubbles

A bubble is a pop up UI that looks like a speech bubble you would see in a comic. They have a "tail" that points at a block, and a "head" that contains arbitrary svg elements.

If the built-in bubbles don't work for your use case, you can create a custom bubble by subclassing the Bubble class.

Create the view

A bubble's view is all of the svg elements that live inside the "head" of the bubble. These elements are created inside of the bubble's constructor, and they should be children of the this.contentContainer element so that they get automatically cleaned up when the icon is destroyed.

The Blockly.utils.dom module provides a clean interface for instantiating svgs.

class MyBubble extends Blockly.bubbles.Bubble {
  // See the Blockly.bubbles.Bubble class for information about what these
  // parameters are.
  constructor(workspace, anchor, ownerRect) {
    super(workspace, anchor, ownerRect);

    this.text = Blockly.utils.dom.createSvgElement(
          Blockly.utils.Svg.TEXT,
          {'class': 'my-bubble-class'},
          this.contentContainer);
    const node = Blockly.utils.dom.createTextNode('some text');
    this.text.appendChild(node);
  }
}

Set the size

The bubble's size needs to be set using setSize so that the outer border can properly surround the contents of the bubble. It should be set during construction, and whenever the size of the UI elements change.

constructor(workspace, anchor, ownerRect) {
  // Create the view elements... (see above)

  const bbox = this.text.getBBox();
  this.setSize(
    new Blockly.utils.Size(
      bbox.width + Blockly.bubbles.Bubble.BORDER_WIDTH * 2,
      bbox.height + Blockly.bubbles.Bubble.BORDER_WIDTH * 2,
    ),
    true
  );
}

Dispose of the bubble

Bubbles should clean up any dom elements or external references when they are disposed. By default, anything that is appended to this.contentContainer gets destroyed, but other references need to be manually cleaned up. This should be done within the dispose method.

dispose() {
  super.dispose();

  // Dispose of other references.
  this.myArbitraryReference.dispose();
}