Override comment icon

You can override the built-in comment icon. For example, you may want the comment's pop-up bubble to look different.

To override the comment icon, extend CommentIcon, override selected methods in ICommentIcon, and register your new icon.

Note: Blockly has three kinds of built-in icons: comments, warnings, and mutators. Only the comment icon is overridable.

Extend CommentIcon

Start by extending CommentIcon.

class MyCommentIcon extends Blockly.icons.CommentIcon {
  constructor(sourceBlock) {
    super(sourceBlock);
  }
}

Override methods in ICommentIcon and Icon

To customize your icon, you can override methods in ICommentIcon (described in the following sections) and Blockly.icons.Icon (described in [Create custom icons][(/blockly/guides/create-custom-blocks/icons/creating-custom-icons/basic-implementation)]). Do not override getType, which must return Blockly.icons.IconType.COMMENT.

Text

The ICommentIcon interface requires that the comment has text. The getText method must return the text of the comment. The setText method must set the text of the comment and update any visuals.

getText() {
  return this.text;
}

setText(text) {
  this.text = text;
  this.myRenderMethod();
}

Bubble

Your custom comment icon must implement the IHasBubble interface to support serialization. Even if your icon doesn't technically have a bubble, you should store the visibility information on your class so that the saved state is maintained. Otherwise you'll lose information from the user if you load a save that includes whether the comment was open or not.

bubbleIsVisible() {
  return this.bubbleVisible;
}

setBubbleVisible(visible: boolean) {
  this.bubbleVisible = visible;
}

For more information about bubbles, see Use pop-up bubbles.

The ICommentIcon interface also requires a getBubbleSize method that returns a size, and a setBubbleSize that sets it. The same reasoning from earlier of saving state even if your icon doesn't technically have a bubble applies here as well.

getBubbleSize() {
  return this.bubbleSize;
}

setBubbleSize(size) {
  this.bubbleSize = size;
  this.myRenderMethod();
}

Save and load

Your custom comment icon must implement the ISerializable interface. The state should conform to the CommentState interface.

saveState() {
  return {
    text: this.text,
    pinned: this.bubbleVisible,
    height: this.bubbleSize.height,
    width: this.bubbleSize.width,
  }
}

loadState(state) {
  this.setText(state.text);
  this.setBubbleVisible(state.pinned);
  this.setBubbleSize(new Blockly.utils.Size(state.width, state.height));
}

For more information about icon serialization see Save and load icons.

Register your icon

Finally, unregister the existing comment icon and register your comment icon so Blockly can instantiate it. Use the string 'comment' for unregistration and IconTypes.COMMENT for registration.

Blockly.icons.registry.unregister('comment');
Blockly.icons.registry.register(Blockly.icons.IconType.COMMENT, myCommentIcon);

After you register your icon, Blockly will use it in place of the built-in comment icon, such as when the user clicks "Add Comment" on the context menu or you call myBlock.setCommentText().