[Stable 12.2] Cherry pick hotfix changes to stable 12.2 (#11126)

* put imported tiles into a custom tilemap gallery (#11112)

* allow users to delete project descriptions (#11113)

* fix font for animation icon in animation field editor (#11114)

* copilot generated: add media queries for print view (#11110)

* fix tile gallery not showing up when editing tile (#11115)

* prevent debugger toolbox from scrolling horizontally (#11120)

* Fix blockly dropdown scroll and media not being copied properly (#11119)

* add scroll to blockly dropdown content

* fix piping of blockly media files

* keep the error list collapsed if collapsed by user (#11121)

* add monkey patch workaround for blockly focus issue when deleting block (#11122)

* bring back the old mixer play instructions (#11123)

* fix missing gallery, don't import gallery tiles into my tiles, fix null listener (#11125)

---------

Co-authored-by: Sarah Rietkerk <49178322+srietkerk@users.noreply.github.com>

Author: riknoll

gulpfile.js

@@ -544,7 +544,7 @@ const buildSVGIcons = () => {
 }
 
 const copyBlocklyMedia = () =>
-    gulp.src("node_modules/blockly/media/*")
+    gulp.src("node_modules/blockly/media/*", { encoding: false })
     .pipe(gulp.dest("webapp/public/blockly/media"))
 
 

localtypings/pxteditor.d.ts

@@ -820,6 +820,7 @@ declare namespace pxt.editor {
         simSerialActive?: boolean;
         deviceSerialActive?: boolean;
         errorListState?: ErrorListState;
+        errorListCollapsedByUser?: boolean;
         screenshoting?: boolean;
         extensionsVisible?: boolean;
         isMultiplayerGame?: boolean; // Arcade: Does the current project contain multiplayer blocks?

pxtblocks/fields/field_tileset.ts

@@ -289,17 +289,20 @@ export class FieldTileset extends FieldImages implements FieldCustom {
     }
 
     protected updateAssetListener() {
+        if (!this.assetChangeListener) {
+            this.assetChangeListener = () => {
+                this.doValueUpdate_(this.getValue());
+                this.forceRerender();
+            };
+        }
         const project = pxt.react.getTilemapProject();
         project.removeChangeListener(pxt.AssetType.Tile, this.assetChangeListener);
         if (this.selectedOption_) {
             project.addChangeListener(this.selectedOption_[2], this.assetChangeListener);
         }
     }
 
-    protected assetChangeListener = () => {
-       this.doValueUpdate_(this.getValue());
-       this.forceRerender();
-    }
+    protected assetChangeListener: () => void;
 
     saveState(_doFullSerialization?: boolean) {
         let asset = this.localTile || this.selectedOption_?.[2];

pxtblocks/monkeyPatches/blockSvg.ts

@@ -20,4 +20,57 @@ export function monkeyPatchBlockSvg() {
             }
         }
     }
+
+    // This is duplicated exactly from Blockly.BlockSvg.prototype.dispose,
+    // except the radius of the connection search is increased to make
+    // it more likely to focus a nearby block instead of the workspace
+    // when a block is deleted. See https://github.com/RaspberryPiFoundation/blockly/issues/9585
+    Blockly.BlockSvg.prototype.dispose = function (this: Blockly.BlockSvg, healStack: boolean, animate: boolean) {
+        this.disposing = true;
+
+        Blockly.Tooltip.dispose();
+        Blockly.ContextMenu.hide();
+
+        // If this block (or a descendant) was focused, focus its parent or
+        // workspace instead.
+        const focusManager = Blockly.getFocusManager();
+        if (
+            this.getSvgRoot().contains(
+                focusManager.getFocusedNode()?.getFocusableElement() ?? null,
+            )
+        ) {
+            let parent: Blockly.BlockSvg | undefined | null = this.getParent();
+            if (!parent) {
+                const connection = this.outputConnection ?? this.previousConnection;
+                if (connection) {
+                    // By default, Blockly searches for nearby connections within a radius of 0
+                    // to only get blocks that are touching. As a result, it usually returns nothing
+                    // and focuses the root of the workspace. Instead, we use the workspace dimensions
+                    // to try and find a block that's on screen
+                    const workspace = this.workspace;
+                    const viewMetrics = workspace?.getMetrics();
+                    const radius = viewMetrics ? Math.max(viewMetrics.viewWidth, viewMetrics.viewHeight) / 2: 0;
+
+                    const targetConnection = connection.closest(
+                        radius,
+                        new Blockly.utils.Coordinate(0, 0),
+                    ).connection;
+                    parent = targetConnection?.getSourceBlock();
+                }
+            }
+            if (parent) {
+                focusManager.focusNode(parent);
+            } else {
+                setTimeout(() => focusManager.focusTree(this.workspace), 0);
+            }
+        }
+
+        if (animate) {
+            this.unplug(healStack);
+            Blockly.blockAnimations.disposeUiEffect(this);
+        }
+
+        Blockly.Block.prototype.dispose.call(this, !!healStack);
+        Blockly.utils.dom.removeNode(this.getSvgRoot());
+    }
 }

pxtlib/tilemap.ts

@@ -1589,6 +1589,7 @@ namespace pxt {
                 }
                 if (entry.tilemapTile) {
                     tags.push("tile");
+                    tags.push("category-" + namespaceName)
                 }
             }
 

pxtsim/sound/audioContextManager.ts

@@ -187,25 +187,16 @@ namespace pxsim.AudioContextManager {
     export async function playInstructionsAsync(instructions: Uint8Array, isCancelled?: () => boolean, onPull?: SoundPreviewCallback) {
         soundEventCallback?.("playinstructions", instructions);
 
-        await AudioWorkletSource.initializeWorklet(context());
+        const channel = new PlayInstructionsSource(context(), destination);
 
-        let channel: AudioWorkletSource;
         let finished = false;
 
         if (onPull) {
-            channel = new AudioWorkletSource(context(), destination);
-
-            initOscilloscope(onPull, channel.analyser, () => finished || isCancelled?.());
-        }
-        else {
-            channel = AudioWorkletSource.getAvailableSource();
-
-            if (!channel) {
-                channel = new AudioWorkletSource(context(), destination);
-            }
+            initOscilloscope(onPull, channel.analyser, () => finished || isCancelled?.() || channel.isDisposed());
         }
 
         await channel.playInstructionsAsync(instructions, isCancelled);
+        channel.dispose();
 
         finished = true;
     }