refactor!: Update and modernize the continuous toolbox plugin.

package.json

@@ -36,7 +36,7 @@
     "@eslint/js": "^8.49.0",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",
-    "blockly": "^11.0.0",
+    "blockly": "^12.0.0-beta.1",
     "conventional-changelog-conventionalcommits": "^5.0.0",
     "eslint": "^8.49.0",
     "eslint-config-google": "^0.14.0",

plugins/block-shareable-procedures/src/observable_parameter_model.ts

@@ -13,7 +13,7 @@ export class ObservableParameterModel
   implements Blockly.procedures.IParameterModel
 {
   private id: string;
-  private variable: Blockly.VariableModel;
+  private variable: Blockly.IVariableModel<Blockly.IVariableState>;
   private shouldFireEvents = false;
   private procedureModel: Blockly.procedures.IProcedureModel | null = null;
 
@@ -44,8 +44,8 @@ export class ObservableParameterModel
    * @returns This parameter model.
    */
   setName(name: string, id?: string): this {
-    if (name === this.variable.name) return this;
-    const oldName = this.variable.name;
+    if (name === this.variable.getName()) return this;
+    const oldName = this.variable.getName();
     this.variable =
       this.workspace.getVariable(name) ??
       this.workspace.createVariable(name, '', id);
@@ -73,7 +73,7 @@ export class ObservableParameterModel
   protected createBackingVariable(
     name: string,
     varId?: string,
-  ): Blockly.VariableModel {
+  ): Blockly.IVariableModel<Blockly.IVariableState> {
     this.variable =
       this.workspace.getVariable(name) ??
       this.workspace.createVariable(name, '', varId);
@@ -100,7 +100,7 @@ export class ObservableParameterModel
    * @returns the name of this parameter.
    */
   getName(): string {
-    return this.variable.name;
+    return this.variable.getName();
   }
 
   /**
@@ -123,7 +123,7 @@ export class ObservableParameterModel
   /**
    * @returns the variable model associated with the parameter model.
    */
-  getVariableModel(): Blockly.VariableModel {
+  getVariableModel(): Blockly.IVariableModel<Blockly.IVariableState> {
     return this.variable;
   }
 

plugins/block-shareable-procedures/test/procedure_blocks.mocha.js

@@ -1237,6 +1237,7 @@ suite('Procedures', function () {
       'if a procedure caller block was already disabled before ' +
         'its definition was disabled, it is not reenabled',
       function () {
+        this.workspace.options.disable = true;
         const defBlock = createProcDefBlock(this.workspace);
         const callBlock = createProcCallBlock(this.workspace);
         globalThis.clock.runAll();

plugins/content-highlight/src/index.ts

@@ -13,7 +13,7 @@ import * as Blockly from 'blockly/core';
 /**
  * List of events that cause a change in content area size.
  */
-const contentChangeEvents = [
+const contentChangeEvents: string[] = [
   Blockly.Events.VIEWPORT_CHANGE,
   Blockly.Events.BLOCK_MOVE,
   Blockly.Events.BLOCK_DELETE,

plugins/continuous-toolbox/README.md

@@ -21,26 +21,26 @@ npm install @blockly/continuous-toolbox --save
 
 ## Usage
 
-Include the toolbox, flyout, and metrics manager classes from the plugin in the options struct used when injecting Blockly. This style of flyout works best with a toolbox definition that does not use collapsible categories.
+Import and call the `registerContinuousToolbox()` function before injecting
+Blockly. This style of flyout works best with a toolbox definition that does
+not use collapsible categories.
 
-Note that this plugin uses APIs introduced in the `3.20200924.3` release of Blockly, so you will need to use at least this version or higher.
+Note that this plugin uses APIs introduced in the `v12` release of Blockly, so
+you will need to use at least this version or higher.
 
 ```js
 import * as Blockly from 'blockly';
-import {
-  ContinuousToolbox,
-  ContinuousFlyout,
-  ContinuousMetrics,
-} from '@blockly/continuous-toolbox';
+import {registerContinuousToolbox} from '@blockly/continuous-toolbox';
 
 // Inject Blockly.
+registerContinuousToolbox();
 const workspace = Blockly.inject('blocklyDiv', {
+  toolbox: toolboxCategories,
   plugins: {
-    toolbox: ContinuousToolbox,
-    flyoutsVerticalToolbox: ContinuousFlyout,
-    metricsManager: ContinuousMetrics,
+    flyoutsVerticalToolbox: 'ContinuousFlyout',
+    metricsManager: 'ContinuousMetrics',
+    toolbox: 'ContinuousToolbox',
   },
-  toolbox: toolboxCategories,
   // ... your other options here ...
 });
 ```