scratch-blocks 2.0.0 → 2.0.2

package/src/blocks/procedures.ts

@@ -33,7 +33,7 @@ type ConnectionMap = {
   [key: string]: {
     shadow: Element;
     block: Blockly.BlockSvg;
-  };
+  } | null;
 };
 
 /**
@@ -68,6 +68,14 @@ class DuplicateOnDragDraggable implements Blockly.IDraggable {
    */
   startDrag(e: PointerEvent) {
     const data = this.block.toCopyData();
+    if (!data) {
+      console.warn(
+        "DuplicateOnDragDraggable.startDrag: failed to serialize block for copy",
+        this.block.type,
+        this.block.id
+      );
+      return;
+    }
     this.copy = Blockly.clipboard.paste(
       data,
       this.block.workspace
@@ -76,9 +84,19 @@ class DuplicateOnDragDraggable implements Blockly.IDraggable {
   }
 
   drag(newLoc: Blockly.utils.Coordinate, e?: PointerEvent) {
-    (
-      this.block.workspace.getGesture(e).getCurrentDragger() as ScratchDragger
-    ).setDraggable(this.copy);
+    const gesture = this.block.workspace.getGesture(e);
+    if (!gesture || !this.copy) {
+      console.warn(
+        "DuplicateOnDragDraggable.drag: missing gesture or copied block",
+        {
+          hasGesture: Boolean(gesture),
+          hasCopy: Boolean(this.copy),
+          blockId: this.block.id,
+        }
+      );
+      return;
+    }
+    (gesture.getCurrentDragger() as ScratchDragger).setDraggable(this.copy);
     this.copy.drag(newLoc, e);
   }
 
@@ -120,12 +138,12 @@ function callerMutationToDom(this: ProcedureCallBlock): Element {
  * @param xmlElement XML storage element.
  */
 function callerDomToMutation(this: ProcedureCallBlock, xmlElement: Element) {
-  this.procCode_ = xmlElement.getAttribute("proccode");
+  this.procCode_ = xmlElement.getAttribute("proccode")!;
   this.generateShadows_ = JSON.parse(
-    xmlElement.getAttribute("generateshadows")
+    xmlElement.getAttribute("generateshadows")!
   );
-  this.argumentIds_ = JSON.parse(xmlElement.getAttribute("argumentids"));
-  this.warp_ = JSON.parse(xmlElement.getAttribute("warp"));
+  this.argumentIds_ = JSON.parse(xmlElement.getAttribute("argumentids")!);
+  this.warp_ = JSON.parse(xmlElement.getAttribute("warp")!);
   this.updateDisplay_();
 }
 
@@ -167,16 +185,16 @@ function definitionDomToMutation(
   this: ProcedurePrototypeBlock | ProcedureDeclarationBlock,
   xmlElement: Element
 ) {
-  this.procCode_ = xmlElement.getAttribute("proccode");
-  this.warp_ = JSON.parse(xmlElement.getAttribute("warp"));
+  this.procCode_ = xmlElement.getAttribute("proccode")!;
+  this.warp_ = JSON.parse(xmlElement.getAttribute("warp")!);
 
   const prevArgIds = this.argumentIds_;
   const prevDisplayNames = this.displayNames_;
 
-  this.argumentIds_ = JSON.parse(xmlElement.getAttribute("argumentids"));
-  this.displayNames_ = JSON.parse(xmlElement.getAttribute("argumentnames"));
+  this.argumentIds_ = JSON.parse(xmlElement.getAttribute("argumentids")!);
+  this.displayNames_ = JSON.parse(xmlElement.getAttribute("argumentnames")!);
   this.argumentDefaults_ = JSON.parse(
-    xmlElement.getAttribute("argumentdefaults")
+    xmlElement.getAttribute("argumentdefaults")!
   );
   this.updateDisplay_();
   if ("updateArgumentReporterNames_" in this) {
@@ -224,7 +242,7 @@ function disconnectOldBlocks_(this: ProcedureBlock): ConnectionMap {
     if (input.connection) {
       const target = input.connection.targetBlock() as Blockly.BlockSvg;
       const saveInfo = {
-        shadow: input.connection.getShadowDom(true),
+        shadow: input.connection.getShadowDom(true) as Element,
         block: target,
       };
       connectionMap[input.name] = saveInfo;
@@ -420,7 +438,7 @@ function attachShadow_(
         new (Blockly.Events.get(Blockly.Events.BLOCK_CREATE))(newBlock)
       );
     }
-    newBlock.outputConnection.connect(input.connection);
+    newBlock.outputConnection!.connect(input.connection!);
   }
 }
 
@@ -486,21 +504,21 @@ function populateArgumentOnCaller_(
   id: string,
   input: Blockly.Input
 ) {
-  let oldBlock: Blockly.BlockSvg;
-  let oldShadow: Element;
+  let oldBlock: Blockly.BlockSvg | undefined;
+  let oldShadow: Element | undefined;
   if (connectionMap && id in connectionMap) {
     const saveInfo = connectionMap[id];
-    oldBlock = saveInfo["block"];
-    oldShadow = saveInfo["shadow"];
+    oldBlock = saveInfo?.["block"];
+    oldShadow = saveInfo?.["shadow"];
   }
 
   if (connectionMap && oldBlock) {
     // Reattach the old block and shadow DOM.
     connectionMap[input.name] = null;
-    oldBlock.outputConnection.connect(input.connection);
+    oldBlock.outputConnection!.connect(input.connection!);
     if (type !== ArgumentType.BOOLEAN && this.generateShadows_) {
       const shadowDom = oldShadow || this.buildShadowDom_(type);
-      input.connection.setShadowDom(shadowDom);
+      input.connection!.setShadowDom(shadowDom);
     }
   } else if (this.generateShadows_) {
     this.attachShadow_(input, type);
@@ -526,10 +544,10 @@ function populateArgumentOnPrototype_(
   id: string,
   input: Blockly.Input
 ) {
-  let oldBlock = null;
+  let oldBlock: Blockly.BlockSvg | null = null;
   if (connectionMap && id in connectionMap) {
     const saveInfo = connectionMap[id];
-    oldBlock = saveInfo["block"];
+    oldBlock = saveInfo?.["block"] ?? null;
   }
 
   const oldTypeMatches = checkOldTypeMatches_(oldBlock, type);
@@ -548,7 +566,7 @@ function populateArgumentOnPrototype_(
   }
 
   // Attach the block.
-  input.connection.connect(argumentReporter.outputConnection);
+  input.connection!.connect(argumentReporter.outputConnection!);
 }
 
 /**
@@ -570,10 +588,10 @@ function populateArgumentOnDeclaration_(
   id: string,
   input: Blockly.Input
 ) {
-  let oldBlock = null;
+  let oldBlock: Blockly.BlockSvg | null = null;
   if (connectionMap && id in connectionMap) {
     const saveInfo = connectionMap[id];
-    oldBlock = saveInfo["block"];
+    oldBlock = saveInfo?.["block"] ?? null;
   }
 
   // TODO: This always returns false, because it checks for argument reporter
@@ -593,7 +611,7 @@ function populateArgumentOnDeclaration_(
   }
 
   // Attach the block.
-  input.connection.connect(argumentEditor.outputConnection);
+  input.connection!.connect(argumentEditor.outputConnection!);
 }
 
 /**
@@ -686,7 +704,7 @@ function updateDeclarationProcCode_(this: ProcedureDeclarationBlock) {
       this.procCode_ += input.fieldRow[0].getValue();
     } else if (input.type === Blockly.inputs.inputTypes.VALUE) {
       // Inspect the argument editor.
-      const target = input.connection.targetBlock();
+      const target = input.connection!.targetBlock()!;
       this.displayNames_.push(target.getFieldValue("TEXT"));
       this.argumentIds_.push(input.name);
       if (target.type === "argument_editor_boolean") {
@@ -712,8 +730,8 @@ function focusLastEditor_(this: ProcedureDeclarationBlock) {
       newInput.fieldRow[0].showEditor();
     } else if (newInput.type === Blockly.inputs.inputTypes.VALUE) {
       // Inspect the argument editor.
-      const target = newInput.connection.targetBlock();
-      target.getField("TEXT").showEditor();
+      const target = newInput.connection!.targetBlock()!;
+      target.getField("TEXT")!.showEditor();
     }
   }
 }
@@ -791,7 +809,7 @@ function removeFieldCallback(
   for (var n = 0; n < this.inputList.length; n++) {
     var input = this.inputList[n];
     if (input.connection) {
-      var target = input.connection.targetBlock();
+      var target = input.connection!.targetBlock()!;
       if (field.name && target.getField(field.name) === field) {
         inputNameToRemove = input.name;
       }

package/src/context_menu_items.ts

@@ -12,20 +12,20 @@ import * as Blockly from "blockly/core";
 export function registerDeleteBlock() {
   const deleteOption = {
     displayText(scope: Blockly.ContextMenuRegistry.Scope) {
-      const descendantCount = getDeletableBlocksInStack(scope.block).length;
+      const descendantCount = getDeletableBlocksInStack(scope.block!).length;
       return descendantCount === 1
         ? Blockly.Msg["DELETE_BLOCK"]
         : Blockly.Msg["DELETE_X_BLOCKS"].replace("%1", `${descendantCount}`);
     },
     preconditionFn(scope: Blockly.ContextMenuRegistry.Scope) {
-      if (!scope.block.isInFlyout && scope.block.isDeletable()) {
+      if (!scope.block!.isInFlyout && scope.block!.isDeletable()) {
         return "enabled";
       }
       return "hidden";
     },
     callback(scope: Blockly.ContextMenuRegistry.Scope) {
       Blockly.Events.setGroup(true);
-      scope.block.dispose(true, true);
+      scope.block!.dispose(true, true);
       Blockly.Events.setGroup(false);
     },
     scopeType: Blockly.ContextMenuRegistry.ScopeType.BLOCK,
@@ -42,7 +42,7 @@ function getDeletableBlocksInStack(
   if (block.getNextBlock()) {
     // Next blocks are not deleted.
     const nextDescendants = block
-      .getNextBlock()
+      .getNextBlock()!
       .getDescendants(false)
       .filter(isDeletable);
     descendants = descendants.filter((b) => !nextDescendants.includes(b));
@@ -161,10 +161,10 @@ function deleteNext(deleteList: Blockly.BlockSvg[], eventGroup?: string) {
  */
 export function registerDuplicateBlock() {
   const original =
-    Blockly.ContextMenuRegistry.registry.getItem("blockDuplicate");
+    Blockly.ContextMenuRegistry.registry.getItem("blockDuplicate")!;
   const duplicateOption = {
-    displayText: original.displayText,
-    preconditionFn: original.preconditionFn,
+    displayText: original.displayText!,
+    preconditionFn: original.preconditionFn!,
     callback(scope: Blockly.ContextMenuRegistry.Scope) {
       if (!scope.block) return;
       const data = scope.block.toCopyData(true);

package/src/data_category.ts

@@ -481,14 +481,14 @@ function addCreateButton(
   let msg = Blockly.Msg.NEW_VARIABLE;
   let callbackKey = "CREATE_VARIABLE";
   let callback = function (button: Blockly.FlyoutButton) {
-    createVariable(button.getTargetWorkspace(), null, SCALAR_VARIABLE_TYPE);
+    createVariable(button.getTargetWorkspace(), undefined, SCALAR_VARIABLE_TYPE);
   };
 
   if (type === "LIST") {
     msg = Blockly.Msg.NEW_LIST;
     callbackKey = "CREATE_LIST";
     callback = function (button: Blockly.FlyoutButton) {
-      createVariable(button.getTargetWorkspace(), null, LIST_VARIABLE_TYPE);
+      createVariable(button.getTargetWorkspace(), undefined, LIST_VARIABLE_TYPE);
     };
   }
   button.setAttribute("text", msg);
@@ -551,7 +551,7 @@ function addBlock(
           ${secondValueField}
         </block>
       </xml>`;
-    var block = Blockly.utils.xml.textToDom(blockText).firstElementChild;
+    var block = Blockly.utils.xml.textToDom(blockText).firstElementChild!;
     xmlList.push(block);
   }
 }
@@ -617,6 +617,6 @@ function createValue(valueName: string, type: string, value: string): string {
  */
 function addSep(xmlList: Element[]) {
   const sepText = `<xml><sep gap="36"/></xml>`;
-  const sep = Blockly.utils.xml.textToDom(sepText).firstElementChild;
+  const sep = Blockly.utils.xml.textToDom(sepText).firstElementChild!;
   xmlList.push(sep);
 }

package/src/events/events_block_comment_base.ts

@@ -9,9 +9,9 @@ import type { ScratchCommentBubble } from "../scratch_comment_bubble";
 
 export class BlockCommentBase extends Blockly.Events.Abstract {
   isBlank = true;
-  commentId: string;
-  blockId: string;
-  workspaceId: string;
+  commentId!: string;
+  blockId!: string;
+  workspaceId!: string;
 
   constructor(opt_blockComment?: ScratchCommentBubble) {
     super();
@@ -20,8 +20,11 @@ export class BlockCommentBase extends Blockly.Events.Abstract {
     if (!opt_blockComment) return;
 
     this.commentId = opt_blockComment.getId();
-    this.blockId = opt_blockComment.getSourceBlock()?.id;
-    this.workspaceId = opt_blockComment.getSourceBlock()?.workspace.id;
+    const sourceBlock = opt_blockComment.getSourceBlock();
+    if (sourceBlock) {
+      this.blockId = sourceBlock.id;
+      this.workspaceId = sourceBlock.workspace.id;
+    }
   }
 
   toJson(): BlockCommentBaseJson {

package/src/events/events_block_comment_change.ts

@@ -12,8 +12,8 @@ import {
 import type { ScratchCommentBubble } from "../scratch_comment_bubble";
 
 class BlockCommentChange extends BlockCommentBase {
-  oldContents_: string;
-  newContents_: string;
+  oldContents_!: string;
+  newContents_!: string;
 
   constructor(
     opt_blockComment?: ScratchCommentBubble,
@@ -22,8 +22,8 @@ class BlockCommentChange extends BlockCommentBase {
   ) {
     super(opt_blockComment);
     this.type = "block_comment_change";
-    this.oldContents_ = oldContents;
-    this.newContents_ = newContents;
+    if (oldContents !== undefined) this.oldContents_ = oldContents;
+    if (newContents !== undefined) this.newContents_ = newContents;
     // Disable undo because Blockly already tracks changes to comment text for
     // undo purposes; this event exists solely to keep the Scratch VM apprised
     // of the state of things.

package/src/events/events_block_comment_collapse.ts

@@ -12,12 +12,12 @@ import {
 import type { ScratchCommentBubble } from "../scratch_comment_bubble";
 
 class BlockCommentCollapse extends BlockCommentBase {
-  newCollapsed: boolean;
+  newCollapsed!: boolean;
 
   constructor(opt_blockComment?: ScratchCommentBubble, collapsed?: boolean) {
     super(opt_blockComment);
     this.type = "block_comment_collapse";
-    this.newCollapsed = collapsed;
+    if (collapsed !== undefined) this.newCollapsed = collapsed;
   }
 
   toJson(): BlockCommentCollapseJson {
@@ -45,7 +45,19 @@ class BlockCommentCollapse extends BlockCommentBase {
   run(forward: boolean) {
     const workspace = this.getEventWorkspace_();
     const block = workspace.getBlockById(this.blockId);
+    if (!block) {
+      console.warn(
+        "BlockCommentCollapse.run: block not found",
+        this.blockId,
+        this.workspaceId
+      );
+      return;
+    }
     const comment = block.getIcon(Blockly.icons.IconType.COMMENT);
+    if (!comment) {
+      console.warn("BlockCommentCollapse.run: comment icon not found", block.id);
+      return;
+    }
     comment.setBubbleVisible(forward ? !this.newCollapsed : this.newCollapsed);
   }
 }

package/src/events/events_block_comment_create.ts

@@ -12,7 +12,7 @@ import {
 import type { ScratchCommentBubble } from "../scratch_comment_bubble";
 
 class BlockCommentCreate extends BlockCommentBase {
-  json: {
+  json!: {
     x: number;
     y: number;
     width: number;
@@ -22,6 +22,9 @@ class BlockCommentCreate extends BlockCommentBase {
   constructor(opt_blockComment?: ScratchCommentBubble) {
     super(opt_blockComment);
     this.type = "block_comment_create";
+    // opt_blockComment is absent when this class is instantiated by fromJson.
+    // In that case fromJson sets this.json directly, so return early here.
+    if (!opt_blockComment) return;
     const size = opt_blockComment.getSize();
     const location = opt_blockComment.getRelativeToSurfaceXY();
     this.json = {

package/src/events/events_block_comment_delete.ts

@@ -15,8 +15,10 @@ class BlockCommentDelete extends BlockCommentBase {
   ) {
     super(opt_blockComment);
     this.type = "block_comment_delete";
-    this.blockId = sourceBlock.id;
-    this.workspaceId = sourceBlock.workspace.id;
+    if (sourceBlock) {
+      this.blockId = sourceBlock.id;
+      this.workspaceId = sourceBlock.workspace.id;
+    }
     // Disable undo because Blockly already tracks comment deletion for
     // undo purposes; this event exists solely to keep the Scratch VM apprised
     // of the state of things.

package/src/events/events_block_comment_move.ts

@@ -12,8 +12,8 @@ import {
 import type { ScratchCommentBubble } from "../scratch_comment_bubble";
 
 class BlockCommentMove extends BlockCommentBase {
-  oldCoordinate_: Blockly.utils.Coordinate;
-  newCoordinate_: Blockly.utils.Coordinate;
+  oldCoordinate_!: Blockly.utils.Coordinate;
+  newCoordinate_!: Blockly.utils.Coordinate;
 
   constructor(
     opt_blockComment?: ScratchCommentBubble,
@@ -22,8 +22,8 @@ class BlockCommentMove extends BlockCommentBase {
   ) {
     super(opt_blockComment);
     this.type = "block_comment_move";
-    this.oldCoordinate_ = oldCoordinate;
-    this.newCoordinate_ = newCoordinate;
+    if (oldCoordinate !== undefined) this.oldCoordinate_ = oldCoordinate;
+    if (newCoordinate !== undefined) this.newCoordinate_ = newCoordinate;
   }
 
   toJson(): BlockCommentMoveJson {

package/src/events/events_block_comment_resize.ts

@@ -12,8 +12,8 @@ import {
 import type { ScratchCommentBubble } from "../scratch_comment_bubble";
 
 class BlockCommentResize extends BlockCommentBase {
-  oldSize: Blockly.utils.Size;
-  newSize: Blockly.utils.Size;
+  oldSize!: Blockly.utils.Size;
+  newSize!: Blockly.utils.Size;
 
   constructor(
     opt_blockComment?: ScratchCommentBubble,
@@ -22,8 +22,8 @@ class BlockCommentResize extends BlockCommentBase {
   ) {
     super(opt_blockComment);
     this.type = "block_comment_resize";
-    this.oldSize = oldSize;
-    this.newSize = newSize;
+    if (oldSize !== undefined) this.oldSize = oldSize;
+    if (newSize !== undefined) this.newSize = newSize;
   }
 
   toJson(): BlockCommentResizeJson {

package/src/events/events_block_drag_end.ts

@@ -7,15 +7,15 @@
 import * as Blockly from "blockly/core";
 
 export class BlockDragEnd extends Blockly.Events.BlockBase {
-  isOutside: boolean;
-  xml: Element | DocumentFragment;
+  isOutside!: boolean;
+  xml!: Element | DocumentFragment;
 
   constructor(block?: Blockly.Block, isOutside?: boolean) {
     super(block);
     this.type = "endDrag";
-    this.isOutside = isOutside;
+    if (isOutside !== undefined) this.isOutside = isOutside;
     this.recordUndo = false;
-    this.xml = Blockly.Xml.blockToDom(block, true);
+    if (block) this.xml = Blockly.Xml.blockToDom(block, true);
   }
 
   toJson(): BlockDragEndJson {

package/src/events/events_block_drag_outside.ts

@@ -7,12 +7,12 @@
 import * as Blockly from "blockly/core";
 
 export class BlockDragOutside extends Blockly.Events.BlockBase {
-  isOutside: boolean;
+  isOutside!: boolean;
 
   constructor(block?: Blockly.Block, isOutside?: boolean) {
     super(block);
     this.type = "dragOutside";
-    this.isOutside = isOutside;
+    if (isOutside !== undefined) this.isOutside = isOutside;
     this.recordUndo = false;
   }
 

package/src/events/events_scratch_variable_create.ts

@@ -8,8 +8,8 @@ import * as Blockly from "blockly/core";
 import { ScratchVariableModel } from "../scratch_variable_model";
 
 class ScratchVariableCreate extends Blockly.Events.VarCreate {
-  isLocal: boolean;
-  isCloud: boolean;
+  isLocal!: boolean;
+  isCloud!: boolean;
 
   constructor(variable?: ScratchVariableModel) {
     super(variable);
@@ -46,6 +46,17 @@ class ScratchVariableCreate extends Blockly.Events.VarCreate {
     const workspace = this.getEventWorkspace_();
     const variableMap = workspace.getVariableMap();
     if (forward) {
+      if (this.varName == null || this.varType == null || this.varId == null) {
+        console.error(
+          "ScratchVariableCreate.run: missing variable data for create",
+          {
+            varName: this.varName,
+            varType: this.varType,
+            varId: this.varId,
+          }
+        );
+        return;
+      }
       const variable = new ScratchVariableModel(
         workspace,
         this.varName,
@@ -59,6 +70,13 @@ class ScratchVariableCreate extends Blockly.Events.VarCreate {
         new (Blockly.Events.get(Blockly.Events.VAR_CREATE))(variable)
       );
     } else {
+      if (this.varId == null) {
+        console.error(
+          "ScratchVariableCreate.run: missing varId for delete",
+          this
+        );
+        return;
+      }
       const variable = variableMap.getVariableById(this.varId);
       if (variable) {
         variableMap.deleteVariable(variable);

package/src/fields/field_colour_slider.ts

@@ -41,9 +41,9 @@ export class FieldColourSlider extends FieldColour {
    * The button calls this function with a callback to update the field value.
    * BEWARE: This is not a stable API. It may change.
    */
-  static activateEyedropper_: (
+  static activateEyedropper_?: (
     callback: (colour: string) => void
-  ) => void | null = null;
+  ) => void;
 
   /**
    * Path to the eyedropper svg icon.
@@ -61,9 +61,9 @@ export class FieldColourSlider extends FieldColour {
   private hueReadout_?: Element;
   private saturationReadout_?: Element;
   private brightnessReadout_?: Element;
-  private hue_?: number;
-  private saturation_?: number;
-  private brightness_?: number;
+  private hue_ = 0;
+  private saturation_ = 0;
+  private brightness_ = 0;
   private eyedropperEventData_?: Blockly.browserEvents.Data;
 
   /**
@@ -133,34 +133,58 @@ export class FieldColourSlider extends FieldColour {
    * Update the readouts and slider backgrounds after value has changed.
    */
   private updateDom_() {
-    if (this.hueSlider_) {
-      // Update the slider backgrounds
-      this.setGradient_(this.hueSlider_, ColourChannel.HUE);
-      this.setGradient_(this.saturationSlider_, ColourChannel.SATURATION);
-      this.setGradient_(this.brightnessSlider_, ColourChannel.BRIGHTNESS);
-
-      // Update the readouts
-      this.hueReadout_.textContent = Math.floor(
-        (100 * this.hue_) / 360
-      ).toFixed(0);
-      this.saturationReadout_.textContent = Math.floor(
-        100 * this.saturation_
-      ).toFixed(0);
-      this.brightnessReadout_.textContent = Math.floor(
-        (100 * this.brightness_) / 255
-      ).toFixed(0);
+    const hueSlider = this.hueSlider_;
+    const saturationSlider = this.saturationSlider_;
+    const brightnessSlider = this.brightnessSlider_;
+    const hueReadout = this.hueReadout_;
+    const saturationReadout = this.saturationReadout_;
+    const brightnessReadout = this.brightnessReadout_;
+    if (
+      !hueSlider ||
+      !saturationSlider ||
+      !brightnessSlider ||
+      !hueReadout ||
+      !saturationReadout ||
+      !brightnessReadout
+    ) {
+      console.warn(
+        "FieldColourSlider.updateDom_: slider/readout DOM is not fully initialized"
+      );
+      return;
     }
+
+    this.setGradient_(hueSlider, ColourChannel.HUE);
+    this.setGradient_(saturationSlider, ColourChannel.SATURATION);
+    this.setGradient_(brightnessSlider, ColourChannel.BRIGHTNESS);
+
+    hueReadout.textContent = Math.floor(
+      (100 * this.hue_) / 360
+    ).toFixed(0);
+    saturationReadout.textContent = Math.floor(
+      100 * this.saturation_
+    ).toFixed(0);
+    brightnessReadout.textContent = Math.floor(
+      (100 * this.brightness_) / 255
+    ).toFixed(0);
   }
 
   /**
    * Update the slider handle positions from the current field value.
    */
   private updateSliderHandles_() {
-    if (this.hueSlider_) {
-      this.hueSlider_.value = `${this.hue_}`;
-      this.saturationSlider_.value = `${this.saturation_}`;
-      this.brightnessSlider_.value = `${this.brightness_}`;
+    const hueSlider = this.hueSlider_;
+    const saturationSlider = this.saturationSlider_;
+    const brightnessSlider = this.brightnessSlider_;
+    if (!hueSlider || !saturationSlider || !brightnessSlider) {
+      console.warn(
+        "FieldColourSlider.updateSliderHandles_: slider DOM is not fully initialized"
+      );
+      return;
     }
+
+    hueSlider.value = `${this.hue_}`;
+    saturationSlider.value = `${this.saturation_}`;
+    brightnessSlider.value = `${this.brightness_}`;
   }
 
   /**
@@ -219,7 +243,7 @@ export class FieldColourSlider extends FieldColour {
    * Activate the eyedropper, passing in a callback for setting the field value.
    */
   private activateEyedropperInternal_() {
-    FieldColourSlider.activateEyedropper_((chosenColour: string) => {
+    FieldColourSlider.activateEyedropper_?.((chosenColour: string) => {
       // Update the internal hue/saturation/brightness values so sliders update.
       const components = Blockly.utils.colour.hexToRgb(chosenColour);
       const { hue, saturation, value } = this.rgbToHsv(
@@ -245,7 +269,8 @@ export class FieldColourSlider extends FieldColour {
 
     // Init color component values that are used while the editor is open
     // in order to keep the slider values stable.
-    const components = Blockly.utils.colour.hexToRgb(this.getValue());
+    const currentValue = this.getValue() ?? "#000000";
+    const components = Blockly.utils.colour.hexToRgb(currentValue);
     const { hue, saturation, value } = this.rgbToHsv(
       components[0],
       components[1],
@@ -314,7 +339,7 @@ export class FieldColourSlider extends FieldColour {
 
     // Set value updates the slider positions
     // Do this before attaching callbacks to avoid extra events from initial set
-    this.setValue(this.getValue());
+    this.setValue(this.getValue() ?? currentValue);
 
     this.hueChangeEventKey_ = Blockly.browserEvents.bind(
       this.hueSlider_,