Updating to Blockly v11

gulpfile.js

@@ -440,6 +440,10 @@ const buildSVGIcons = () => {
     })
 }
 
+const copyBlocklyMedia = () =>
+    gulp.src("node_modules/blockly/media/*")
+    .pipe(gulp.dest("webapp/public/blockly/media"))
+
 
 
 /********************************************************
@@ -729,7 +733,7 @@ function getMochaExecutable() {
 const buildAll = gulp.series(
     updatestrings,
     maybeUpdateWebappStrings(),
-    copyTypescriptServices,
+    gulp.parallel(copyTypescriptServices, copyBlocklyMedia),
     gulp.parallel(pxtlib, pxtweb),
     gulp.parallel(pxtcompiler, pxtsim, backendutils),
     pxtpy,

package.json

@@ -61,8 +61,9 @@
     "npm": ">=8.0.0"
   },
   "dependencies": {
-    "@blockly/keyboard-navigation": "0.5.4",
-    "@blockly/plugin-workspace-search": "8.0.9",
+    "@blockly/field-colour": "5.0.5",
+    "@blockly/keyboard-navigation": "0.6.5",
+    "@blockly/plugin-workspace-search": "9.0.5",
     "@crowdin/crowdin-api-client": "^1.33.0",
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@microsoft/applicationinsights-web": "^2.8.11",
@@ -71,8 +72,8 @@
     "@zip.js/zip.js": "2.4.20",
     "adm-zip": "^0.5.12",
     "axios": "^1.6.8",
-    "blockly": "10.4.1",
-    "browserify": "16.2.3",
+    "blockly": "11.1.1",
+    "browserify": "17.0.0",
     "chai": "^3.5.0",
     "cssnano": "4.1.10",
     "dashjs": "^4.4.0",

pxtblocks/blockDragger.ts

@@ -1,12 +1,9 @@
 import * as Blockly from "blockly";
-import { DuplicateOnDragBlockDragger } from "./plugins/duplicateOnDrag";
 
-/**
- * The following patch to blockly is to add the Trash icon on top of the toolbox,
- * the trash icon should only show when a user drags a block that is already in the workspace.
- */
-export class BlockDragger extends DuplicateOnDragBlockDragger {
-    drag(e: PointerEvent, currentDragDeltaXY: Blockly.utils.Coordinate): void {
+export class BlockDragger extends Blockly.dragging.Dragger {
+    onDrag(e: PointerEvent, totalDelta: Blockly.utils.Coordinate): void {
+        super.onDrag(e, totalDelta);
+
         const blocklyToolboxDiv = document.getElementsByClassName('blocklyToolboxDiv')[0] as HTMLElement;
         const blocklyTreeRoot = document.getElementsByClassName('blocklyTreeRoot')[0] as HTMLElement
             || document.getElementsByClassName('blocklyFlyout')[0] as HTMLElement;
@@ -29,11 +26,11 @@ export class BlockDragger extends DuplicateOnDragBlockDragger {
                 if (blocklyToolboxDiv) pxt.BrowserUtils.removeClass(blocklyToolboxDiv, 'blocklyToolboxDeleting');
             }
         }
-        return super.drag(e, currentDragDeltaXY);
     }
 
-    endDrag(e: PointerEvent, currentDragDeltaXY: Blockly.utils.Coordinate): void {
-        super.endDrag(e, currentDragDeltaXY);
+    onDragEnd(e: PointerEvent): void {
+        super.onDragEnd(e);
+
         const blocklyToolboxDiv = document.getElementsByClassName('blocklyToolboxDiv')[0] as HTMLElement;
         const blocklyTreeRoot = document.getElementsByClassName('blocklyTreeRoot')[0] as HTMLElement
             || document.getElementsByClassName('blocklyFlyout')[0] as HTMLElement;

pxtblocks/compiler/compiler.ts

@@ -21,8 +21,8 @@ interface Rect {
 }
 
 interface CommentMap {
-    orphans: Blockly.WorkspaceComment[];
-    idToComments: pxt.Map<Blockly.WorkspaceComment[]>;
+    orphans: Blockly.comments.RenderedWorkspaceComment[];
+    idToComments: pxt.Map<Blockly.comments.RenderedWorkspaceComment[]>;
 }
 
 
@@ -83,7 +83,7 @@ function compileWorkspace(e: Environment, w: Blockly.Workspace, blockInfo: pxtc.
         // compile workspace comments, add them to the top
         const topComments = w.getTopComments(true);
         const commentMap = groupWorkspaceComments(topblocks as Blockly.BlockSvg[],
-            topComments as Blockly.WorkspaceCommentSvg[]);
+            topComments as Blockly.comments.RenderedWorkspaceComment[]);
 
         commentMap.orphans.forEach(comment => append(stmtsMain, compileWorkspaceComment(comment).children));
 
@@ -220,7 +220,7 @@ function blockKey(b: Blockly.Block) {
             }
         }
 
-        if (input.type === Blockly.inputTypes.VALUE) {
+        if (input.type === Blockly.inputs.inputTypes.VALUE) {
             if (input.connection.targetBlock()) {
                 inputs.push(blockKey(input.connection.targetBlock()));
             }
@@ -842,7 +842,7 @@ function mkVariableDeclaration(v: VarInfo, blockInfo: pxtc.BlocksInfo) {
     return pxt.blocks.mkStmt(pxt.blocks.mkText("let " + v.escapedName + tp + " = "), defl)
 }
 
-function groupWorkspaceComments(blocks: Blockly.BlockSvg[], comments: Blockly.WorkspaceCommentSvg[]): CommentMap {
+function groupWorkspaceComments(blocks: Blockly.BlockSvg[], comments: Blockly.comments.RenderedWorkspaceComment[]): CommentMap {
     if (!blocks.length || blocks.some(b => !b.rendered)) {
         return {
             orphans: comments,
@@ -869,7 +869,7 @@ function groupWorkspaceComments(blocks: Blockly.BlockSvg[], comments: Blockly.Wo
     const radius = 20;
     for (const comment of comments) {
         const bounds = comment.getBoundingRectangle();
-        const size = comment.getHeightWidth();
+        const size = comment.getSize();
 
         const x = bounds.left;
         const y = bounds.top;
@@ -1277,8 +1277,8 @@ function compileStdCall(e: Environment, b: Blockly.Block, func: StdFunc, comment
     }
 }
 
-function compileWorkspaceComment(c: Blockly.WorkspaceComment): pxt.blocks.JsNode {
-    const content = c.getContent();
+function compileWorkspaceComment(c: Blockly.comments.RenderedWorkspaceComment): pxt.blocks.JsNode {
+    const content = c.getText();
     return pxt.blocks.H.mkMultiComment(content.trim());
 }
 

pxtblocks/compiler/environment.ts

@@ -113,7 +113,7 @@ export interface VarInfo {
     isFunctionParameter?: boolean;
 }
 
-export interface GrayBlock extends Blockly.Block {
+export interface GrayBlock extends Blockly.BlockSvg {
     setPythonEnabled(enabled: boolean): void;
 }
 

pxtblocks/compiler/util.ts

@@ -4,7 +4,7 @@ import { MutatingBlock } from "../legacyMutations";
 
 
 export function forEachChildExpression(block: Blockly.Block, cb: (block: Blockly.Block) => void, recursive = false) {
-    block.inputList.filter(i => i.type === Blockly.inputTypes.VALUE).forEach(i => {
+    block.inputList.filter(i => i.type === Blockly.inputs.inputTypes.VALUE).forEach(i => {
         if (i.connection && i.connection.targetBlock()) {
             cb(i.connection.targetBlock());
             if (recursive) {
@@ -15,7 +15,7 @@ export function forEachChildExpression(block: Blockly.Block, cb: (block: Blockly
 }
 
 export function forEachStatementInput(block: Blockly.Block, cb: (block: Blockly.Block) => void) {
-    block.inputList.filter(i => i.type === Blockly.inputTypes.STATEMENT).forEach(i => {
+    block.inputList.filter(i => i.type === Blockly.inputs.inputTypes.STATEMENT).forEach(i => {
         if (i.connection && i.connection.targetBlock()) {
             cb(i.connection.targetBlock());
         }

pxtblocks/compiler/variables.ts

@@ -275,5 +275,5 @@ function escapeVariables(current: Scope, e: Environment) {
 }
 
 function hasStatementInput(block: Blockly.Block) {
-    return block.inputList.some(i => i.type === Blockly.inputTypes.STATEMENT);
+    return block.inputList.some(i => i.type === Blockly.inputs.inputTypes.STATEMENT);
 }

pxtblocks/contextMenu/contextMenu.ts

@@ -28,9 +28,11 @@ export function initContextMenu() {
 }
 
 export function setupWorkspaceContextMenu(workspace: Blockly.WorkspaceSvg) {
+    Blockly.ContextMenuItems.registerCommentOptions();
     workspace.configureContextMenu = (options, e) => {
         if (workspace.options.comments && !workspace.options.readOnly) {
-            options.unshift(Blockly.ContextMenu.workspaceCommentOption(workspace, e))
+            // options.unshift(Blockly.ContextMenu.workspaceCommentOption(workspace, e))
+
         }
 
         onWorkspaceContextMenu(workspace, options);

pxtblocks/diff.ts

@@ -324,7 +324,7 @@ function diffWorkspaceNoEvents(oldWs: Blockly.Workspace, newWs: Blockly.Workspac
     }
 
     function forceRender(b: Blockly.Block) {
-        b.rendered = false;
+        // b.rendered = false;
         b.inputList.forEach(i => i.fieldRow.forEach(f => {
             f.init();
 
@@ -404,7 +404,7 @@ function diffWorkspaceNoEvents(oldWs: Blockly.Workspace, newWs: Blockly.Workspac
         if (options.statementsOnly) {
             // mark all nested reporters as unmodified
             (b.inputList || [])
-                .map(input => input.type == Blockly.inputTypes.VALUE && input.connection && input.connection.targetBlock())
+                .map(input => input.type == Blockly.inputs.inputTypes.VALUE && input.connection && input.connection.targetBlock())
                 .filter(argBlock => !!argBlock)
                 .forEach(argBlock => unmodified(argBlock))
         }

pxtblocks/fields/field_colour.ts

@@ -3,6 +3,8 @@
 import * as Blockly from "blockly";
 import { FieldCustom, FieldCustomOptions } from "./field_utils";
 
+import { FieldColour } from "@blockly/field-colour";
+
 /**
      * The value modes:
      *     hex - Outputs an HTML color string: "#ffffff" (with quotes)
@@ -18,7 +20,7 @@ export interface FieldColourNumberOptions extends FieldCustomOptions {
     valueMode?: FieldColourValueMode;
 }
 
-export class FieldColorNumber extends Blockly.FieldColour implements FieldCustom {
+export class FieldColorNumber extends FieldColour implements FieldCustom {
     public isFieldCustom_ = true;
 
     protected colour_: string;
@@ -48,7 +50,7 @@ export class FieldColorNumber extends Blockly.FieldColour implements FieldCustom
         if (params.valueMode) this.valueMode_ = params.valueMode;
     }
 
-    setColours(colours: string[], titles?: string[]): Blockly.FieldColour {
+    setColours(colours: string[], titles?: string[]): FieldColour {
         const s = super.setColours(colours, titles);
         this.colours_ = colours;
         return s;

pxtblocks/help.ts

@@ -5,6 +5,7 @@ import * as Blockly from "blockly";
 import { cleanOuterHTML, getFirstChildWithAttr } from "./xml";
 import { promptTranslateBlock } from "./external";
 import { createToolboxBlock } from "./toolbox";
+import { DuplicateOnDragStrategy, setDuplicateOnDragStrategy } from "./plugins/duplicateOnDrag";
 
 export function setBuiltinHelpInfo(block: any, id: string) {
     const info = pxt.blocks.getBlockDefinition(id);
@@ -16,15 +17,17 @@ export function installBuiltinHelpInfo(id: string) {
     installHelpResources(id, info.name, info.tooltip, info.url, pxt.toolbox.getNamespaceColor(info.category));
 }
 
-export function setHelpResources(block: any, id: string, name: string, tooltip: any, url: string, colour: string, colourSecondary?: string, colourTertiary?: string, undeletable?: boolean) {
+export function setHelpResources(block: Blockly.BlockSvg, id: string, name: string, tooltip: any, url: string, colour: string, colourSecondary?: string, colourTertiary?: string, undeletable?: boolean) {
     if (tooltip && (typeof tooltip === "string" || typeof tooltip === "function")) block.setTooltip(tooltip);
     if (url) block.setHelpUrl(url);
-    if (colour) block.setColour(colour, colourSecondary, colourTertiary);
+    if (colour) block.setColour(colour);
     if (undeletable) block.setDeletable(false);
 
+    setDuplicateOnDragStrategy(block);
+
     let tb = document.getElementById('blocklyToolboxDefinition');
     let xml: HTMLElement = tb ? getFirstChildWithAttr(tb, "block", "type", id) as HTMLElement : undefined;
-    block.codeCard = <pxt.CodeCard>{
+    (block as any).codeCard = <pxt.CodeCard>{
         header: name,
         name: name,
         software: 1,

pxtblocks/index.ts

@@ -6,6 +6,7 @@ export * from "./plugins/text";
 export * from "./plugins/renderer";
 export * from "./plugins/flyout";
 export * from "./plugins/newVariableField";
+export * from "./plugins/comments";
 export * from "./compiler/compiler";
 export * from "./compiler/environment";
 export * from "./loader";

pxtblocks/layout.ts

@@ -67,7 +67,7 @@ declare function unescape(escapeUri: string): string;
  * of blocks / comments to get as getTopBlock(true)/getTopComment(true)
  */
 export function splitSvg(svg: SVGSVGElement, ws: Blockly.WorkspaceSvg, emPixels: number = 18): Element {
-    const comments = ws.getTopComments(true) as Blockly.WorkspaceCommentSvg[];
+    const comments = ws.getTopComments(true) as Blockly.comments.RenderedWorkspaceComment[];
     const blocks = ws.getTopBlocks(true) as Blockly.BlockSvg[];
     // don't split for a single block
     if (comments.length + blocks.length < 2)
@@ -116,7 +116,7 @@ export function splitSvg(svg: SVGSVGElement, ws: Blockly.WorkspaceSvg, emPixels:
     }
 
     comments.forEach((comment, commenti) => extract('blocklyBubbleCanvas', 'blocklyBlockCanvas',
-        commenti, comment.getHeightWidth(), { x: 0, y: 0 }, "blocklyComment"));
+        commenti, comment.getSize(), { x: 0, y: 0 }, "blocklyComment"));
     blocks.forEach((block, blocki) => {
         const size = block.getHeightWidth();
         const translate = { x: 0, y: 0 };
@@ -132,10 +132,10 @@ export function splitSvg(svg: SVGSVGElement, ws: Blockly.WorkspaceSvg, emPixels:
 
 export function verticalAlign(ws: Blockly.WorkspaceSvg, emPixels: number) {
     let y = 0
-    let comments = ws.getTopComments(true) as Blockly.WorkspaceCommentSvg[];
+    let comments = ws.getTopComments(true) as Blockly.comments.RenderedWorkspaceComment[];
     comments.forEach(comment => {
         comment.moveBy(0, y)
-        y += comment.getHeightWidth().height
+        y += comment.getSize().height
         y += emPixels; //buffer
     })
     let blocks = ws.getTopBlocks(true) as Blockly.BlockSvg[];
@@ -165,15 +165,15 @@ export function flow(ws: Blockly.WorkspaceSvg, opts?: FlowOptions) {
 
             // Only use the width if in portrait, otherwise the blocks are too spread out
             if (metrics.viewHeight > metrics.viewWidth) {
-                flowBlocks(ws.getTopComments(true) as Blockly.WorkspaceCommentSvg[], ws.getTopBlocks(true) as Blockly.BlockSvg[], undefined, metrics.viewWidth)
+                flowBlocks(ws.getTopComments(true) as Blockly.comments.RenderedWorkspaceComment[], ws.getTopBlocks(true) as Blockly.BlockSvg[], undefined, metrics.viewWidth)
                 ws.scroll(marginx, marginy);
                 return;
             }
         }
-        flowBlocks(ws.getTopComments(true) as Blockly.WorkspaceCommentSvg[], ws.getTopBlocks(true) as Blockly.BlockSvg[], opts.ratio);
+        flowBlocks(ws.getTopComments(true) as Blockly.comments.RenderedWorkspaceComment[], ws.getTopBlocks(true) as Blockly.BlockSvg[], opts.ratio);
     }
     else {
-        flowBlocks(ws.getTopComments(true) as Blockly.WorkspaceCommentSvg[], ws.getTopBlocks(true) as Blockly.BlockSvg[]);
+        flowBlocks(ws.getTopComments(true) as Blockly.comments.RenderedWorkspaceComment[], ws.getTopBlocks(true) as Blockly.BlockSvg[]);
     }
     ws.scroll(marginx, marginy);
 }
@@ -399,7 +399,7 @@ function convertIconsToPngAsync(xsg: Document): Promise<void> {
 }
 
 interface Formattable {
-    value: Blockly.BlockSvg | Blockly.WorkspaceCommentSvg;
+    value: Blockly.BlockSvg | Blockly.comments.RenderedWorkspaceComment;
     children?: Formattable[];
     width: number;
     height: number;
@@ -409,15 +409,15 @@ interface Formattable {
     y?: number;
 }
 
-function flowBlocks(comments: Blockly.WorkspaceCommentSvg[], blocks: Blockly.BlockSvg[], ratio: number = 1.62, maxWidth?: number) {
+function flowBlocks(comments: Blockly.comments.RenderedWorkspaceComment[], blocks: Blockly.BlockSvg[], ratio: number = 1.62, maxWidth?: number) {
     // Margin between blocks and their comments
     const innerGroupMargin = 13;
 
     // Margin between groups of blocks and comments
     const outerGroupMargin = 45;
 
     const groups: Formattable[] = [];
-    const commentMap: pxt.Map<Blockly.WorkspaceCommentSvg> = {};
+    const commentMap: pxt.Map<Blockly.comments.RenderedWorkspaceComment> = {};
 
     comments.forEach(comment => {
         const ref: string = (comment as any).data;
@@ -562,7 +562,7 @@ function flowBlocks(comments: Blockly.WorkspaceCommentSvg[], blocks: Blockly.Blo
     }
 }
 
-function formattable(entity: Blockly.BlockSvg | Blockly.WorkspaceCommentSvg): Formattable {
-    const hw = entity.getHeightWidth();
+function formattable(entity: Blockly.BlockSvg | Blockly.comments.RenderedWorkspaceComment): Formattable {
+    const hw = entity instanceof Blockly.BlockSvg ? entity.getHeightWidth() : entity.getSize();
     return { value: entity, height: hw.height, width: hw.width }
 }

pxtblocks/loader.ts

@@ -25,6 +25,7 @@ import { initContextMenu } from "./contextMenu";
 import { renderCodeCard } from "./codecardRenderer";
 import { applyMonkeyPatches } from "./monkeyPatches";
 import { FieldDropdown } from "./fields/field_dropdown";
+import { setDraggableShadowBlocks, setDuplicateOnDragStrategy } from "./plugins/duplicateOnDrag";
 
 
 interface BlockDefinition {
@@ -101,8 +102,7 @@ export function blockSymbol(type: string): pxtc.SymbolInfo {
 export function injectBlocks(blockInfo: pxtc.BlocksInfo): pxtc.SymbolInfo[] {
     cachedBlockInfo = blockInfo;
 
-    // FIXME (riknoll): This relies on Blockly's custom dragging support (coming in v11)
-    // Blockly.pxtBlocklyUtils.whitelistDraggableBlockTypes(blockInfo.blocks.filter(fn => fn.attributes.duplicateShadowOnDrag).map(fn => fn.attributes.blockId));
+   setDraggableShadowBlocks(blockInfo.blocks.filter(fn => fn.attributes.duplicateShadowOnDrag).map(fn => fn.attributes.blockId));
 
     // inject Blockly with all block definitions
     return blockInfo.blocks
@@ -217,6 +217,8 @@ function initBlock(block: Blockly.Block, info: pxtc.BlocksInfo, fn: pxtc.SymbolI
     const helpUrl = pxt.blocks.getHelpUrl(fn);
     if (helpUrl) block.setHelpUrl(helpUrl)
 
+    setDuplicateOnDragStrategy(block);
+
     block.setColour(typeof color === "string" ? pxt.toolbox.getAccessibleBackground(color) : color);
     let blockShape = provider.SHAPES.ROUND;
     if (fn.retType == "boolean") {
@@ -508,7 +510,7 @@ function initBlock(block: Blockly.Block, info: pxtc.BlocksInfo, fn: pxtc.SymbolI
                 if (hasInput(inputName)) return;
 
                 input = block.appendValueInput(inputName);
-                input.setAlign(Blockly.ALIGN_LEFT);
+                input.setAlign(Blockly.inputs.Align.LEFT);
             }
             else if (expanded) {
                 const prefix = hasParameter ? optionalInputWithFieldPrefix : optionalDummyInputPrefix;