Upgrade to Blockly 12.0.0 and nav plugin 0.0.8

Updates for:
- Awkward change in addConnectionHighlight that means Blockly now manages
  visibility and creates the highlights sooner.
- setEnabled removal
- dropdowns HTMLElement support
- plugin CSS
- toolbox integration with the plugin
- Reinstate outline around showLeds 'field' when focussed
- Active focus styling for flyout buttons and labels
- Fix focus handling for showLeds field editor
  The escape key now works as expected.
- Correct background color for play sound effect field
- We can now remove the patch script as isFullBlockField is public.

Author: microbit-matt-hillsdon

package.json

@@ -50,7 +50,6 @@
     "built/tests/blocksrunner.js",
     "built/tests/blockssetup.js",
     "scripts/patchUglifyify.js",
-    "scripts/patchBlocklyFieldColour.js",
     "docfiles",
     "theme",
     "common-docs",
@@ -62,9 +61,9 @@
     "npm": ">=8.0.0"
   },
   "dependencies": {
-    "@blockly/field-colour": "5.0.12",
-    "@blockly/keyboard-experiment": "0.0.7",
-    "@blockly/plugin-workspace-search": "9.1.0",
+    "@blockly/field-colour": "6.0.0",
+    "@blockly/keyboard-experiment": "0.0.8",
+    "@blockly/plugin-workspace-search": "10.0.0",
     "@crowdin/crowdin-api-client": "^1.33.0",
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@microsoft/applicationinsights-web": "^2.8.11",
@@ -73,7 +72,7 @@
     "@zip.js/zip.js": "2.4.20",
     "adm-zip": "^0.5.12",
     "axios": "^1.6.8",
-    "blockly": "12.0.0-beta.4",
+    "blockly": "12.0.0",
     "browserify": "17.0.0",
     "chai": "^3.5.0",
     "chalk": "^4.1.2",
@@ -158,12 +157,6 @@
   "overrides": {
     "combine-source-map": {
       "source-map": "0.4.4"
-    },
-    "@blockly/field-colour": {
-      "blockly": "^12.0.0-beta.4"
-    },
-    "@blockly/plugin-workspace-search": {
-      "blockly": "^12.0.0-beta.4"
     }
   },
   "scripts": {
@@ -183,6 +176,6 @@
     "update": "gulp update",
     "watch-streamer": "cd docs/static/streamer && tsc -t es6 --watch",
     "prepare": "node ./scripts/npm-prepare.js",
-    "postinstall": "node ./scripts/patchUglifyify.js && node ./scripts/patchBlocklyFieldColour.js"
+    "postinstall": "node ./scripts/patchUglifyify.js"
   }
 }

pxtblocks/compiler/compiler.ts

@@ -240,11 +240,11 @@ function blockKey(b: Blockly.Block) {
 }
 
 function setChildrenEnabled(block: Blockly.Block, enabled: boolean) {
-    block.setEnabled(enabled);
+    block.setDisabledReason(!enabled, "disabled");
     // propagate changes
     const children = block.getDescendants(false);
     for (const child of children) {
-        child.setEnabled(enabled);
+        child.setDisabledReason(!enabled, "disabled");
     }
 }
 
@@ -257,7 +257,7 @@ function updateDisabledBlocks(e: Environment, allBlocks: Blockly.Block[], topBlo
     }
 
     // unset disabled
-    allBlocks.forEach(b => b.setEnabled(true));
+    allBlocks.forEach(b => b.setDisabledReason(false, "disabled"));
 
     // update top blocks
     const events: pxt.Map<Blockly.Block> = {};

pxtblocks/copyPaste.ts

@@ -30,8 +30,8 @@ export function initCopyPaste() {
 function registerCopy() {
     const copyShortcut: Blockly.ShortcutRegistry.KeyboardShortcut = {
         name: Blockly.ShortcutItems.names.COPY,
-        preconditionFn(workspace) {
-            return oldCopy.preconditionFn(workspace);
+        preconditionFn(workspace, scope) {
+            return oldCopy.preconditionFn(workspace, scope);
         },
         callback: copy,
         // the registered shortcut from blockly isn't an array, it's some sort
@@ -44,17 +44,17 @@ function registerCopy() {
 function registerCut() {
     const cutShortcut: Blockly.ShortcutRegistry.KeyboardShortcut = {
         name: Blockly.ShortcutItems.names.CUT,
-        preconditionFn(workspace) {
-            return oldCut.preconditionFn(workspace);
+        preconditionFn(workspace, scope) {
+            return oldCut.preconditionFn(workspace, scope);
         },
-        callback(workspace, e, shortcut) {
+        callback(workspace, e, shortcut, scope) {
             const handler = getCopyPasteHandlers()?.cut;
 
             if (handler) {
                 return handler(workspace, e);
             }
 
-            return oldCut.callback(workspace, e, shortcut);
+            return oldCut.callback(workspace, e, shortcut, scope);
         },
         keyCodes: [oldCut.keyCodes[0], oldCut.keyCodes[1], oldCut.keyCodes[2]],
     };
@@ -65,8 +65,8 @@ function registerCut() {
 function registerPaste() {
     const pasteShortcut: Blockly.ShortcutRegistry.KeyboardShortcut = {
         name: Blockly.ShortcutItems.names.PASTE,
-        preconditionFn(workspace) {
-            return oldPaste.preconditionFn(workspace);
+        preconditionFn(workspace, scope) {
+            return oldPaste.preconditionFn(workspace, scope);
         },
         callback: paste,
         keyCodes: [oldPaste.keyCodes[0], oldPaste.keyCodes[1], oldPaste.keyCodes[2]],
@@ -168,22 +168,22 @@ function registerPasteContextMenu() {
     Blockly.ContextMenuRegistry.registry.register(pasteOption);
 }
 
-const copy = (workspace: Blockly.WorkspaceSvg, e: Event, shortcut?: Blockly.ShortcutRegistry.KeyboardShortcut) => {
+const copy = (workspace: Blockly.WorkspaceSvg, e: Event, shortcut?: Blockly.ShortcutRegistry.KeyboardShortcut, scope?: Blockly.ContextMenuRegistry.Scope) => {
     const handler = getCopyPasteHandlers()?.copy;
 
     if (handler) {
         return handler(workspace, e);
     }
 
-    return oldCopy.callback(workspace, e, shortcut);
+    return oldCopy.callback(workspace, e, shortcut, scope);
 }
 
-const paste = (workspace: Blockly.WorkspaceSvg, e: Event, shortcut?: Blockly.ShortcutRegistry.KeyboardShortcut) => {
+const paste = (workspace: Blockly.WorkspaceSvg, e: Event, shortcut?: Blockly.ShortcutRegistry.KeyboardShortcut, scope?: Blockly.ContextMenuRegistry.Scope) => {
     const handler = getCopyPasteHandlers()?.paste;
 
     if (handler) {
         return handler(workspace, e);
     }
 
-    return oldPaste.callback(workspace, e, shortcut);
+    return oldPaste.callback(workspace, e, shortcut, scope);
 }

pxtblocks/diff.ts

@@ -163,7 +163,7 @@ function diffWorkspaceNoEvents(oldWs: Blockly.Workspace, newWs: Blockly.Workspac
             done(b);
             const b2 = cloneIntoDiff(b);
             done(b2);
-            b2.setEnabled(false);
+            b2.setDisabledReason(true, "disabled");
         });
         logTodo('deleted top')
     }
@@ -272,7 +272,7 @@ function diffWorkspaceNoEvents(oldWs: Blockly.Workspace, newWs: Blockly.Workspac
     function stitch(b: Blockly.Block) {
         log(`stitching ${b.toDevString()}->${dids[b.id]}`)
         const wb = ws.getBlockById(dids[b.id]);
-        wb.setEnabled(false);
+        wb.setDisabledReason(true, "disabled");
         markUsed(wb);
         done(wb);
         // connect previous connection to delted or existing block

pxtblocks/fields/field_ledmatrix.ts

@@ -46,6 +46,7 @@ export class FieldMatrix extends Blockly.Field implements FieldCustom {
 
     private currentDragState_: boolean;
     private selected: number[] | undefined = undefined;
+    private returnEphemeralFocus: Blockly.ReturnEphemeralFocus | undefined = undefined;
 
     constructor(text: string, params: any, validator?: Blockly.FieldValidator) {
         super(text, validator);
@@ -143,6 +144,7 @@ export class FieldMatrix extends Blockly.Field implements FieldCustom {
             }
             case "Escape": {
                 (this.sourceBlock_.workspace as Blockly.WorkspaceSvg).markFocused();
+                this.returnEphemeralFocus?.()
                 return;
             }
             default: {
@@ -190,7 +192,7 @@ export class FieldMatrix extends Blockly.Field implements FieldCustom {
         this.selected = [0, 0];
         this.setFocusIndicator(this.cells[0][0], this.cellState[0][0])
         this.elt.setAttribute('aria-activedescendant', this.sourceBlock_.id + ":00");
-        this.elt.focus();
+        this.returnEphemeralFocus = Blockly.getFocusManager().takeEphemeralFocus(this.elt);
     }
 
     private initMatrix() {
@@ -237,6 +239,7 @@ export class FieldMatrix extends Blockly.Field implements FieldCustom {
                 }
             }
 
+            this.fieldGroup_.classList.add("blocklyFieldLedMatrixGroup");
             this.fieldGroup_.replaceChild(this.elt, this.fieldGroup_.firstChild);
             if (!this.sourceBlock_.isInFlyout) {
                 this.elt.addEventListener("keydown", this.keyHandler.bind(this));
@@ -509,6 +512,11 @@ function removeQuotes(str: string) {
 }
 
 Blockly.Css.register(`
+.blocklyFieldLedMatrixGroup.blocklyActiveFocus {
+    outline: var(--blockly-selection-width) solid var(--blockly-active-node-color);
+    border-radius: 3px;
+}
+
 .blocklyMatrix:focus-visible {
     outline: none;
 }

pxtblocks/fields/field_textdropdown.ts

@@ -1,7 +1,7 @@
 /// <reference path="../../built/pxtlib.d.ts" />
 
 import * as Blockly from "blockly";
-import { clearDropDownDiv, FieldCustom, FieldCustomOptions } from "./field_utils";
+import { clearDropDownDiv, FieldCustom, FieldCustomOptions, isImageProperties } from "./field_utils";
 
 export interface FieldTextDropdownOptions extends FieldCustomOptions {
     values?: string;
@@ -140,11 +140,11 @@ export class BaseFieldTextDropdown extends Blockly.FieldTextInput {
         for (let i = 0; i < options.length; i++) {
             const [label, value] = options[i];
             const content = (() => {
-                if (typeof label === 'object') {
+                if (isImageProperties(label)) {
                     // Convert ImageProperties to an HTMLImageElement.
-                    const image = new Image(label['width'], label['height']);
-                    image.src = label['src'];
-                    image.alt = label['alt'] || '';
+                    const image = new Image(label.width, label.height);
+                    image.src = label.src;
+                    image.alt = label.alt;
                     return image;
                 }
                 return label;
@@ -308,7 +308,7 @@ function validateOptions(options: Blockly.MenuOption[]) {
         } else if (
             tuple[0] &&
             typeof tuple[0] !== 'string' &&
-            typeof tuple[0].src !== 'string'
+            !isImageProperties(tuple[0])
         ) {
             foundError = true;
             pxt.error(

pxtblocks/fields/field_utils.ts

@@ -699,4 +699,25 @@ function inflateJRes(jres: pxt.Map<pxt.JRes | string>): pxt.Map<pxt.JRes> {
 export function clearDropDownDiv() {
     Blockly.DropDownDiv.clearContent();
     Blockly.DropDownDiv.getContentDiv().style.height = "";
+}
+
+/**
+ * Returns whether or not an object conforms to the ImageProperties interface.
+ *
+ * @param obj The object to test.
+ * @returns True if the object conforms to ImageProperties, otherwise false.
+ */
+export function isImageProperties(obj: any): obj is Blockly.ImageProperties {
+  return (
+    obj &&
+    typeof obj === 'object' &&
+    'src' in obj &&
+    typeof obj.src === 'string' &&
+    'alt' in obj &&
+    typeof obj.alt === 'string' &&
+    'width' in obj &&
+    typeof obj.width === 'number' &&
+    'height' in obj &&
+    typeof obj.height === 'number'
+  );
 }

pxtblocks/loader.ts

@@ -685,7 +685,7 @@ function initComments() {
 
 function initTooltip() {
     const renderTip = (el: any) => {
-        if (el.disabled)
+        if (el.hasDisabledReason?.("disabled"))
             return lf("This block is disabled and will not run. Attach this block to an event to enable it.")
         let tip = el.tooltip;
         while (typeof tip === "function") {

pxtblocks/plugins/comments/bubble.ts

@@ -7,7 +7,7 @@ import dom = Blockly.utils.dom;
  * bubble, where it has a "tail" that points to the block, and a "head" that
  * displays arbitrary svg elements.
  */
-export abstract class Bubble implements Blockly.IDeletable {
+export abstract class Bubble implements Blockly.IDeletable, Blockly.IBubble, Blockly.ISelectable {
     /** The width of the border around the bubble. */
     static readonly BORDER_WIDTH = 0;
 
@@ -639,6 +639,32 @@ export abstract class Bubble implements Blockly.IDeletable {
         // Bubbles don't have any visual for being selected.
     }
 
+    /** See IFocusableNode.getFocusableElement. */
+    getFocusableElement(): HTMLElement | SVGElement {
+      return this.svgRoot;
+    }
+
+    /** See IFocusableNode.getFocusableTree. */
+    getFocusableTree(): Blockly.IFocusableTree {
+        return this.workspace;
+    }
+
+    /** See IFocusableNode.onNodeFocus. */
+    onNodeFocus(): void {
+        this.select();
+        this.bringToFront();
+    }
+
+    /** See IFocusableNode.onNodeBlur. */
+    onNodeBlur(): void {
+        this.unselect();
+    }
+
+    /** See IFocusableNode.canBeFocused. */
+    canBeFocused(): boolean {
+        return true;
+    }
+
     contentTop() {
         const topBarSize = this.topBar.getBBox();
         return Bubble.BORDER_WIDTH + topBarSize.height

pxtblocks/plugins/flyout/buttonFlyoutInflater.ts

@@ -22,6 +22,6 @@ export class ButtonFlyoutInflater extends Blockly.ButtonFlyoutInflater {
         );
         button.show();
 
-        return new Blockly.FlyoutItem(button, BUTTON_TYPE, true);
+        return new Blockly.FlyoutItem(button, BUTTON_TYPE);
     }
 }