From be86d7cba1c7cb50a87ac0a426c4e66e8195b0fc Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Fri, 13 Sep 2024 15:18:38 -0700
Subject: [PATCH 01/31] In progress still getting things working...

---
 localtypings/pxteditor.d.ts                   | 28 +++++++--
 pxteditor/editorcontroller.ts                 | 10 ++-
 pxtservices/editorDriver.ts                   | 12 ++++
 .../components/CriteriaInstanceDisplay.tsx    | 27 +++++---
 .../src/services/makecodeEditorService.ts     |  5 ++
 webapp/src/app.tsx                            | 23 ++++++-
 webapp/src/monacoFlyout.tsx                   | 14 ++---
 webapp/src/monacopyhelper.ts                  | 61 ++++++++++++++++++-
 8 files changed, 155 insertions(+), 25 deletions(-)

diff --git a/localtypings/pxteditor.d.ts b/localtypings/pxteditor.d.ts
index 7ba3c537a68e..01bf1b191d19 100644
--- a/localtypings/pxteditor.d.ts
+++ b/localtypings/pxteditor.d.ts
@@ -75,6 +75,7 @@ declare namespace pxt.editor {
         | "convertcloudprojectstolocal"
         | "setlanguagerestriction"
         | "gettoolboxcategories"
+        | "getreadableblockname"
 
         | "toggletrace" // EditorMessageToggleTraceRequest
         | "togglehighcontrast"
@@ -453,14 +454,23 @@ declare namespace pxt.editor {
         advanced?: boolean;
     }
 
-    export interface EditorMessageServiceWorkerRegisteredRequest extends EditorMessageRequest {
-        action: "serviceworkerregistered";
-    }
-
     export interface EditorMessageGetToolboxCategoriesResponse {
         categories: pxt.editor.ToolboxCategoryDefinition[];
     }
 
+    export interface EditorMessageGetBlockReadableNameRequest extends EditorMessageRequest {
+        action: "getreadableblockname";
+        blockId: string;
+    }
+
+    export interface EditorMessageGetBlockReadableNameResponse {
+        readableName: pxt.editor.ReadableBlockName | undefined;
+    }
+
+    export interface EditorMessageServiceWorkerRegisteredRequest extends EditorMessageRequest {
+        action: "serviceworkerregistered";
+    }
+
     export interface DataStreams<T> {
         console?: T;
         messages?: T;
@@ -997,6 +1007,7 @@ declare namespace pxt.editor {
         // getBlocks(): Blockly.Block[];
         getBlocks(): any[];
         getToolboxCategories(advanced?: boolean): pxt.editor.EditorMessageGetToolboxCategoriesResponse;
+        getReadableBlockName(blockId: string): pxt.editor.ReadableBlockName | undefined;
 
         toggleHighContrast(): void;
         setHighContrast(on: boolean): void;
@@ -1264,6 +1275,15 @@ declare namespace pxt.editor {
         blockId?: string;
     }
 
+    export interface ReadableBlockName {
+        parts: ReadableBlockNamePart[];
+    }
+
+    export interface ReadableBlockNamePart {
+        kind: "label" | "break" | "param",
+        content?: string,
+    }
+
     interface BaseAssetEditorRequest {
         id?: number;
         files: pxt.Map<string>;
diff --git a/pxteditor/editorcontroller.ts b/pxteditor/editorcontroller.ts
index a1bcf94afe0a..0b697d716eca 100644
--- a/pxteditor/editorcontroller.ts
+++ b/pxteditor/editorcontroller.ts
@@ -202,13 +202,21 @@ case "renderxml": {
                                         resp = results;
                                     });
                             }
-case "gettoolboxcategories": {
+                            case "gettoolboxcategories": {
                                 const msg = data as pxt.editor.EditorMessageGetToolboxCategoriesRequest;
                                 return Promise.resolve()
                                     .then(() => {
                                         resp = projectView.getToolboxCategories(msg.advanced);
                                     });
                             }
+                            case "getreadableblockname": {
+                                const msg = data as pxt.editor.EditorMessageGetBlockReadableNameRequest;
+                                return Promise.resolve()
+                                    .then(() => {
+                                        const readableName = projectView.getReadableBlockName(msg.blockId);
+                                        resp = { readableName } as pxt.editor.EditorMessageGetBlockReadableNameResponse;
+                                    });
+                            }
                             case "renderpython": {
                                 const rendermsg = data as pxt.editor.EditorMessageRenderPythonRequest;
                                 return Promise.resolve()
diff --git a/pxtservices/editorDriver.ts b/pxtservices/editorDriver.ts
index bb75415ca0a7..234a5046f3a7 100644
--- a/pxtservices/editorDriver.ts
+++ b/pxtservices/editorDriver.ts
@@ -389,6 +389,18 @@ export class EditorDriver extends IframeDriver {
         return (resp.resp as pxt.editor.EditorMessageGetToolboxCategoriesResponse).categories;
     }
 
+    async getBlockReadableName(blockId: string): Promise<pxt.editor.ReadableBlockName | undefined> {
+        const resp = await this.sendRequest(
+            {
+                type: "pxteditor",
+                action: "getreadableblockname",
+                blockId
+            } as pxt.editor.EditorMessageGetBlockReadableNameRequest
+        ) as pxt.editor.EditorMessageResponse;
+
+        return (resp.resp as pxt.editor.EditorMessageGetBlockReadableNameResponse)?.readableName;
+    }
+
     async runValidatorPlan(validatorPlan: pxt.blocks.ValidatorPlan, planLib: pxt.blocks.ValidatorPlan[]) {
         const resp = await this.sendRequest(
             {
diff --git a/teachertool/src/components/CriteriaInstanceDisplay.tsx b/teachertool/src/components/CriteriaInstanceDisplay.tsx
index 50e8f30089e3..4f912acff4ab 100644
--- a/teachertool/src/components/CriteriaInstanceDisplay.tsx
+++ b/teachertool/src/components/CriteriaInstanceDisplay.tsx
@@ -5,13 +5,14 @@ import { logDebug } from "../services/loggingService";
 import { setParameterValue } from "../transforms/setParameterValue";
 import { classList } from "react-common/components/util";
 import { getReadableBlockString, splitCriteriaTemplate } from "../utils";
-import { useContext, useMemo, useState } from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
 import { Input } from "react-common/components/controls/Input";
 import { Button } from "react-common/components/controls/Button";
 import { AppStateContext } from "../state/appStateContext";
 import { Strings } from "../constants";
 import { showModal } from "../transforms/showModal";
 import { BlockPickerOptions } from "../types/modalOptions";
+import { getBlockReadableName } from "../services/makecodeEditorService";
 
 interface InlineInputSegmentProps {
     initialValue: string;
@@ -67,14 +68,9 @@ interface BlockData {
 }
 const BlockInputSegment: React.FC<BlockInputSegmentProps> = ({ instance, param }) => {
     const { state: teacherTool } = useContext(AppStateContext);
-    function handleClick() {
-        showModal({
-            modal: "block-picker",
-            criteriaInstanceId: instance.instanceId,
-            paramName: param.name,
-        } as BlockPickerOptions);
-    }
+    const [blockText, setBlockText] = useState<string | undefined>(undefined);
 
+    // Maybe makes sense to move this to use effect and handle call to setBlockText as a separate part of same use effect?
     const blockData = useMemo<BlockData | undefined>(() => {
         if (!param.value || !teacherTool.toolboxCategories) {
             return undefined;
@@ -84,16 +80,29 @@ const BlockInputSegment: React.FC<BlockInputSegmentProps> = ({ instance, param }
         for (const category of Object.values(teacherTool.toolboxCategories)) {
             const block = category.blocks?.find(b => b.blockId === param.value);
             if (block) {
+                async function updateBlockText(blockId: string | undefined) {
+                    const blockReadableName = blockId ? await getBlockReadableName(blockId) : undefined;
+                    setBlockText(blockReadableName ? blockReadableName.parts.map(part => part.content).join(" ") : undefined);
+                }
+                /* await */ updateBlockText(block.blockId);
                 return { category, block };
             }
         }
         return undefined;
     }, [param.value, teacherTool.toolboxCategories]);
 
+    function handleClick() {
+        showModal({
+            modal: "block-picker",
+            criteriaInstanceId: instance.instanceId,
+            paramName: param.name,
+        } as BlockPickerOptions);
+    }
+
     const style = blockData ? { backgroundColor: blockData.category.color, color: "white" } : undefined;
     return (
         <Button
-            label={blockData ? getReadableBlockString(blockData.block.name) : param.value || param.name}
+            label={blockText || param.value || param.name}
             className={classList(css["block-input-btn"], param.value ? undefined : css["error"])}
             onClick={handleClick}
             title={param.value ? Strings.SelectBlock : `${Strings.SelectBlock}: ${Strings.ValueRequired}`}
diff --git a/teachertool/src/services/makecodeEditorService.ts b/teachertool/src/services/makecodeEditorService.ts
index be6302717c5e..f8fc3ff0eaad 100644
--- a/teachertool/src/services/makecodeEditorService.ts
+++ b/teachertool/src/services/makecodeEditorService.ts
@@ -63,6 +63,11 @@ export async function getToolboxCategoriesAsync(
     return response;
 }
 
+export async function getBlockReadableName(blockId: string): Promise<pxt.editor.ReadableBlockName | undefined> {
+    const response = driver ? await driver.getBlockReadableName(blockId) : undefined;
+    return response;
+}
+
 export async function getBlockImageUriFromXmlAsync(xml: string): Promise<string | undefined> {
     const response = driver ? await driver.renderXml(xml) : undefined;
     return response;
diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
index 45ca6358d899..e77aee809795 100644
--- a/webapp/src/app.tsx
+++ b/webapp/src/app.tsx
@@ -49,6 +49,7 @@ import * as sidepanel from "./sidepanel";
 import * as qr from "./qr";
 
 import * as monaco from "./monaco"
+import * as monacoHelpers from "./monacopyhelper"
 import * as pxtjson from "./pxtjson"
 import * as serial from "./serial"
 import * as blocks from "./blocks"
@@ -80,7 +81,7 @@ import { mergeProjectCode, appendTemporaryAssets } from "./mergeProjects";
 import { Tour } from "./components/onboarding/Tour";
 import { parseTourStepsAsync } from "./onboarding";
 import { initGitHubDb } from "./idbworkspace";
-import { CategoryNameID } from "./toolbox";
+import { BlockDefinition, CategoryNameID } from "./toolbox";
 
 pxt.blocks.requirePxtBlockly = () => pxtblockly as any;
 pxt.blocks.requireBlockly = () => Blockly;
@@ -4142,6 +4143,26 @@ export class ProjectView
         return { categories };
     }
 
+    getReadableBlockName(blockId: string): pxt.editor.ReadableBlockName | undefined {
+        // Get toolbox block definition.
+        let blockMatch: BlockDefinition = undefined;
+        for (const advanced of [true, false]) {
+            for (const category of this.blocksEditor.getToolboxCategories(advanced)) {
+                blockMatch = category.blocks.find(b => b.attributes.blockId === blockId);
+                if (blockMatch) break;
+            }
+            if (blockMatch) break;
+        }
+
+        if (!blockMatch) {
+            console.log("DEBUG: No Block Match for blockId: " + blockId);
+            return undefined;
+        }
+
+        const readableName = monacoHelpers.getBlockDescription(blockMatch, blockMatch.parameters ? blockMatch.parameters.slice() : null, false);
+        return readableName;
+    }
+
     launchFullEditor() {
         Util.assert(pxt.shell.isSandboxMode());
 
diff --git a/webapp/src/monacoFlyout.tsx b/webapp/src/monacoFlyout.tsx
index 504f9e0b2ff3..3b12d2047b85 100644
--- a/webapp/src/monacoFlyout.tsx
+++ b/webapp/src/monacoFlyout.tsx
@@ -9,6 +9,7 @@ import { HELP_IMAGE_URI } from "../../pxteditor";
 import * as pxtblockly from "../../pxtblocks";
 
 import ISettingsProps = pxt.editor.ISettingsProps;
+import { getSnippetName } from "./monacopyhelper";
 
 const DRAG_THRESHOLD = 5;
 const SELECTED_BORDER_WIDTH = 4;
@@ -135,7 +136,7 @@ export class MonacoFlyout extends data.Component<MonacoFlyoutProps, MonacoFlyout
                 dragBlock.id = "monacoDraggingBlock";
                 dragBlock.textContent = block.snippetOnly
                     ? block.snippet
-                    : `${this.getQName(block) || this.getSnippetName(block)}${params ? `(${params.map(p => p.name).join(", ")})` : ""}`
+                    : `${this.getQName(block) || getSnippetName(block, this.props.fileType == pxt.editor.FileType.Python)}${params ? `(${params.map(p => p.name).join(", ")})` : ""}`
                 dragBlock.style.backgroundColor = this.dragInfo.color;
                 parent.appendChild(dragBlock);
 
@@ -245,11 +246,6 @@ export class MonacoFlyout extends data.Component<MonacoFlyoutProps, MonacoFlyout
         return this.props.fileType == pxt.editor.FileType.Python && block.pyQName ? block.pyQName : block.qName;
     }
 
-    protected getSnippetName(block: toolbox.BlockDefinition): string {
-        const isPython = this.props.fileType == pxt.editor.FileType.Python;
-        return (isPython ? (block.pySnippetName || block.pyName) : undefined) || block.snippetName || block.name;
-    }
-
     protected getBlockDescription(block: toolbox.BlockDefinition, params: pxtc.ParameterDesc[]): JSX.Element[] {
         let description = [];
         let compileInfo = pxt.blocks.compileInfo(block as pxtc.SymbolInfo);
@@ -295,7 +291,7 @@ export class MonacoFlyout extends data.Component<MonacoFlyoutProps, MonacoFlyout
             })
         } else {
             // if no blockdef found, use the snippet name
-            description.push(<span key={name}>{this.getSnippetName(block) || block.name}</span>)
+            description.push(<span key={name}>{getSnippetName(block, isPython) || block.name}</span>)
         }
 
         // imitates block behavior in adding "run code" before any handler
@@ -369,7 +365,7 @@ export class MonacoFlyout extends data.Component<MonacoFlyoutProps, MonacoFlyout
             pxtblockly.external.openHelpUrl(helpUrl);
         };
 
-        const qName = this.getQName(block) || this.getSnippetName(block);
+        const qName = this.getQName(block) || getSnippetName(block, this.props.fileType == pxt.editor.FileType.Python);
         const selected = qName == this.state.selectedBlock;
         const hover = qName == this.state.hoverBlock;
 
@@ -466,4 +462,4 @@ export class MonacoFlyout extends data.Component<MonacoFlyoutProps, MonacoFlyout
             </div>
         </div>
     }
-}
\ No newline at end of file
+}
diff --git a/webapp/src/monacopyhelper.ts b/webapp/src/monacopyhelper.ts
index a9342b75db8b..813262292007 100644
--- a/webapp/src/monacopyhelper.ts
+++ b/webapp/src/monacopyhelper.ts
@@ -1,3 +1,5 @@
+import * as toolbox from "./toolbox";
+
 const INDENT = 4;
 
 interface Line {
@@ -76,4 +78,61 @@ export function fixIndentationInRange(model: monaco.editor.IReadOnlyModel, range
         text: lines.join('\n'),
         range: range.setStartPosition(range.startLineNumber, 0)
     }];
-}
\ No newline at end of file
+}
+
+
+export function getSnippetName(block: toolbox.BlockDefinition, isPython: boolean): string {
+    return (isPython ? (block.pySnippetName || block.pyName) : undefined) || block.snippetName || block.name;
+}
+
+// TODO thsparks : move monacoFlyout to use this too.
+// TODO thsparks : this is the monacyPYhelpers class. Will need to find/make a better place for this?
+export function getBlockDescription(block: toolbox.BlockDefinition, params: pxtc.ParameterDesc[], isPython: boolean): pxt.editor.ReadableBlockName {
+    let description: pxt.editor.ReadableBlockNamePart[] = [];
+    let compileInfo = pxt.blocks.compileInfo(block as pxtc.SymbolInfo);
+    let parts = block.attributes._def && block.attributes._def.parts;
+    if (block.attributes.parentBlock) {
+        const parent = block.attributes.parentBlock;
+        const parentBlockParts = [...parent.attributes._def.parts];
+        const overrideLocation = parentBlockParts.findIndex((part: any) => part.kind === "param" && part.name === block.attributes.toolboxParentArgument);
+        if (overrideLocation !== -1) {
+            parentBlockParts.splice(overrideLocation, 1, ...block.attributes._def.parts);
+            parts = parentBlockParts;
+        }
+    }
+    let name = block.qName || block.name;
+
+    if (parts) {
+        if (params &&
+            parts.filter((p: any) => p.kind == "param").length > params.length) {
+            // add empty param when first argument is "this"
+            params.unshift(null);
+        }
+        parts.forEach((part, i) => {
+            switch (part.kind) {
+                case "label":
+                    description.push({kind: "label", content: part.text});
+                    break;
+                case "break":
+                    description.push({kind: "break"});
+                    break;
+                case "param":
+                    let actualParam = compileInfo?.definitionNameToParam[part.name];
+                    let val = actualParam?.defaultValue
+                        || part.varName
+                        || actualParam?.actualName
+                        || part.name
+                    if (isPython && actualParam?.defaultValue) {
+                        val = pxtc.tsSnippetToPySnippet(val);
+                    }
+                    description.push({kind: "param", content: val});
+                    break;
+            }
+        })
+    } else {
+        // if no blockdef found, use the snippet name
+        description.push({kind: "label", content: getSnippetName(block, isPython) || block.name})
+    }
+
+    return { parts: description };
+}

From 30dff9573618456bd038012981bafa8f359e46d4 Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Fri, 13 Sep 2024 18:26:36 -0700
Subject: [PATCH 02/31] Some display changes

---
 .../components/CriteriaInstanceDisplay.tsx    | 62 ++++++++++++++++---
 .../CriteriaInstanceDisplay.module.scss       | 12 ++++
 2 files changed, 66 insertions(+), 8 deletions(-)

diff --git a/teachertool/src/components/CriteriaInstanceDisplay.tsx b/teachertool/src/components/CriteriaInstanceDisplay.tsx
index 4f912acff4ab..13a9b76f43b0 100644
--- a/teachertool/src/components/CriteriaInstanceDisplay.tsx
+++ b/teachertool/src/components/CriteriaInstanceDisplay.tsx
@@ -4,7 +4,7 @@ import { CriteriaInstance, CriteriaParameterValue } from "../types/criteria";
 import { logDebug } from "../services/loggingService";
 import { setParameterValue } from "../transforms/setParameterValue";
 import { classList } from "react-common/components/util";
-import { getReadableBlockString, splitCriteriaTemplate } from "../utils";
+import { splitCriteriaTemplate } from "../utils";
 import { useContext, useEffect, useMemo, useState } from "react";
 import { Input } from "react-common/components/controls/Input";
 import { Button } from "react-common/components/controls/Button";
@@ -58,6 +58,57 @@ const InlineInputSegment: React.FC<InlineInputSegmentProps> = ({
     );
 };
 
+interface BlockReadableNameProps {
+    blockData: BlockData;
+}
+const BlockReadableName: React.FC<BlockReadableNameProps> = ({ blockData }) => {
+    const [readableName, setReadableName] = useState<pxt.editor.ReadableBlockName | undefined>(undefined);
+
+    useEffect(() => {
+        async function updateReadableName(blockId: string | undefined) {
+            let blockReadableName: pxt.editor.ReadableBlockName | undefined;
+            if (blockId) {
+                blockReadableName = blockId ? await getBlockReadableName(blockId) : undefined;
+            }
+            if (blockReadableName) {
+                setReadableName(blockReadableName);
+            } else {
+                setReadableName({
+                    parts: [{ kind: "label", content: blockData.block.snippetName || blockData.block.name }],
+                } as pxt.editor.ReadableBlockName);
+            }
+        }
+
+        updateReadableName(blockData.block.blockId);
+    }, [blockData]);
+
+    const readableComponent = readableName?.parts.map((part, i) => {
+        if (part.kind === "label" || part.kind === "break") {
+            return (
+                <span
+                    key={`block-name-part-${i}`}
+                    className={classList(css["block-name-segment"], css["block-name-label"])}
+                >
+                    {part.kind == "label" ? part.content : " "}
+                </span>
+            );
+        } else if (part.kind === "param") {
+            return (
+                <span
+                    key={`block-name-part-${i}`}
+                    className={classList(css["block-name-segment"], css["block-name-param"])}
+                >
+                    {part.content}
+                </span>
+            );
+        }
+    });
+
+    return (
+        <span className={css["block-readable-name"]}>{readableComponent || <div className="common-spinner" />}</span>
+    );
+};
+
 interface BlockInputSegmentProps {
     instance: CriteriaInstance;
     param: CriteriaParameterValue;
@@ -68,7 +119,6 @@ interface BlockData {
 }
 const BlockInputSegment: React.FC<BlockInputSegmentProps> = ({ instance, param }) => {
     const { state: teacherTool } = useContext(AppStateContext);
-    const [blockText, setBlockText] = useState<string | undefined>(undefined);
 
     // Maybe makes sense to move this to use effect and handle call to setBlockText as a separate part of same use effect?
     const blockData = useMemo<BlockData | undefined>(() => {
@@ -80,11 +130,6 @@ const BlockInputSegment: React.FC<BlockInputSegmentProps> = ({ instance, param }
         for (const category of Object.values(teacherTool.toolboxCategories)) {
             const block = category.blocks?.find(b => b.blockId === param.value);
             if (block) {
-                async function updateBlockText(blockId: string | undefined) {
-                    const blockReadableName = blockId ? await getBlockReadableName(blockId) : undefined;
-                    setBlockText(blockReadableName ? blockReadableName.parts.map(part => part.content).join(" ") : undefined);
-                }
-                /* await */ updateBlockText(block.blockId);
                 return { category, block };
             }
         }
@@ -100,9 +145,10 @@ const BlockInputSegment: React.FC<BlockInputSegmentProps> = ({ instance, param }
     }
 
     const style = blockData ? { backgroundColor: blockData.category.color, color: "white" } : undefined;
+    const blockDisplay = blockData ? <BlockReadableName blockData={blockData} /> : null;
     return (
         <Button
-            label={blockText || param.value || param.name}
+            label={blockDisplay || param.value || param.name}
             className={classList(css["block-input-btn"], param.value ? undefined : css["error"])}
             onClick={handleClick}
             title={param.value ? Strings.SelectBlock : `${Strings.SelectBlock}: ${Strings.ValueRequired}`}
diff --git a/teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss b/teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss
index 342f6d81b962..6cbe77f8f976 100644
--- a/teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss
+++ b/teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss
@@ -49,6 +49,18 @@
                 border: solid 1px var(--pxt-page-foreground);
                 padding: 0.4rem;
 
+                .block-readable-name {
+                    .block-name-segment {
+                        margin-left: 0;
+                        margin-right: 0.2rem;
+                    }
+                    .block-name-param {
+                        border-radius: 0.5rem;
+                        padding: 0.2rem 0.4rem;
+                        background-color: rgba(0, 0, 0, 0.3);
+                    }
+                }
+
                 &.error {
                     border: solid 1px var(--pxt-error-accent);
                     background-color: var(--pxt-error-background);

From fc0c083d3cc9aab04fa3f0f27d16f74b282656ca Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Thu, 19 Sep 2024 10:24:07 -0700
Subject: [PATCH 03/31] TIdy code

---
 .../components/CriteriaInstanceDisplay.tsx    | 33 ++++++++-----------
 1 file changed, 13 insertions(+), 20 deletions(-)

diff --git a/teachertool/src/components/CriteriaInstanceDisplay.tsx b/teachertool/src/components/CriteriaInstanceDisplay.tsx
index 6de90e24036f..c53604c5686e 100644
--- a/teachertool/src/components/CriteriaInstanceDisplay.tsx
+++ b/teachertool/src/components/CriteriaInstanceDisplay.tsx
@@ -93,9 +93,11 @@ const BlockReadableName: React.FC<BlockReadableNameProps> = ({ blockData }) => {
             if (blockId) {
                 blockReadableName = blockId ? await getBlockReadableName(blockId) : undefined;
             }
+
             if (blockReadableName) {
                 setReadableName(blockReadableName);
             } else {
+                // We were unable to get block name from the editor. Fallback to snippet name and/or name.
                 setReadableName({
                     parts: [{ kind: "label", content: blockData.block.snippetName || blockData.block.name }],
                 } as pxt.editor.ReadableBlockName);
@@ -106,25 +108,17 @@ const BlockReadableName: React.FC<BlockReadableNameProps> = ({ blockData }) => {
     }, [blockData]);
 
     const readableComponent = readableName?.parts.map((part, i) => {
-        if (part.kind === "label" || part.kind === "break") {
-            return (
-                <span
-                    key={`block-name-part-${i}`}
-                    className={classList(css["block-name-segment"], css["block-name-label"])}
-                >
-                    {part.kind == "label" ? part.content : " "}
-                </span>
-            );
-        } else if (part.kind === "param") {
-            return (
-                <span
-                    key={`block-name-part-${i}`}
-                    className={classList(css["block-name-segment"], css["block-name-param"])}
-                >
-                    {part.content}
-                </span>
-            );
-        }
+        return (
+            <span
+                key={`block-name-part-${i}`}
+                className={classList(
+                    css["block-name-segment"],
+                    part.kind === "param" ? css["block-name-param"] : css["block-name-label"]
+                )}
+            >
+                {part.kind == "break" ? "" : part.content}
+            </span>
+        );
     });
 
     return (
@@ -143,7 +137,6 @@ interface BlockData {
 const BlockInputSegment: React.FC<BlockInputSegmentProps> = ({ instance, param }) => {
     const { state: teacherTool } = useContext(AppStateContext);
 
-    // Maybe makes sense to move this to use effect and handle call to setBlockText as a separate part of same use effect?
     const blockData = useMemo<BlockData | undefined>(() => {
         if (!param.value || !teacherTool.toolboxCategories) {
             return undefined;

From ae159cda31588cd905c5345f3e9a8c65fed0b960 Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Thu, 19 Sep 2024 12:44:24 -0700
Subject: [PATCH 04/31] Attempt to handle blocks with no "parts" attribute.
 Seems like these blocks are defined a bit differently in blocks.ts and/or
 blockSnippets.ts? Idk this doesn't feel like a good solution...

---
 webapp/src/app.tsx           | 72 +++++++++++++++++++++++++++++++++---
 webapp/src/monacopyhelper.ts |  6 +--
 2 files changed, 67 insertions(+), 11 deletions(-)

diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
index e77aee809795..af30b0ca2621 100644
--- a/webapp/src/app.tsx
+++ b/webapp/src/app.tsx
@@ -4143,23 +4143,83 @@ export class ProjectView
         return { categories };
     }
 
+    // TODO thsparks : find a better name
+    getReadableBlockNameFromBlocksBlockDefinition(block: pxt.blocks.BlockDefinition): pxt.editor.ReadableBlockName | undefined {
+        const parts: pxt.editor.ReadableBlockNamePart[] = [];
+        if (block?.block["message0"]) {
+            // These message values use %1, %2, etc. for parameters.
+            // Extract these into generic "value" parameters.
+            const message = block.block["message0"];
+            const regex = /%(\d+)/g;
+            let lastIndex = 0;
+            let match;
+
+            while ((match = regex.exec(message)) !== null) {
+                // Add the text before the parameter as a label (if it's not empty)
+                if (match.index > lastIndex) {
+                    const content = message.substring(lastIndex, match.index).trim();
+                    if (content) {
+                        parts.push({ kind: "label", content });
+                    }
+                }
+
+                // Add the parameter
+                parts.push({
+                    kind: "param",
+                    content: "value"
+                });
+                lastIndex = regex.lastIndex;
+            }
+
+            // Add any remaining text after the last parameter as a label
+            if (lastIndex < message.length) {
+                parts.push({
+                    kind: "label",
+                    content: message.substring(lastIndex).trim()
+                });
+            }
+        } else {
+            parts.push({ kind: "label", content: block.name });
+        }
+
+        return { parts };
+    }
+
     getReadableBlockName(blockId: string): pxt.editor.ReadableBlockName | undefined {
         // Get toolbox block definition.
-        let blockMatch: BlockDefinition = undefined;
+        let toolboxBlockMatch: BlockDefinition = undefined;
         for (const advanced of [true, false]) {
             for (const category of this.blocksEditor.getToolboxCategories(advanced)) {
-                blockMatch = category.blocks.find(b => b.attributes.blockId === blockId);
-                if (blockMatch) break;
+                toolboxBlockMatch = category.blocks.find(b => b.attributes.blockId === blockId);
+                if (toolboxBlockMatch) break;
             }
-            if (blockMatch) break;
+            if (toolboxBlockMatch) break;
         }
 
-        if (!blockMatch) {
+        if (!toolboxBlockMatch) {
             console.log("DEBUG: No Block Match for blockId: " + blockId);
             return undefined;
         }
 
-        const readableName = monacoHelpers.getBlockDescription(blockMatch, blockMatch.parameters ? blockMatch.parameters.slice() : null, false);
+        let readableName = monacoHelpers.getBlockDescription(
+            toolboxBlockMatch,
+            toolboxBlockMatch.parameters ? toolboxBlockMatch.parameters.slice() : null,
+            false);
+
+        if (!readableName) {
+            const blocksBlockMatch = pxt.blocks.getBlockDefinition(blockId);
+            if (blocksBlockMatch) {
+                readableName = this.getReadableBlockNameFromBlocksBlockDefinition(blocksBlockMatch);
+            }
+        }
+
+        if (!readableName) {
+            readableName.parts.push({
+                kind: "label",
+                content: monacoHelpers.getSnippetName(toolboxBlockMatch, false) || toolboxBlockMatch.name,
+            });
+        }
+
         return readableName;
     }
 
diff --git a/webapp/src/monacopyhelper.ts b/webapp/src/monacopyhelper.ts
index 813262292007..c6a53aef4d17 100644
--- a/webapp/src/monacopyhelper.ts
+++ b/webapp/src/monacopyhelper.ts
@@ -100,7 +100,6 @@ export function getBlockDescription(block: toolbox.BlockDefinition, params: pxtc
             parts = parentBlockParts;
         }
     }
-    let name = block.qName || block.name;
 
     if (parts) {
         if (params &&
@@ -129,10 +128,7 @@ export function getBlockDescription(block: toolbox.BlockDefinition, params: pxtc
                     break;
             }
         })
-    } else {
-        // if no blockdef found, use the snippet name
-        description.push({kind: "label", content: getSnippetName(block, isPython) || block.name})
     }
 
-    return { parts: description };
+    return description.length > 0 ? { parts: description } : undefined;
 }

From 8af2714b1456c984945c7a0c18254067650281a8 Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Fri, 20 Sep 2024 14:34:43 -0700
Subject: [PATCH 05/31] Comment update

---
 webapp/src/app.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
index af30b0ca2621..88fbde3e7e1b 100644
--- a/webapp/src/app.tsx
+++ b/webapp/src/app.tsx
@@ -4143,7 +4143,7 @@ export class ProjectView
         return { categories };
     }
 
-    // TODO thsparks : find a better name
+    // TODO thsparks : find a better name for this function
     getReadableBlockNameFromBlocksBlockDefinition(block: pxt.blocks.BlockDefinition): pxt.editor.ReadableBlockName | undefined {
         const parts: pxt.editor.ReadableBlockNamePart[] = [];
         if (block?.block["message0"]) {

From 8bce495125809112716641b73bf3f4a9fb63b7b3 Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Fri, 20 Sep 2024 15:18:05 -0700
Subject: [PATCH 06/31] Refactor getBlockReadableName to getReadableBlockName

---
 pxtservices/editorDriver.ts                            |  2 +-
 teachertool/src/components/CriteriaInstanceDisplay.tsx | 10 +++++-----
 teachertool/src/services/makecodeEditorService.ts      |  4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/pxtservices/editorDriver.ts b/pxtservices/editorDriver.ts
index 234a5046f3a7..6b532c3b3d9c 100644
--- a/pxtservices/editorDriver.ts
+++ b/pxtservices/editorDriver.ts
@@ -389,7 +389,7 @@ export class EditorDriver extends IframeDriver {
         return (resp.resp as pxt.editor.EditorMessageGetToolboxCategoriesResponse).categories;
     }
 
-    async getBlockReadableName(blockId: string): Promise<pxt.editor.ReadableBlockName | undefined> {
+    async getReadableBlockName(blockId: string): Promise<pxt.editor.ReadableBlockName | undefined> {
         const resp = await this.sendRequest(
             {
                 type: "pxteditor",
diff --git a/teachertool/src/components/CriteriaInstanceDisplay.tsx b/teachertool/src/components/CriteriaInstanceDisplay.tsx
index c53604c5686e..4d998bbb0c11 100644
--- a/teachertool/src/components/CriteriaInstanceDisplay.tsx
+++ b/teachertool/src/components/CriteriaInstanceDisplay.tsx
@@ -13,7 +13,7 @@ import { Strings } from "../constants";
 import { showModal } from "../transforms/showModal";
 import { BlockPickerOptions } from "../types/modalOptions";
 import { validateParameterValue } from "../utils/validateParameterValue";
-import { getBlockReadableName } from "../services/makecodeEditorService";
+import { getReadableBlockName } from "../services/makecodeEditorService";
 
 interface InlineInputSegmentProps {
     initialValue: string;
@@ -81,17 +81,17 @@ const InlineInputSegment: React.FC<InlineInputSegmentProps> = ({
     );
 };
 
-interface BlockReadableNameProps {
+interface ReadableBlockNameDisplayProps {
     blockData: BlockData;
 }
-const BlockReadableName: React.FC<BlockReadableNameProps> = ({ blockData }) => {
+const ReadableBlockNameDisplay: React.FC<ReadableBlockNameDisplayProps> = ({ blockData }) => {
     const [readableName, setReadableName] = useState<pxt.editor.ReadableBlockName | undefined>(undefined);
 
     useEffect(() => {
         async function updateReadableName(blockId: string | undefined) {
             let blockReadableName: pxt.editor.ReadableBlockName | undefined;
             if (blockId) {
-                blockReadableName = blockId ? await getBlockReadableName(blockId) : undefined;
+                blockReadableName = blockId ? await getReadableBlockName(blockId) : undefined;
             }
 
             if (blockReadableName) {
@@ -161,7 +161,7 @@ const BlockInputSegment: React.FC<BlockInputSegmentProps> = ({ instance, param }
     }
 
     const style = blockData ? { backgroundColor: blockData.category.color, color: "white" } : undefined;
-    const blockDisplay = blockData ? <BlockReadableName blockData={blockData} /> : null;
+    const blockDisplay = blockData ? <ReadableBlockNameDisplay blockData={blockData} /> : null;
     return (
         <Button
             label={blockDisplay || param.value || param.name}
diff --git a/teachertool/src/services/makecodeEditorService.ts b/teachertool/src/services/makecodeEditorService.ts
index f8fc3ff0eaad..8e413049e2b6 100644
--- a/teachertool/src/services/makecodeEditorService.ts
+++ b/teachertool/src/services/makecodeEditorService.ts
@@ -63,8 +63,8 @@ export async function getToolboxCategoriesAsync(
     return response;
 }
 
-export async function getBlockReadableName(blockId: string): Promise<pxt.editor.ReadableBlockName | undefined> {
-    const response = driver ? await driver.getBlockReadableName(blockId) : undefined;
+export async function getReadableBlockName(blockId: string): Promise<pxt.editor.ReadableBlockName | undefined> {
+    const response = driver ? await driver.getReadableBlockName(blockId) : undefined;
     return response;
 }
 

From 12739c2ec8a28697bd4e2e9aed87b91edc6aa41f Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Fri, 20 Sep 2024 15:35:37 -0700
Subject: [PATCH 07/31] Cache readable block names

---
 .../components/CriteriaInstanceDisplay.tsx    |  4 +--
 teachertool/src/services/storageService.ts    | 25 +++++++++++++++++++
 .../src/transforms/loadReadableBlockName.ts   | 19 ++++++++++++++
 3 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 teachertool/src/transforms/loadReadableBlockName.ts

diff --git a/teachertool/src/components/CriteriaInstanceDisplay.tsx b/teachertool/src/components/CriteriaInstanceDisplay.tsx
index e1bae512750d..c408afdd0eae 100644
--- a/teachertool/src/components/CriteriaInstanceDisplay.tsx
+++ b/teachertool/src/components/CriteriaInstanceDisplay.tsx
@@ -13,7 +13,7 @@ import { Strings, Ticks } from "../constants";
 import { showModal } from "../transforms/showModal";
 import { BlockPickerOptions } from "../types/modalOptions";
 import { validateParameterValue } from "../utils/validateParameterValue";
-import { getReadableBlockName } from "../services/makecodeEditorService";
+import { loadReadableBlockName } from "../transforms/loadReadableBlockName";
 
 interface InlineInputSegmentProps {
     initialValue: string;
@@ -91,7 +91,7 @@ const ReadableBlockNameDisplay: React.FC<ReadableBlockNameDisplayProps> = ({ blo
         async function updateReadableName(blockId: string | undefined) {
             let blockReadableName: pxt.editor.ReadableBlockName | undefined;
             if (blockId) {
-                blockReadableName = blockId ? await getReadableBlockName(blockId) : undefined;
+                blockReadableName = blockId ? await loadReadableBlockName(blockId) : undefined;
             }
 
             if (blockReadableName) {
diff --git a/teachertool/src/services/storageService.ts b/teachertool/src/services/storageService.ts
index d7ae3443f860..6e1d9efface1 100644
--- a/teachertool/src/services/storageService.ts
+++ b/teachertool/src/services/storageService.ts
@@ -12,6 +12,7 @@ const RUN_ON_LOAD_KEY = [KEY_PREFIX, "runOnLoad"].join("/");
 const LAST_ACTIVE_CHECKLIST_KEY = [KEY_PREFIX, "lastActiveChecklist"].join("/");
 const SPLIT_POSITION_KEY = [KEY_PREFIX, "splitPosition"].join("/");
 const EXPANDED_CATALOG_TAGS_KEY = [KEY_PREFIX, "expandedCatalogTags"].join("/");
+const READABLE_BLOCK_NAME_PREFIX = [KEY_PREFIX, "readableBlockName"].join("/");
 
 function getValue(key: string, defaultValue?: string): string | undefined {
     return localStorage.getItem(key) || defaultValue;
@@ -112,6 +113,10 @@ async function deleteChecklistFromIndexedDbAsync(name: string) {
     await db.deleteChecklist(name);
 }
 
+function getReadableBlockNameKey(blockId: string): string {
+    return [READABLE_BLOCK_NAME_PREFIX, blockId].join("/");
+}
+
 // ----------------------------------
 // Exports
 // ----------------------------------
@@ -235,3 +240,23 @@ export function removeExpandedCatalogTag(tag: string) {
         }
     }
 }
+
+export function getCachedReadableBlockName(blockId: string): pxt.editor.ReadableBlockName | undefined {
+    const key = getReadableBlockNameKey(blockId);
+    try {
+        const cachedReadableBlockName = getValue(key);
+        return cachedReadableBlockName ? JSON.parse(cachedReadableBlockName) : undefined;
+    } catch (e) {
+        logError(ErrorCode.localStorageReadError, e);
+        return undefined;
+    }
+}
+
+export function cacheReadableBlockName(blockId: string, readableBlockName: pxt.editor.ReadableBlockName) {
+    const key = getReadableBlockNameKey(blockId);
+    try {
+        setValue(key, JSON.stringify(readableBlockName));
+    } catch (e) {
+        logError(ErrorCode.localStorageWriteError, e);
+    }
+}
diff --git a/teachertool/src/transforms/loadReadableBlockName.ts b/teachertool/src/transforms/loadReadableBlockName.ts
new file mode 100644
index 000000000000..ae9e290f9fd9
--- /dev/null
+++ b/teachertool/src/transforms/loadReadableBlockName.ts
@@ -0,0 +1,19 @@
+import { getReadableBlockName } from "../services/makecodeEditorService";
+import { cacheReadableBlockName, getCachedReadableBlockName } from "../services/storageService";
+
+export async function loadReadableBlockName(blockId: string): Promise<pxt.editor.ReadableBlockName | undefined> {
+    // Check for cached version.
+    let readableBlockName = getCachedReadableBlockName(blockId);
+    if (readableBlockName) {
+        return Promise.resolve(readableBlockName);
+    }
+
+    // Call into editor service
+    readableBlockName = await getReadableBlockName(blockId);
+    if (readableBlockName) {
+        // Cache the result
+        cacheReadableBlockName(blockId, readableBlockName);
+    }
+
+    return readableBlockName;
+}

From 7768d0e5c41a968488cfec3a9905d926bb1db32e Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Fri, 20 Sep 2024 15:37:09 -0700
Subject: [PATCH 08/31] Move getBlockDescription and getSnippetName into new
 file

---
 webapp/src/app.tsx           |  6 ++--
 webapp/src/monacopyhelper.ts | 57 +-----------------------------------
 webapp/src/toolboxHelpers.ts | 53 +++++++++++++++++++++++++++++++++
 3 files changed, 57 insertions(+), 59 deletions(-)
 create mode 100644 webapp/src/toolboxHelpers.ts

diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
index 88fbde3e7e1b..02f647fdd37c 100644
--- a/webapp/src/app.tsx
+++ b/webapp/src/app.tsx
@@ -49,7 +49,7 @@ import * as sidepanel from "./sidepanel";
 import * as qr from "./qr";
 
 import * as monaco from "./monaco"
-import * as monacoHelpers from "./monacopyhelper"
+import * as toolboxHelpers from "./toolboxHelpers"
 import * as pxtjson from "./pxtjson"
 import * as serial from "./serial"
 import * as blocks from "./blocks"
@@ -4201,7 +4201,7 @@ export class ProjectView
             return undefined;
         }
 
-        let readableName = monacoHelpers.getBlockDescription(
+        let readableName = toolboxHelpers.getBlockDescription(
             toolboxBlockMatch,
             toolboxBlockMatch.parameters ? toolboxBlockMatch.parameters.slice() : null,
             false);
@@ -4216,7 +4216,7 @@ export class ProjectView
         if (!readableName) {
             readableName.parts.push({
                 kind: "label",
-                content: monacoHelpers.getSnippetName(toolboxBlockMatch, false) || toolboxBlockMatch.name,
+                content: toolboxHelpers.getSnippetName(toolboxBlockMatch, false) || toolboxBlockMatch.name,
             });
         }
 
diff --git a/webapp/src/monacopyhelper.ts b/webapp/src/monacopyhelper.ts
index c6a53aef4d17..a9342b75db8b 100644
--- a/webapp/src/monacopyhelper.ts
+++ b/webapp/src/monacopyhelper.ts
@@ -1,5 +1,3 @@
-import * as toolbox from "./toolbox";
-
 const INDENT = 4;
 
 interface Line {
@@ -78,57 +76,4 @@ export function fixIndentationInRange(model: monaco.editor.IReadOnlyModel, range
         text: lines.join('\n'),
         range: range.setStartPosition(range.startLineNumber, 0)
     }];
-}
-
-
-export function getSnippetName(block: toolbox.BlockDefinition, isPython: boolean): string {
-    return (isPython ? (block.pySnippetName || block.pyName) : undefined) || block.snippetName || block.name;
-}
-
-// TODO thsparks : move monacoFlyout to use this too.
-// TODO thsparks : this is the monacyPYhelpers class. Will need to find/make a better place for this?
-export function getBlockDescription(block: toolbox.BlockDefinition, params: pxtc.ParameterDesc[], isPython: boolean): pxt.editor.ReadableBlockName {
-    let description: pxt.editor.ReadableBlockNamePart[] = [];
-    let compileInfo = pxt.blocks.compileInfo(block as pxtc.SymbolInfo);
-    let parts = block.attributes._def && block.attributes._def.parts;
-    if (block.attributes.parentBlock) {
-        const parent = block.attributes.parentBlock;
-        const parentBlockParts = [...parent.attributes._def.parts];
-        const overrideLocation = parentBlockParts.findIndex((part: any) => part.kind === "param" && part.name === block.attributes.toolboxParentArgument);
-        if (overrideLocation !== -1) {
-            parentBlockParts.splice(overrideLocation, 1, ...block.attributes._def.parts);
-            parts = parentBlockParts;
-        }
-    }
-
-    if (parts) {
-        if (params &&
-            parts.filter((p: any) => p.kind == "param").length > params.length) {
-            // add empty param when first argument is "this"
-            params.unshift(null);
-        }
-        parts.forEach((part, i) => {
-            switch (part.kind) {
-                case "label":
-                    description.push({kind: "label", content: part.text});
-                    break;
-                case "break":
-                    description.push({kind: "break"});
-                    break;
-                case "param":
-                    let actualParam = compileInfo?.definitionNameToParam[part.name];
-                    let val = actualParam?.defaultValue
-                        || part.varName
-                        || actualParam?.actualName
-                        || part.name
-                    if (isPython && actualParam?.defaultValue) {
-                        val = pxtc.tsSnippetToPySnippet(val);
-                    }
-                    description.push({kind: "param", content: val});
-                    break;
-            }
-        })
-    }
-
-    return description.length > 0 ? { parts: description } : undefined;
-}
+}
\ No newline at end of file
diff --git a/webapp/src/toolboxHelpers.ts b/webapp/src/toolboxHelpers.ts
new file mode 100644
index 000000000000..f924f75ed48b
--- /dev/null
+++ b/webapp/src/toolboxHelpers.ts
@@ -0,0 +1,53 @@
+
+import * as toolbox from "./toolbox";
+
+export function getSnippetName(block: toolbox.BlockDefinition, isPython: boolean): string {
+    return (isPython ? (block.pySnippetName || block.pyName) : undefined) || block.snippetName || block.name;
+}
+
+// TODO thsparks : move monacoFlyout to use this too.
+export function getBlockDescription(block: toolbox.BlockDefinition, params: pxtc.ParameterDesc[], isPython: boolean): pxt.editor.ReadableBlockName {
+    let description: pxt.editor.ReadableBlockNamePart[] = [];
+    let compileInfo = pxt.blocks.compileInfo(block as pxtc.SymbolInfo);
+    let parts = block.attributes._def && block.attributes._def.parts;
+    if (block.attributes.parentBlock) {
+        const parent = block.attributes.parentBlock;
+        const parentBlockParts = [...parent.attributes._def.parts];
+        const overrideLocation = parentBlockParts.findIndex((part: any) => part.kind === "param" && part.name === block.attributes.toolboxParentArgument);
+        if (overrideLocation !== -1) {
+            parentBlockParts.splice(overrideLocation, 1, ...block.attributes._def.parts);
+            parts = parentBlockParts;
+        }
+    }
+
+    if (parts) {
+        if (params &&
+            parts.filter((p: any) => p.kind == "param").length > params.length) {
+            // add empty param when first argument is "this"
+            params.unshift(null);
+        }
+        parts.forEach((part, i) => {
+            switch (part.kind) {
+                case "label":
+                    description.push({kind: "label", content: part.text});
+                    break;
+                case "break":
+                    description.push({kind: "break"});
+                    break;
+                case "param":
+                    let actualParam = compileInfo?.definitionNameToParam[part.name];
+                    let val = actualParam?.defaultValue
+                        || part.varName
+                        || actualParam?.actualName
+                        || part.name
+                    if (isPython && actualParam?.defaultValue) {
+                        val = pxtc.tsSnippetToPySnippet(val);
+                    }
+                    description.push({kind: "param", content: val});
+                    break;
+            }
+        })
+    }
+
+    return description.length > 0 ? { parts: description } : undefined;
+}

From 229009754dbca8be96341b20b453422d646ba43e Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Fri, 20 Sep 2024 15:41:26 -0700
Subject: [PATCH 09/31] ReadableBlockName -> BlockTextParts

---
 localtypings/pxteditor.d.ts                   | 14 ++++++------
 pxteditor/editorcontroller.ts                 |  4 ++--
 pxtservices/editorDriver.ts                   |  4 ++--
 .../components/CriteriaInstanceDisplay.tsx    | 22 +++++++++----------
 .../src/services/makecodeEditorService.ts     |  4 ++--
 teachertool/src/services/storageService.ts    | 14 ++++++------
 .../src/transforms/loadReadableBlockName.ts   | 12 +++++-----
 webapp/src/app.tsx                            | 10 ++++-----
 webapp/src/toolboxHelpers.ts                  |  4 ++--
 9 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/localtypings/pxteditor.d.ts b/localtypings/pxteditor.d.ts
index 01bf1b191d19..81111c3ac463 100644
--- a/localtypings/pxteditor.d.ts
+++ b/localtypings/pxteditor.d.ts
@@ -75,7 +75,7 @@ declare namespace pxt.editor {
         | "convertcloudprojectstolocal"
         | "setlanguagerestriction"
         | "gettoolboxcategories"
-        | "getreadableblockname"
+        | "getblocktextparts"
 
         | "toggletrace" // EditorMessageToggleTraceRequest
         | "togglehighcontrast"
@@ -459,12 +459,12 @@ declare namespace pxt.editor {
     }
 
     export interface EditorMessageGetBlockReadableNameRequest extends EditorMessageRequest {
-        action: "getreadableblockname";
+        action: "getblocktextparts";
         blockId: string;
     }
 
     export interface EditorMessageGetBlockReadableNameResponse {
-        readableName: pxt.editor.ReadableBlockName | undefined;
+        readableName: pxt.editor.BlockTextParts | undefined;
     }
 
     export interface EditorMessageServiceWorkerRegisteredRequest extends EditorMessageRequest {
@@ -1007,7 +1007,7 @@ declare namespace pxt.editor {
         // getBlocks(): Blockly.Block[];
         getBlocks(): any[];
         getToolboxCategories(advanced?: boolean): pxt.editor.EditorMessageGetToolboxCategoriesResponse;
-        getReadableBlockName(blockId: string): pxt.editor.ReadableBlockName | undefined;
+        getBlockTextParts(blockId: string): pxt.editor.BlockTextParts | undefined;
 
         toggleHighContrast(): void;
         setHighContrast(on: boolean): void;
@@ -1275,11 +1275,11 @@ declare namespace pxt.editor {
         blockId?: string;
     }
 
-    export interface ReadableBlockName {
-        parts: ReadableBlockNamePart[];
+    export interface BlockTextParts {
+        parts: BlockTextPart[];
     }
 
-    export interface ReadableBlockNamePart {
+    export interface BlockTextPart {
         kind: "label" | "break" | "param",
         content?: string,
     }
diff --git a/pxteditor/editorcontroller.ts b/pxteditor/editorcontroller.ts
index 0b697d716eca..af5df599f667 100644
--- a/pxteditor/editorcontroller.ts
+++ b/pxteditor/editorcontroller.ts
@@ -209,11 +209,11 @@ case "renderxml": {
                                         resp = projectView.getToolboxCategories(msg.advanced);
                                     });
                             }
-                            case "getreadableblockname": {
+                            case "getblocktextparts": {
                                 const msg = data as pxt.editor.EditorMessageGetBlockReadableNameRequest;
                                 return Promise.resolve()
                                     .then(() => {
-                                        const readableName = projectView.getReadableBlockName(msg.blockId);
+                                        const readableName = projectView.getBlockTextParts(msg.blockId);
                                         resp = { readableName } as pxt.editor.EditorMessageGetBlockReadableNameResponse;
                                     });
                             }
diff --git a/pxtservices/editorDriver.ts b/pxtservices/editorDriver.ts
index 6b532c3b3d9c..2789fbf3180c 100644
--- a/pxtservices/editorDriver.ts
+++ b/pxtservices/editorDriver.ts
@@ -389,11 +389,11 @@ export class EditorDriver extends IframeDriver {
         return (resp.resp as pxt.editor.EditorMessageGetToolboxCategoriesResponse).categories;
     }
 
-    async getReadableBlockName(blockId: string): Promise<pxt.editor.ReadableBlockName | undefined> {
+    async getBlockTextParts(blockId: string): Promise<pxt.editor.BlockTextParts | undefined> {
         const resp = await this.sendRequest(
             {
                 type: "pxteditor",
-                action: "getreadableblockname",
+                action: "getblocktextparts",
                 blockId
             } as pxt.editor.EditorMessageGetBlockReadableNameRequest
         ) as pxt.editor.EditorMessageResponse;
diff --git a/teachertool/src/components/CriteriaInstanceDisplay.tsx b/teachertool/src/components/CriteriaInstanceDisplay.tsx
index c408afdd0eae..190b8b4634d9 100644
--- a/teachertool/src/components/CriteriaInstanceDisplay.tsx
+++ b/teachertool/src/components/CriteriaInstanceDisplay.tsx
@@ -13,7 +13,7 @@ import { Strings, Ticks } from "../constants";
 import { showModal } from "../transforms/showModal";
 import { BlockPickerOptions } from "../types/modalOptions";
 import { validateParameterValue } from "../utils/validateParameterValue";
-import { loadReadableBlockName } from "../transforms/loadReadableBlockName";
+import { loadBlockTextParts } from "../transforms/loadReadableBlockName";
 
 interface InlineInputSegmentProps {
     initialValue: string;
@@ -81,33 +81,33 @@ const InlineInputSegment: React.FC<InlineInputSegmentProps> = ({
     );
 };
 
-interface ReadableBlockNameDisplayProps {
+interface ReadableBlockNameProps {
     blockData: BlockData;
 }
-const ReadableBlockNameDisplay: React.FC<ReadableBlockNameDisplayProps> = ({ blockData }) => {
-    const [readableName, setReadableName] = useState<pxt.editor.ReadableBlockName | undefined>(undefined);
+const ReadableBlockName: React.FC<ReadableBlockNameProps> = ({ blockData }) => {
+    const [blockTextParts, setBlockTextParts] = useState<pxt.editor.BlockTextParts | undefined>(undefined);
 
     useEffect(() => {
         async function updateReadableName(blockId: string | undefined) {
-            let blockReadableName: pxt.editor.ReadableBlockName | undefined;
+            let blockReadableName: pxt.editor.BlockTextParts | undefined;
             if (blockId) {
-                blockReadableName = blockId ? await loadReadableBlockName(blockId) : undefined;
+                blockReadableName = blockId ? await loadBlockTextParts(blockId) : undefined;
             }
 
             if (blockReadableName) {
-                setReadableName(blockReadableName);
+                setBlockTextParts(blockReadableName);
             } else {
                 // We were unable to get block name from the editor. Fallback to snippet name and/or name.
-                setReadableName({
+                setBlockTextParts({
                     parts: [{ kind: "label", content: blockData.block.snippetName || blockData.block.name }],
-                } as pxt.editor.ReadableBlockName);
+                } as pxt.editor.BlockTextParts);
             }
         }
 
         updateReadableName(blockData.block.blockId);
     }, [blockData]);
 
-    const readableComponent = readableName?.parts.map((part, i) => {
+    const readableComponent = blockTextParts?.parts.map((part, i) => {
         return (
             <span
                 key={`block-name-part-${i}`}
@@ -162,7 +162,7 @@ const BlockInputSegment: React.FC<BlockInputSegmentProps> = ({ instance, param }
     }
 
     const style = blockData ? { backgroundColor: blockData.category.color, color: "white" } : undefined;
-    const blockDisplay = blockData ? <ReadableBlockNameDisplay blockData={blockData} /> : null;
+    const blockDisplay = blockData ? <ReadableBlockName blockData={blockData} /> : null;
     return (
         <Button
             label={blockDisplay || param.value || param.name}
diff --git a/teachertool/src/services/makecodeEditorService.ts b/teachertool/src/services/makecodeEditorService.ts
index 9aae58698467..e5679dbb5efb 100644
--- a/teachertool/src/services/makecodeEditorService.ts
+++ b/teachertool/src/services/makecodeEditorService.ts
@@ -74,8 +74,8 @@ export async function getToolboxCategoriesAsync(
     return response;
 }
 
-export async function getReadableBlockName(blockId: string): Promise<pxt.editor.ReadableBlockName | undefined> {
-    const response = driver ? await driver.getReadableBlockName(blockId) : undefined;
+export async function getBlockTextParts(blockId: string): Promise<pxt.editor.BlockTextParts | undefined> {
+    const response = driver ? await driver.getBlockTextParts(blockId) : undefined;
     return response;
 }
 
diff --git a/teachertool/src/services/storageService.ts b/teachertool/src/services/storageService.ts
index 6e1d9efface1..6fb3bd9b7353 100644
--- a/teachertool/src/services/storageService.ts
+++ b/teachertool/src/services/storageService.ts
@@ -12,7 +12,7 @@ const RUN_ON_LOAD_KEY = [KEY_PREFIX, "runOnLoad"].join("/");
 const LAST_ACTIVE_CHECKLIST_KEY = [KEY_PREFIX, "lastActiveChecklist"].join("/");
 const SPLIT_POSITION_KEY = [KEY_PREFIX, "splitPosition"].join("/");
 const EXPANDED_CATALOG_TAGS_KEY = [KEY_PREFIX, "expandedCatalogTags"].join("/");
-const READABLE_BLOCK_NAME_PREFIX = [KEY_PREFIX, "readableBlockName"].join("/");
+const BLOCK_TEXT_PARTS_PREFIX = [KEY_PREFIX, "blockTextParts"].join("/");
 
 function getValue(key: string, defaultValue?: string): string | undefined {
     return localStorage.getItem(key) || defaultValue;
@@ -113,8 +113,8 @@ async function deleteChecklistFromIndexedDbAsync(name: string) {
     await db.deleteChecklist(name);
 }
 
-function getReadableBlockNameKey(blockId: string): string {
-    return [READABLE_BLOCK_NAME_PREFIX, blockId].join("/");
+function getBlockTextPartsKey(blockId: string): string {
+    return [BLOCK_TEXT_PARTS_PREFIX, blockId].join("/");
 }
 
 // ----------------------------------
@@ -241,8 +241,8 @@ export function removeExpandedCatalogTag(tag: string) {
     }
 }
 
-export function getCachedReadableBlockName(blockId: string): pxt.editor.ReadableBlockName | undefined {
-    const key = getReadableBlockNameKey(blockId);
+export function getCachedBlockTextParts(blockId: string): pxt.editor.BlockTextParts | undefined {
+    const key = getBlockTextPartsKey(blockId);
     try {
         const cachedReadableBlockName = getValue(key);
         return cachedReadableBlockName ? JSON.parse(cachedReadableBlockName) : undefined;
@@ -252,8 +252,8 @@ export function getCachedReadableBlockName(blockId: string): pxt.editor.Readable
     }
 }
 
-export function cacheReadableBlockName(blockId: string, readableBlockName: pxt.editor.ReadableBlockName) {
-    const key = getReadableBlockNameKey(blockId);
+export function cacheBlockTextParts(blockId: string, readableBlockName: pxt.editor.BlockTextParts) {
+    const key = getBlockTextPartsKey(blockId);
     try {
         setValue(key, JSON.stringify(readableBlockName));
     } catch (e) {
diff --git a/teachertool/src/transforms/loadReadableBlockName.ts b/teachertool/src/transforms/loadReadableBlockName.ts
index ae9e290f9fd9..48a7fb28b3f5 100644
--- a/teachertool/src/transforms/loadReadableBlockName.ts
+++ b/teachertool/src/transforms/loadReadableBlockName.ts
@@ -1,18 +1,18 @@
-import { getReadableBlockName } from "../services/makecodeEditorService";
-import { cacheReadableBlockName, getCachedReadableBlockName } from "../services/storageService";
+import { getBlockTextParts } from "../services/makecodeEditorService";
+import { cacheBlockTextParts, getCachedBlockTextParts } from "../services/storageService";
 
-export async function loadReadableBlockName(blockId: string): Promise<pxt.editor.ReadableBlockName | undefined> {
+export async function loadBlockTextParts(blockId: string): Promise<pxt.editor.BlockTextParts | undefined> {
     // Check for cached version.
-    let readableBlockName = getCachedReadableBlockName(blockId);
+    let readableBlockName = getCachedBlockTextParts(blockId);
     if (readableBlockName) {
         return Promise.resolve(readableBlockName);
     }
 
     // Call into editor service
-    readableBlockName = await getReadableBlockName(blockId);
+    readableBlockName = await getBlockTextParts(blockId);
     if (readableBlockName) {
         // Cache the result
-        cacheReadableBlockName(blockId, readableBlockName);
+        cacheBlockTextParts(blockId, readableBlockName);
     }
 
     return readableBlockName;
diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
index 02f647fdd37c..fd449c54e94d 100644
--- a/webapp/src/app.tsx
+++ b/webapp/src/app.tsx
@@ -4144,8 +4144,8 @@ export class ProjectView
     }
 
     // TODO thsparks : find a better name for this function
-    getReadableBlockNameFromBlocksBlockDefinition(block: pxt.blocks.BlockDefinition): pxt.editor.ReadableBlockName | undefined {
-        const parts: pxt.editor.ReadableBlockNamePart[] = [];
+    getBlockTextPartsFromBlocksBlockDefinition(block: pxt.blocks.BlockDefinition): pxt.editor.BlockTextParts | undefined {
+        const parts: pxt.editor.BlockTextPart[] = [];
         if (block?.block["message0"]) {
             // These message values use %1, %2, etc. for parameters.
             // Extract these into generic "value" parameters.
@@ -4185,7 +4185,7 @@ export class ProjectView
         return { parts };
     }
 
-    getReadableBlockName(blockId: string): pxt.editor.ReadableBlockName | undefined {
+    getBlockTextParts(blockId: string): pxt.editor.BlockTextParts | undefined {
         // Get toolbox block definition.
         let toolboxBlockMatch: BlockDefinition = undefined;
         for (const advanced of [true, false]) {
@@ -4201,7 +4201,7 @@ export class ProjectView
             return undefined;
         }
 
-        let readableName = toolboxHelpers.getBlockDescription(
+        let readableName = toolboxHelpers.getBlockTextParts(
             toolboxBlockMatch,
             toolboxBlockMatch.parameters ? toolboxBlockMatch.parameters.slice() : null,
             false);
@@ -4209,7 +4209,7 @@ export class ProjectView
         if (!readableName) {
             const blocksBlockMatch = pxt.blocks.getBlockDefinition(blockId);
             if (blocksBlockMatch) {
-                readableName = this.getReadableBlockNameFromBlocksBlockDefinition(blocksBlockMatch);
+                readableName = this.getBlockTextPartsFromBlocksBlockDefinition(blocksBlockMatch);
             }
         }
 
diff --git a/webapp/src/toolboxHelpers.ts b/webapp/src/toolboxHelpers.ts
index f924f75ed48b..8bbd71c346f1 100644
--- a/webapp/src/toolboxHelpers.ts
+++ b/webapp/src/toolboxHelpers.ts
@@ -6,8 +6,8 @@ export function getSnippetName(block: toolbox.BlockDefinition, isPython: boolean
 }
 
 // TODO thsparks : move monacoFlyout to use this too.
-export function getBlockDescription(block: toolbox.BlockDefinition, params: pxtc.ParameterDesc[], isPython: boolean): pxt.editor.ReadableBlockName {
-    let description: pxt.editor.ReadableBlockNamePart[] = [];
+export function getBlockTextParts(block: toolbox.BlockDefinition, params: pxtc.ParameterDesc[], isPython: boolean): pxt.editor.BlockTextParts {
+    let description: pxt.editor.BlockTextPart[] = [];
     let compileInfo = pxt.blocks.compileInfo(block as pxtc.SymbolInfo);
     let parts = block.attributes._def && block.attributes._def.parts;
     if (block.attributes.parentBlock) {

From f974f5679ea31129d004e02e07e7e1be985dc7d6 Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Fri, 20 Sep 2024 15:42:26 -0700
Subject: [PATCH 10/31] Move getBlockTextPartsFromBlocksBlockDefinition into
 helpers

---
 webapp/src/app.tsx           | 44 +-----------------------------------
 webapp/src/toolboxHelpers.ts | 42 ++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
index fd449c54e94d..d01e1e1b7219 100644
--- a/webapp/src/app.tsx
+++ b/webapp/src/app.tsx
@@ -4143,48 +4143,6 @@ export class ProjectView
         return { categories };
     }
 
-    // TODO thsparks : find a better name for this function
-    getBlockTextPartsFromBlocksBlockDefinition(block: pxt.blocks.BlockDefinition): pxt.editor.BlockTextParts | undefined {
-        const parts: pxt.editor.BlockTextPart[] = [];
-        if (block?.block["message0"]) {
-            // These message values use %1, %2, etc. for parameters.
-            // Extract these into generic "value" parameters.
-            const message = block.block["message0"];
-            const regex = /%(\d+)/g;
-            let lastIndex = 0;
-            let match;
-
-            while ((match = regex.exec(message)) !== null) {
-                // Add the text before the parameter as a label (if it's not empty)
-                if (match.index > lastIndex) {
-                    const content = message.substring(lastIndex, match.index).trim();
-                    if (content) {
-                        parts.push({ kind: "label", content });
-                    }
-                }
-
-                // Add the parameter
-                parts.push({
-                    kind: "param",
-                    content: "value"
-                });
-                lastIndex = regex.lastIndex;
-            }
-
-            // Add any remaining text after the last parameter as a label
-            if (lastIndex < message.length) {
-                parts.push({
-                    kind: "label",
-                    content: message.substring(lastIndex).trim()
-                });
-            }
-        } else {
-            parts.push({ kind: "label", content: block.name });
-        }
-
-        return { parts };
-    }
-
     getBlockTextParts(blockId: string): pxt.editor.BlockTextParts | undefined {
         // Get toolbox block definition.
         let toolboxBlockMatch: BlockDefinition = undefined;
@@ -4209,7 +4167,7 @@ export class ProjectView
         if (!readableName) {
             const blocksBlockMatch = pxt.blocks.getBlockDefinition(blockId);
             if (blocksBlockMatch) {
-                readableName = this.getBlockTextPartsFromBlocksBlockDefinition(blocksBlockMatch);
+                readableName = toolboxHelpers.getBlockTextPartsFromBlocksBlockDefinition(blocksBlockMatch);
             }
         }
 
diff --git a/webapp/src/toolboxHelpers.ts b/webapp/src/toolboxHelpers.ts
index 8bbd71c346f1..66cebef389a2 100644
--- a/webapp/src/toolboxHelpers.ts
+++ b/webapp/src/toolboxHelpers.ts
@@ -5,6 +5,48 @@ export function getSnippetName(block: toolbox.BlockDefinition, isPython: boolean
     return (isPython ? (block.pySnippetName || block.pyName) : undefined) || block.snippetName || block.name;
 }
 
+// TODO thsparks : find a better name for this function
+export function getBlockTextPartsFromBlocksBlockDefinition(block: pxt.blocks.BlockDefinition): pxt.editor.BlockTextParts | undefined {
+    const parts: pxt.editor.BlockTextPart[] = [];
+    if (block?.block["message0"]) {
+        // These message values use %1, %2, etc. for parameters.
+        // Extract these into generic "value" parameters.
+        const message = block.block["message0"];
+        const regex = /%(\d+)/g;
+        let lastIndex = 0;
+        let match;
+
+        while ((match = regex.exec(message)) !== null) {
+            // Add the text before the parameter as a label (if it's not empty)
+            if (match.index > lastIndex) {
+                const content = message.substring(lastIndex, match.index).trim();
+                if (content) {
+                    parts.push({ kind: "label", content });
+                }
+            }
+
+            // Add the parameter
+            parts.push({
+                kind: "param",
+                content: "value"
+            });
+            lastIndex = regex.lastIndex;
+        }
+
+        // Add any remaining text after the last parameter as a label
+        if (lastIndex < message.length) {
+            parts.push({
+                kind: "label",
+                content: message.substring(lastIndex).trim()
+            });
+        }
+    } else {
+        parts.push({ kind: "label", content: block.name });
+    }
+
+    return { parts };
+}
+
 // TODO thsparks : move monacoFlyout to use this too.
 export function getBlockTextParts(block: toolbox.BlockDefinition, params: pxtc.ParameterDesc[], isPython: boolean): pxt.editor.BlockTextParts {
     let description: pxt.editor.BlockTextPart[] = [];

From ab84d3df3000dd5715a8ef67ced0560eed232adf Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Fri, 20 Sep 2024 17:04:56 -0700
Subject: [PATCH 11/31] Refactor monacoFlyout to use shared getBlockTextParts
 function

---
 webapp/src/monacoFlyout.tsx  | 40 ++++++++----------------------------
 webapp/src/toolboxHelpers.ts |  8 ++++----
 2 files changed, 13 insertions(+), 35 deletions(-)

diff --git a/webapp/src/monacoFlyout.tsx b/webapp/src/monacoFlyout.tsx
index 3b12d2047b85..aaec0a977a05 100644
--- a/webapp/src/monacoFlyout.tsx
+++ b/webapp/src/monacoFlyout.tsx
@@ -5,11 +5,11 @@ import * as toolbox from "./toolbox";
 import * as workspace from "./workspace";
 import * as data from "./data";
 import * as auth from "./auth";
-import { HELP_IMAGE_URI } from "../../pxteditor";
 import * as pxtblockly from "../../pxtblocks";
+import { HELP_IMAGE_URI } from "../../pxteditor";
+import { getSnippetName, getBlockTextParts } from "./toolboxHelpers";
 
 import ISettingsProps = pxt.editor.ISettingsProps;
-import { getSnippetName } from "./monacopyhelper";
 
 const DRAG_THRESHOLD = 5;
 const SELECTED_BORDER_WIDTH = 4;
@@ -249,48 +249,26 @@ export class MonacoFlyout extends data.Component<MonacoFlyoutProps, MonacoFlyout
     protected getBlockDescription(block: toolbox.BlockDefinition, params: pxtc.ParameterDesc[]): JSX.Element[] {
         let description = [];
         let compileInfo = pxt.blocks.compileInfo(block as pxtc.SymbolInfo);
-        let parts = block.attributes._def && block.attributes._def.parts;
-        if (block.attributes.parentBlock) {
-            const parent = block.attributes.parentBlock;
-            const parentBlockParts = [...parent.attributes._def.parts];
-            const overrideLocation = parentBlockParts.findIndex((part: any) => part.kind === "param" && part.name === block.attributes.toolboxParentArgument);
-            if (overrideLocation !== -1) {
-                parentBlockParts.splice(overrideLocation, 1, ...block.attributes._def.parts);
-                parts = parentBlockParts;
-            }
-        }
         let name = block.qName || block.name;
         const isPython = this.props.fileType == pxt.editor.FileType.Python;
 
-        if (parts) {
-            if (params &&
-                parts.filter((p: any) => p.kind == "param").length > params.length) {
-                // add empty param when first argument is "this"
-                params.unshift(null);
-            }
-            parts.forEach((part, i) => {
+        const blockTextParts = getBlockTextParts(block, params, isPython);
+        if (blockTextParts?.parts?.length) {
+            blockTextParts.parts?.forEach((part, i) => {
                 switch (part.kind) {
                     case "label":
-                        description.push(<span key={name + i}>{part.text}</span>);
+                        description.push(<span key={name + i}>{part.content}</span>);
                         break;
                     case "break":
                         description.push(<span key={name + i}>{" "}</span>);
                         break;
                     case "param":
-                        let actualParam = compileInfo?.definitionNameToParam[part.name];
-                        let val = actualParam?.defaultValue
-                            || part.varName
-                            || actualParam?.actualName
-                            || part.name
-                        if (isPython && actualParam?.defaultValue) {
-                            val = pxtc.tsSnippetToPySnippet(val);
-                        }
-                        description.push(<span className="argName" key={name + i}>{val}</span>);
+                        description.push(<span className="argName" key={name + i}>{part.content}</span>);
                         break;
                 }
-            })
+            });
         } else {
-            // if no blockdef found, use the snippet name
+            // if no parts found, use the snippet name
             description.push(<span key={name}>{getSnippetName(block, isPython) || block.name}</span>)
         }
 
diff --git a/webapp/src/toolboxHelpers.ts b/webapp/src/toolboxHelpers.ts
index 66cebef389a2..150240b65781 100644
--- a/webapp/src/toolboxHelpers.ts
+++ b/webapp/src/toolboxHelpers.ts
@@ -8,7 +8,7 @@ export function getSnippetName(block: toolbox.BlockDefinition, isPython: boolean
 // TODO thsparks : find a better name for this function
 export function getBlockTextPartsFromBlocksBlockDefinition(block: pxt.blocks.BlockDefinition): pxt.editor.BlockTextParts | undefined {
     const parts: pxt.editor.BlockTextPart[] = [];
-    if (block?.block["message0"]) {
+    if (block?.block && block.block["message0"]) {
         // These message values use %1, %2, etc. for parameters.
         // Extract these into generic "value" parameters.
         const message = block.block["message0"];
@@ -33,7 +33,7 @@ export function getBlockTextPartsFromBlocksBlockDefinition(block: pxt.blocks.Blo
             lastIndex = regex.lastIndex;
         }
 
-        // Add any remaining text after the last parameter as a label
+        // Add any remaining text after the last parameter
         if (lastIndex < message.length) {
             parts.push({
                 kind: "label",
@@ -47,8 +47,8 @@ export function getBlockTextPartsFromBlocksBlockDefinition(block: pxt.blocks.Blo
     return { parts };
 }
 
-// TODO thsparks : move monacoFlyout to use this too.
-export function getBlockTextParts(block: toolbox.BlockDefinition, params: pxtc.ParameterDesc[], isPython: boolean): pxt.editor.BlockTextParts {
+// Breaks a block down into segments that can be displayed in a readable format.
+export function getBlockTextParts(block: toolbox.BlockDefinition, params: pxtc.ParameterDesc[], isPython: boolean): pxt.editor.BlockTextParts | undefined {
     let description: pxt.editor.BlockTextPart[] = [];
     let compileInfo = pxt.blocks.compileInfo(block as pxtc.SymbolInfo);
     let parts = block.attributes._def && block.attributes._def.parts;

From b74e8bafb72239bd11cea74de27ae5bb5044c44b Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Fri, 20 Sep 2024 17:05:15 -0700
Subject: [PATCH 12/31] Don't cache for now (just because I need it uncached
 for testing)

---
 teachertool/src/transforms/loadReadableBlockName.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/teachertool/src/transforms/loadReadableBlockName.ts b/teachertool/src/transforms/loadReadableBlockName.ts
index 48a7fb28b3f5..b70f7471be80 100644
--- a/teachertool/src/transforms/loadReadableBlockName.ts
+++ b/teachertool/src/transforms/loadReadableBlockName.ts
@@ -5,14 +5,15 @@ export async function loadBlockTextParts(blockId: string): Promise<pxt.editor.Bl
     // Check for cached version.
     let readableBlockName = getCachedBlockTextParts(blockId);
     if (readableBlockName) {
-        return Promise.resolve(readableBlockName);
+        // TODO thsparks : Uncomment after testing and verify this works.
+        // return Promise.resolve(readableBlockName);
     }
 
-    // Call into editor service
+    // Call into editor service & cache result
     readableBlockName = await getBlockTextParts(blockId);
     if (readableBlockName) {
-        // Cache the result
-        cacheBlockTextParts(blockId, readableBlockName);
+        // TODO thsparks : Uncomment after testing and verify this works.
+        // cacheBlockTextParts(blockId, readableBlockName);
     }
 
     return readableBlockName;

From df4b703f8973d5c416d5589761f513436d8db8ba Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Fri, 20 Sep 2024 17:05:27 -0700
Subject: [PATCH 13/31] Replace all params with value

---
 .../src/components/CriteriaInstanceDisplay.tsx        | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/teachertool/src/components/CriteriaInstanceDisplay.tsx b/teachertool/src/components/CriteriaInstanceDisplay.tsx
index 190b8b4634d9..5d40ff9269a0 100644
--- a/teachertool/src/components/CriteriaInstanceDisplay.tsx
+++ b/teachertool/src/components/CriteriaInstanceDisplay.tsx
@@ -108,6 +108,15 @@ const ReadableBlockName: React.FC<ReadableBlockNameProps> = ({ blockData }) => {
     }, [blockData]);
 
     const readableComponent = blockTextParts?.parts.map((part, i) => {
+        let content = "";
+        if (part.kind === "param") {
+            // Mask default values like "hello!" with generic "value"
+            // This is done to reduce confusion about what is actually being checked.
+            content = lf("value");
+        } else if (part.kind === "label" && part.content) {
+            content = part.content;
+        }
+
         return (
             <span
                 key={`block-name-part-${i}`}
@@ -116,7 +125,7 @@ const ReadableBlockName: React.FC<ReadableBlockNameProps> = ({ blockData }) => {
                     part.kind === "param" ? css["block-name-param"] : css["block-name-label"]
                 )}
             >
-                {part.kind == "break" ? "" : part.content}
+                {content}
             </span>
         );
     });

From 944acd72a53091d214bbeb963bcb32d912c99f87 Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Mon, 23 Sep 2024 17:40:48 -0700
Subject: [PATCH 14/31] Add snippet names for blocks

---
 webapp/src/blocksSnippets.ts | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/webapp/src/blocksSnippets.ts b/webapp/src/blocksSnippets.ts
index bf689654ec6d..18044d4fdb44 100644
--- a/webapp/src/blocksSnippets.ts
+++ b/webapp/src/blocksSnippets.ts
@@ -19,6 +19,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
             blocks: [
                 {
                     name: "controls_repeat_ext",
+                    snippetName: "repeat",
                     attributes: {
                         blockId: "controls_repeat_ext",
                         weight: 49
@@ -32,6 +33,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                 </block>`
                 }, {
                     name: "device_while",
+                    snippetName: "while",
                     attributes: {
                         blockId: "device_while",
                         weight: 48
@@ -46,6 +48,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                 },
                 {
                     name: "pxt_controls_for",
+                    snippetName: "for",
                     attributes: {
                         blockId: "pxt_controls_for",
                         weight: 47
@@ -66,6 +69,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                 },
                 {
                     name: "pxt_controls_for_of",
+                    snippetName: "for of",
                     attributes: {
                         blockId: "pxt_controls_for_of",
                         weight: 46
@@ -95,6 +99,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
         if (pxt.appTarget.runtime && pxt.appTarget.runtime.breakBlock) {
             _cachedBuiltinCategories[CategoryNameID.Loops].blocks.push({
                 name: "pxt_break",
+                snippetName: "break",
                 attributes: {
                     blockId: "break_keyword",
                     weight: 30
@@ -105,6 +110,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
         if (pxt.appTarget.runtime && pxt.appTarget.runtime.continueBlock) {
             _cachedBuiltinCategories[CategoryNameID.Loops].blocks.push({
                 name: "pxt_continue",
+                snippetName: "continue",
                 attributes: {
                     blockId: "continue_keyword",
                     weight: 29
@@ -119,6 +125,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
             blocks: [
                 {
                     name: "controls_if",
+                    snippetName: "if",
                     attributes: {
                         blockId: "controls_if",
                         group: lf("Conditionals"),
@@ -133,6 +140,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                 </block>`
                 }, {
                     name: "controls_if_else",
+                    snippetName: "if else",
                     attributes: {
                         blockId: "controls_if",
                         group: lf("Conditionals"),
@@ -148,6 +156,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                 </block>`
                 }, {
                     name: "logic_compare_eq",
+                    snippetName: "equals",
                     attributes: {
                         blockId: "logic_compare",
                         group: lf("Comparison"),
@@ -167,6 +176,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                 </block>`
                 }, {
                     name: "logic_compare_lt",
+                    snippetName: "less than",
                     attributes: {
                         blockId: "logic_compare",
                         group: lf("Comparison"),
@@ -187,6 +197,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                 </block>`
                 }, {
                     name: "logic_compare_strings",
+                    snippetName: "equals",
                     attributes: {
                         blockId: "logic_compare",
                         group: lf("Comparison"),
@@ -206,6 +217,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                 </block>`
                 }, {
                     name: "logic_operation_and",
+                    snippetName: "and",
                     attributes: {
                         blockId: "logic_operation",
                         group: lf("Boolean"),
@@ -216,6 +228,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                 </block>`
                 }, {
                     name: "logic_operation_or",
+                    snippetName: "or",
                     attributes: {
                         blockId: "logic_operation",
                         group: lf("Boolean"),
@@ -226,6 +239,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                 </block>`
                 }, {
                     name: "logic_negate",
+                    snippetName: "not",
                     attributes: {
                         blockId: "logic_negate",
                         group: lf("Boolean"),
@@ -234,6 +248,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                     blockXml: `<block type="logic_negate"></block>`
                 }, {
                     name: "logic_boolean_true",
+                    snippetName: "true",
                     attributes: {
                         blockId: "logic_boolean",
                         group: lf("Boolean"),
@@ -244,6 +259,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                 </block>`
                 }, {
                     name: "logic_boolean_false",
+                    snippetName: "false",
                     attributes: {
                         blockId: "logic_boolean",
                         group: lf("Boolean"),
@@ -282,6 +298,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
             blocks: [
                 {
                     name: "math_arithmetic_ADD",
+                    snippetName: "plus",
                     attributes: {
                         blockId: "math_arithmetic",
                         weight: 90
@@ -301,6 +318,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                     </block>`
                 }, {
                     name: "math_arithmetic_MINUS",
+                    snippetName: "minus",
                     attributes: {
                         blockId: "math_arithmetic",
                         weight: 89
@@ -320,6 +338,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                     </block>`
                 }, {
                     name: "math_arithmetic_TIMES",
+                    snippetName: "times",
                     attributes: {
                         blockId: "math_arithmetic",
                         weight: 88
@@ -339,6 +358,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                     </block>`
                 }, {
                     name: "math_arithmetic_DIVIDE",
+                    snippetName: "divide",
                     attributes: {
                         blockId: "math_arithmetic",
                         weight: 87
@@ -358,6 +378,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                     </block>`
                 }, {
                     name: "math_number",
+                    snippetName: "number",
                     attributes: {
                         blockId: "math_number",
                         weight: 86
@@ -367,6 +388,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                     </block>`
                 }, {
                     name: "math_modulo",
+                    snippetName: "remainder",
                     attributes: {
                         blockId: "math_modulo",
                         weight: 85
@@ -385,6 +407,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                     </block>`
                 }, {
                     name: "math_op2_min",
+                    snippetName: "min",
                     attributes: {
                         blockId: "math_op2",
                         weight: 84
@@ -404,6 +427,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                     </block>`
                 }, {
                     name: "math_op2_max",
+                    snippetName: "max",
                     attributes: {
                         blockId: "math_op2",
                         weight: 83
@@ -423,6 +447,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                     </block>`
                 }, {
                     name: "math_op3",
+                    snippetName: "absolute value",
                     attributes: {
                         blockId: "math_op3",
                         weight: 82
@@ -436,6 +461,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                     </block>`
                 }, {
                     name: "math_js_op",
+                    snippetName: "square root",
                     attributes: {
                         blockId: "math_js_op",
                         weight: 81
@@ -450,6 +476,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                     </block>`
                 }, {
                     name: "math_js_round",
+                    snippetName: "round",
                     attributes: {
                         blockId: "math_js_round",
                         weight: 80
@@ -494,6 +521,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
             blocks: [
                 {
                     name: "lists_create_with",
+                    snippetName: "create array",
                     attributes: {
                         blockId: "lists_create_with",
                         group: "Create",
@@ -519,6 +547,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                     </block>`
                 }, {
                     name: "lists_create_with",
+                    snippetName: "create array",
                     attributes: {
                         blockId: "lists_create_with",
                         group: "Create",
@@ -549,6 +578,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                     </block>`
                 }, {
                     name: "lists_create_with",
+                    snippetName: "create array",
                     attributes: {
                         blockId: "lists_create_with",
                         group: "Create",
@@ -560,6 +590,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                 },
                 {
                     name: "lists_index_get",
+                    snippetName: "array get value",
                     attributes: {
                         blockId: "lists_index_get",
                         group: "Read",
@@ -580,6 +611,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                 },
                 {
                     name: "lists_index_set",
+                    snippetName: "array set value",
                     attributes: {
                         blockId: "lists_index_set",
                         group: "Modify",
@@ -600,6 +632,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                 },
                 {
                     name: "lists_length",
+                    snippetName: "array length",
                     attributes: {
                         blockId: "lists_length",
                         group: "Read",
@@ -629,6 +662,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
             blocks: [
                 {
                     name: "text",
+                    snippetName: "text",
                     attributes: {
                         blockId: "text",
                         weight: 90
@@ -636,6 +670,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                     blockXml: `<block type="text"></block>`
                 }, {
                     name: "text_length",
+                    snippetName: "text length",
                     attributes: {
                         blockId: "text_length",
                         weight: 89
@@ -649,6 +684,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                     </block>`
                 }, {
                     name: "text_join",
+                    snippetName: "text join",
                     attributes: {
                         blockId: "text_join",
                         weight: 88

From c131bfb27fc62c59148445caea8fc444dc87815d Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Mon, 23 Sep 2024 17:41:18 -0700
Subject: [PATCH 15/31] Use snippet names as fallback

---
 webapp/src/app.tsx           | 48 ++++++++++++++++++++----------------
 webapp/src/toolboxHelpers.ts | 42 -------------------------------
 2 files changed, 27 insertions(+), 63 deletions(-)

diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
index d01e1e1b7219..5b0076b85e70 100644
--- a/webapp/src/app.tsx
+++ b/webapp/src/app.tsx
@@ -4145,37 +4145,43 @@ export class ProjectView
 
     getBlockTextParts(blockId: string): pxt.editor.BlockTextParts | undefined {
         // Get toolbox block definition.
-        let toolboxBlockMatch: BlockDefinition = undefined;
-        for (const advanced of [true, false]) {
+        const toolboxBlockMatches: BlockDefinition[] = [];
+        for (const advanced of [false, true]) {
             for (const category of this.blocksEditor.getToolboxCategories(advanced)) {
-                toolboxBlockMatch = category.blocks.find(b => b.attributes.blockId === blockId);
-                if (toolboxBlockMatch) break;
+                for (const match of category.blocks?.filter(b => b.attributes.blockId === blockId) ?? []) {
+                    toolboxBlockMatches.push(match);
+                }
             }
-            if (toolboxBlockMatch) break;
         }
 
-        if (!toolboxBlockMatch) {
-            console.log("DEBUG: No Block Match for blockId: " + blockId);
+        if (toolboxBlockMatches.length === 0) {
             return undefined;
         }
 
-        let readableName = toolboxHelpers.getBlockTextParts(
-            toolboxBlockMatch,
-            toolboxBlockMatch.parameters ? toolboxBlockMatch.parameters.slice() : null,
-            false);
+        const blockSnippets: string[] = [];
+        for (const match of toolboxBlockMatches) {
+            let readableName = toolboxHelpers.getBlockTextParts(
+                match,
+                match.parameters ? match.parameters.slice() : null,
+                false);
 
-        if (!readableName) {
-            const blocksBlockMatch = pxt.blocks.getBlockDefinition(blockId);
-            if (blocksBlockMatch) {
-                readableName = toolboxHelpers.getBlockTextPartsFromBlocksBlockDefinition(blocksBlockMatch);
-            }
+                if (readableName) {
+                    // TODO thsparks - what to do if there are multiple matches?
+                    return readableName;
+                }
+
+                if (!readableName) {
+                    blockSnippets.push(toolboxHelpers.getSnippetName(match, false) || match.name);
+                }
         }
 
-        if (!readableName) {
-            readableName.parts.push({
-                kind: "label",
-                content: toolboxHelpers.getSnippetName(toolboxBlockMatch, false) || toolboxBlockMatch.name,
-            });
+        const readableName: pxt.editor.BlockTextParts = blockSnippets.length === 0 ? undefined : {
+            parts: [
+                {
+                    kind: "label",
+                    content: blockSnippets.join(" | ")
+                }
+            ],
         }
 
         return readableName;
diff --git a/webapp/src/toolboxHelpers.ts b/webapp/src/toolboxHelpers.ts
index 150240b65781..16d92b686e4a 100644
--- a/webapp/src/toolboxHelpers.ts
+++ b/webapp/src/toolboxHelpers.ts
@@ -5,48 +5,6 @@ export function getSnippetName(block: toolbox.BlockDefinition, isPython: boolean
     return (isPython ? (block.pySnippetName || block.pyName) : undefined) || block.snippetName || block.name;
 }
 
-// TODO thsparks : find a better name for this function
-export function getBlockTextPartsFromBlocksBlockDefinition(block: pxt.blocks.BlockDefinition): pxt.editor.BlockTextParts | undefined {
-    const parts: pxt.editor.BlockTextPart[] = [];
-    if (block?.block && block.block["message0"]) {
-        // These message values use %1, %2, etc. for parameters.
-        // Extract these into generic "value" parameters.
-        const message = block.block["message0"];
-        const regex = /%(\d+)/g;
-        let lastIndex = 0;
-        let match;
-
-        while ((match = regex.exec(message)) !== null) {
-            // Add the text before the parameter as a label (if it's not empty)
-            if (match.index > lastIndex) {
-                const content = message.substring(lastIndex, match.index).trim();
-                if (content) {
-                    parts.push({ kind: "label", content });
-                }
-            }
-
-            // Add the parameter
-            parts.push({
-                kind: "param",
-                content: "value"
-            });
-            lastIndex = regex.lastIndex;
-        }
-
-        // Add any remaining text after the last parameter
-        if (lastIndex < message.length) {
-            parts.push({
-                kind: "label",
-                content: message.substring(lastIndex).trim()
-            });
-        }
-    } else {
-        parts.push({ kind: "label", content: block.name });
-    }
-
-    return { parts };
-}
-
 // Breaks a block down into segments that can be displayed in a readable format.
 export function getBlockTextParts(block: toolbox.BlockDefinition, params: pxtc.ParameterDesc[], isPython: boolean): pxt.editor.BlockTextParts | undefined {
     let description: pxt.editor.BlockTextPart[] = [];

From 6bf02b1f6ef5e931f489e4cc15765a1b5c679084 Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Tue, 24 Sep 2024 11:28:09 -0700
Subject: [PATCH 16/31] Styling adjustments

---
 .../src/components/styling/CriteriaInstanceDisplay.module.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss b/teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss
index 6cbe77f8f976..a85d034f2420 100644
--- a/teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss
+++ b/teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss
@@ -53,9 +53,10 @@
                     .block-name-segment {
                         margin-left: 0;
                         margin-right: 0.2rem;
+                        line-height: normal;
                     }
                     .block-name-param {
-                        border-radius: 0.5rem;
+                        border-radius: 1rem;
                         padding: 0.2rem 0.4rem;
                         background-color: rgba(0, 0, 0, 0.3);
                     }

From 7799b368c0b52d8eda1cd09e01a9145dac988741 Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Tue, 24 Sep 2024 15:05:25 -0700
Subject: [PATCH 17/31] Different name for the square root (and other
 operations) block. I struggled to figure out what to call this one, opted for
 the simplest approach which is just to include a subset of the options in it.
 Don't love this, but doing it for now until I can think of something better.

---
 webapp/src/blocksSnippets.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/blocksSnippets.ts b/webapp/src/blocksSnippets.ts
index 18044d4fdb44..53d6636541c4 100644
--- a/webapp/src/blocksSnippets.ts
+++ b/webapp/src/blocksSnippets.ts
@@ -461,7 +461,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                     </block>`
                 }, {
                     name: "math_js_op",
-                    snippetName: "square root",
+                    snippetName: "sqrt | sin | cos | tan | ...",
                     attributes: {
                         blockId: "math_js_op",
                         weight: 81

From 7b5a829cd566c016b2c2667e54036147fbb5b28b Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Tue, 24 Sep 2024 15:05:34 -0700
Subject: [PATCH 18/31] Re-include caching logic

---
 teachertool/src/transforms/loadReadableBlockName.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/teachertool/src/transforms/loadReadableBlockName.ts b/teachertool/src/transforms/loadReadableBlockName.ts
index b70f7471be80..9221b0c1d7c0 100644
--- a/teachertool/src/transforms/loadReadableBlockName.ts
+++ b/teachertool/src/transforms/loadReadableBlockName.ts
@@ -5,15 +5,13 @@ export async function loadBlockTextParts(blockId: string): Promise<pxt.editor.Bl
     // Check for cached version.
     let readableBlockName = getCachedBlockTextParts(blockId);
     if (readableBlockName) {
-        // TODO thsparks : Uncomment after testing and verify this works.
-        // return Promise.resolve(readableBlockName);
+        return Promise.resolve(readableBlockName);
     }
 
     // Call into editor service & cache result
     readableBlockName = await getBlockTextParts(blockId);
     if (readableBlockName) {
-        // TODO thsparks : Uncomment after testing and verify this works.
-        // cacheBlockTextParts(blockId, readableBlockName);
+        cacheBlockTextParts(blockId, readableBlockName);
     }
 
     return readableBlockName;

From d228a5655b37eb87e3916323f016702962a66ee3 Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Tue, 24 Sep 2024 16:12:35 -0700
Subject: [PATCH 19/31] Remove unnecessary code movement change

---
 .../src/components/CriteriaInstanceDisplay.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/teachertool/src/components/CriteriaInstanceDisplay.tsx b/teachertool/src/components/CriteriaInstanceDisplay.tsx
index 5d40ff9269a0..05c60778b09c 100644
--- a/teachertool/src/components/CriteriaInstanceDisplay.tsx
+++ b/teachertool/src/components/CriteriaInstanceDisplay.tsx
@@ -146,6 +146,15 @@ interface BlockData {
 const BlockInputSegment: React.FC<BlockInputSegmentProps> = ({ instance, param }) => {
     const { state: teacherTool } = useContext(AppStateContext);
 
+    function handleClick() {
+        pxt.tickEvent(Ticks.BlockPickerOpened, { criteriaCatalogId: instance.catalogCriteriaId });
+        showModal({
+            modal: "block-picker",
+            criteriaInstanceId: instance.instanceId,
+            paramName: param.name,
+        } as BlockPickerOptions);
+    }
+
     const blockData = useMemo<BlockData | undefined>(() => {
         if (!param.value || !teacherTool.toolboxCategories) {
             return undefined;
@@ -161,15 +170,6 @@ const BlockInputSegment: React.FC<BlockInputSegmentProps> = ({ instance, param }
         return undefined;
     }, [param.value, teacherTool.toolboxCategories]);
 
-    function handleClick() {
-        pxt.tickEvent(Ticks.BlockPickerOpened, { criteriaCatalogId: instance.catalogCriteriaId });
-        showModal({
-            modal: "block-picker",
-            criteriaInstanceId: instance.instanceId,
-            paramName: param.name,
-        } as BlockPickerOptions);
-    }
-
     const style = blockData ? { backgroundColor: blockData.category.color, color: "white" } : undefined;
     const blockDisplay = blockData ? <ReadableBlockName blockData={blockData} /> : null;
     return (

From dbe3493e06265665baa291187be705000c646e6f Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Tue, 24 Sep 2024 16:13:42 -0700
Subject: [PATCH 20/31] Minor code cleanup

---
 teachertool/src/components/CriteriaInstanceDisplay.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/teachertool/src/components/CriteriaInstanceDisplay.tsx b/teachertool/src/components/CriteriaInstanceDisplay.tsx
index 05c60778b09c..4920259ad038 100644
--- a/teachertool/src/components/CriteriaInstanceDisplay.tsx
+++ b/teachertool/src/components/CriteriaInstanceDisplay.tsx
@@ -171,10 +171,10 @@ const BlockInputSegment: React.FC<BlockInputSegmentProps> = ({ instance, param }
     }, [param.value, teacherTool.toolboxCategories]);
 
     const style = blockData ? { backgroundColor: blockData.category.color, color: "white" } : undefined;
-    const blockDisplay = blockData ? <ReadableBlockName blockData={blockData} /> : null;
+    const blockDisplay = blockData ? <ReadableBlockName blockData={blockData} /> : param.value || param.name;
     return (
         <Button
-            label={blockDisplay || param.value || param.name}
+            label={blockDisplay}
             className={classList(css["block-input-btn"], param.value ? undefined : css["error"])}
             onClick={handleClick}
             title={param.value ? Strings.SelectBlock : `${Strings.SelectBlock}: ${Strings.ValueRequired}`}

From 39a8500adb0935441bb2c270434739e0dd227d10 Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Tue, 24 Sep 2024 16:58:26 -0700
Subject: [PATCH 21/31] Only rely on blockId (not blockData) to display the
 readable component. This way we don't have to wait for the toolbox info to
 display cached results.

---
 .../components/CriteriaInstanceDisplay.tsx    | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/teachertool/src/components/CriteriaInstanceDisplay.tsx b/teachertool/src/components/CriteriaInstanceDisplay.tsx
index 4920259ad038..e4fd1da33d72 100644
--- a/teachertool/src/components/CriteriaInstanceDisplay.tsx
+++ b/teachertool/src/components/CriteriaInstanceDisplay.tsx
@@ -82,9 +82,10 @@ const InlineInputSegment: React.FC<InlineInputSegmentProps> = ({
 };
 
 interface ReadableBlockNameProps {
-    blockData: BlockData;
+    blockId: string;
 }
-const ReadableBlockName: React.FC<ReadableBlockNameProps> = ({ blockData }) => {
+const ReadableBlockName: React.FC<ReadableBlockNameProps> = ({ blockId }) => {
+    const { state: teacherTool } = useContext(AppStateContext);
     const [blockTextParts, setBlockTextParts] = useState<pxt.editor.BlockTextParts | undefined>(undefined);
 
     useEffect(() => {
@@ -96,16 +97,19 @@ const ReadableBlockName: React.FC<ReadableBlockNameProps> = ({ blockData }) => {
 
             if (blockReadableName) {
                 setBlockTextParts(blockReadableName);
+            } else if (!teacherTool.toolboxCategories) {
+                // If teacherTool.toolboxCategories has not loaded yet, we may get the readable component later once it loads.
+                // Show a spinner (handled below).
+                setBlockTextParts(undefined);
             } else {
-                // We were unable to get block name from the editor. Fallback to snippet name and/or name.
-                setBlockTextParts({
-                    parts: [{ kind: "label", content: blockData.block.snippetName || blockData.block.name }],
-                } as pxt.editor.BlockTextParts);
+                // TeacherTool.toolboxCategories has loaded and we still don't have a readable component.
+                // We won't be able to get it, so fallback to the id.
+                setBlockTextParts({ parts: [ { kind: "label", content: blockId } ] });
             }
         }
 
-        updateReadableName(blockData.block.blockId);
-    }, [blockData]);
+        updateReadableName(blockId);
+    }, [blockId, teacherTool.toolboxCategories]);
 
     const readableComponent = blockTextParts?.parts.map((part, i) => {
         let content = "";
@@ -171,7 +175,7 @@ const BlockInputSegment: React.FC<BlockInputSegmentProps> = ({ instance, param }
     }, [param.value, teacherTool.toolboxCategories]);
 
     const style = blockData ? { backgroundColor: blockData.category.color, color: "white" } : undefined;
-    const blockDisplay = blockData ? <ReadableBlockName blockData={blockData} /> : param.value || param.name;
+    const blockDisplay = param.value ? <ReadableBlockName blockId={param.value} /> : param.name;
     return (
         <Button
             label={blockDisplay}

From 1de0863b453bfa0980fb2ec210c10292809b8603 Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Tue, 24 Sep 2024 17:28:57 -0700
Subject: [PATCH 22/31] Clean up code in app.tsx

---
 webapp/src/app.tsx | 56 +++++++++++++++++++++++-----------------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
index 5b0076b85e70..41b3b48dd661 100644
--- a/webapp/src/app.tsx
+++ b/webapp/src/app.tsx
@@ -4143,45 +4143,45 @@ export class ProjectView
         return { categories };
     }
 
-    getBlockTextParts(blockId: string): pxt.editor.BlockTextParts | undefined {
-        // Get toolbox block definition.
-        const toolboxBlockMatches: BlockDefinition[] = [];
+    getBlocksWithId(blockId: string): BlockDefinition[] {
+        const matches: BlockDefinition[] = [];
         for (const advanced of [false, true]) {
             for (const category of this.blocksEditor.getToolboxCategories(advanced)) {
                 for (const match of category.blocks?.filter(b => b.attributes.blockId === blockId) ?? []) {
-                    toolboxBlockMatches.push(match);
+                    matches.push(match);
                 }
             }
         }
 
-        if (toolboxBlockMatches.length === 0) {
+        return matches;
+    }
+
+    getBlockTextParts(blockId: string): pxt.editor.BlockTextParts | undefined {
+        const blocksWithId = this.getBlocksWithId(blockId);
+        let readableName: pxt.editor.BlockTextParts = undefined;
+        if (blocksWithId.length === 0) {
             return undefined;
+        } else if (blocksWithId.length === 1) {
+            const block = blocksWithId[0];
+            readableName = toolboxHelpers.getBlockTextParts(block, block.parameters ? block.parameters.slice() : null, false);
         }
 
-        const blockSnippets: string[] = [];
-        for (const match of toolboxBlockMatches) {
-            let readableName = toolboxHelpers.getBlockTextParts(
-                match,
-                match.parameters ? match.parameters.slice() : null,
-                false);
-
-                if (readableName) {
-                    // TODO thsparks - what to do if there are multiple matches?
-                    return readableName;
-                }
-
-                if (!readableName) {
-                    blockSnippets.push(toolboxHelpers.getSnippetName(match, false) || match.name);
-                }
-        }
+        if (!readableName) {
+            // Found nultiple blocks matching the id, or we were unable to generate a readable name from block parameters.
+            // In this case, use the block snippet names to describe the block.
+            const blockSnippets: string[] = [];
+            for (const block of blocksWithId) {
+                    blockSnippets.push(toolboxHelpers.getSnippetName(block, false) || block.name);
+            }
 
-        const readableName: pxt.editor.BlockTextParts = blockSnippets.length === 0 ? undefined : {
-            parts: [
-                {
-                    kind: "label",
-                    content: blockSnippets.join(" | ")
-                }
-            ],
+            readableName = blockSnippets.length === 0 ? undefined : {
+                parts: [
+                    {
+                        kind: "label",
+                        content: blockSnippets.join(" | ")
+                    }
+                ],
+            }
         }
 
         return readableName;

From b19ddac116ae15cea9a9661e358196a17238a8bd Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Tue, 24 Sep 2024 18:08:43 -0700
Subject: [PATCH 23/31] Do not show duplicate names

---
 webapp/src/app.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
index 41b3b48dd661..81b592f8f55c 100644
--- a/webapp/src/app.tsx
+++ b/webapp/src/app.tsx
@@ -4170,11 +4170,12 @@ export class ProjectView
             // Found nultiple blocks matching the id, or we were unable to generate a readable name from block parameters.
             // In this case, use the block snippet names to describe the block.
             const blockSnippets: string[] = [];
-            for (const block of blocksWithId) {
-                    blockSnippets.push(toolboxHelpers.getSnippetName(block, false) || block.name);
+            for (const name of blocksWithId.map(b => b.snippetName || b.name)) {
+                if (blockSnippets.indexOf(name) === -1) {
+                    blockSnippets.push(name);
+                }
             }
-
-            readableName = blockSnippets.length === 0 ? undefined : {
+            readableName = {
                 parts: [
                     {
                         kind: "label",

From d0f5fa09c05f9004f84eb889dc99935d5b7c9cc9 Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Tue, 24 Sep 2024 18:31:28 -0700
Subject: [PATCH 24/31] Remove shared use of getSnippetName. It was causing
 more complexity than it removed.

---
 webapp/src/monacoFlyout.tsx  | 13 +++++++++----
 webapp/src/toolboxHelpers.ts |  4 ----
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/webapp/src/monacoFlyout.tsx b/webapp/src/monacoFlyout.tsx
index aaec0a977a05..8c19119aec97 100644
--- a/webapp/src/monacoFlyout.tsx
+++ b/webapp/src/monacoFlyout.tsx
@@ -7,7 +7,7 @@ import * as data from "./data";
 import * as auth from "./auth";
 import * as pxtblockly from "../../pxtblocks";
 import { HELP_IMAGE_URI } from "../../pxteditor";
-import { getSnippetName, getBlockTextParts } from "./toolboxHelpers";
+import { getBlockTextParts } from "./toolboxHelpers";
 
 import ISettingsProps = pxt.editor.ISettingsProps;
 
@@ -136,7 +136,7 @@ export class MonacoFlyout extends data.Component<MonacoFlyoutProps, MonacoFlyout
                 dragBlock.id = "monacoDraggingBlock";
                 dragBlock.textContent = block.snippetOnly
                     ? block.snippet
-                    : `${this.getQName(block) || getSnippetName(block, this.props.fileType == pxt.editor.FileType.Python)}${params ? `(${params.map(p => p.name).join(", ")})` : ""}`
+                    : `${this.getQName(block) || this.getSnippetName(block)}${params ? `(${params.map(p => p.name).join(", ")})` : ""}`
                 dragBlock.style.backgroundColor = this.dragInfo.color;
                 parent.appendChild(dragBlock);
 
@@ -246,6 +246,11 @@ export class MonacoFlyout extends data.Component<MonacoFlyoutProps, MonacoFlyout
         return this.props.fileType == pxt.editor.FileType.Python && block.pyQName ? block.pyQName : block.qName;
     }
 
+    protected getSnippetName(block: toolbox.BlockDefinition): string {
+        const isPython = this.props.fileType == pxt.editor.FileType.Python;
+        return (isPython ? (block.pySnippetName || block.pyName) : undefined) || block.snippetName || block.name;
+    }
+
     protected getBlockDescription(block: toolbox.BlockDefinition, params: pxtc.ParameterDesc[]): JSX.Element[] {
         let description = [];
         let compileInfo = pxt.blocks.compileInfo(block as pxtc.SymbolInfo);
@@ -269,7 +274,7 @@ export class MonacoFlyout extends data.Component<MonacoFlyoutProps, MonacoFlyout
             });
         } else {
             // if no parts found, use the snippet name
-            description.push(<span key={name}>{getSnippetName(block, isPython) || block.name}</span>)
+            description.push(<span key={name}>{this.getSnippetName(block) || block.name}</span>)
         }
 
         // imitates block behavior in adding "run code" before any handler
@@ -343,7 +348,7 @@ export class MonacoFlyout extends data.Component<MonacoFlyoutProps, MonacoFlyout
             pxtblockly.external.openHelpUrl(helpUrl);
         };
 
-        const qName = this.getQName(block) || getSnippetName(block, this.props.fileType == pxt.editor.FileType.Python);
+        const qName = this.getQName(block) || this.getSnippetName(block);
         const selected = qName == this.state.selectedBlock;
         const hover = qName == this.state.hoverBlock;
 
diff --git a/webapp/src/toolboxHelpers.ts b/webapp/src/toolboxHelpers.ts
index 16d92b686e4a..9ab0b29eb6b8 100644
--- a/webapp/src/toolboxHelpers.ts
+++ b/webapp/src/toolboxHelpers.ts
@@ -1,10 +1,6 @@
 
 import * as toolbox from "./toolbox";
 
-export function getSnippetName(block: toolbox.BlockDefinition, isPython: boolean): string {
-    return (isPython ? (block.pySnippetName || block.pyName) : undefined) || block.snippetName || block.name;
-}
-
 // Breaks a block down into segments that can be displayed in a readable format.
 export function getBlockTextParts(block: toolbox.BlockDefinition, params: pxtc.ParameterDesc[], isPython: boolean): pxt.editor.BlockTextParts | undefined {
     let description: pxt.editor.BlockTextPart[] = [];

From fbeefda44e1e81f6fffdcf93cd59b7a60a9cf628 Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Tue, 24 Sep 2024 18:56:33 -0700
Subject: [PATCH 25/31] Update some block snippets

---
 webapp/src/blocks.tsx        | 1 +
 webapp/src/blocksSnippets.ts | 9 +++++----
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/webapp/src/blocks.tsx b/webapp/src/blocks.tsx
index 8dd3435eacf4..b2520ee7bc30 100644
--- a/webapp/src/blocks.tsx
+++ b/webapp/src/blocks.tsx
@@ -1514,6 +1514,7 @@ export class Editor extends toolboxeditor.ToolboxEditor {
         if (ns == onStartNamespace) {
             extraBlocks.push({
                 name: ts.pxtc.ON_START_TYPE,
+                snippetName: "on start",
                 attributes: {
                     blockId: ts.pxtc.ON_START_TYPE,
                     weight: pxt.appTarget.runtime.onStartWeight || 10,
diff --git a/webapp/src/blocksSnippets.ts b/webapp/src/blocksSnippets.ts
index 53d6636541c4..48c8e9e52e68 100644
--- a/webapp/src/blocksSnippets.ts
+++ b/webapp/src/blocksSnippets.ts
@@ -176,7 +176,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                 </block>`
                 }, {
                     name: "logic_compare_lt",
-                    snippetName: "less than",
+                    snippetName: "less than | greater than",
                     attributes: {
                         blockId: "logic_compare",
                         group: lf("Comparison"),
@@ -476,7 +476,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                     </block>`
                 }, {
                     name: "math_js_round",
-                    snippetName: "round",
+                    snippetName: "round | ceil | floor | trunc",
                     attributes: {
                         blockId: "math_js_round",
                         weight: 80
@@ -632,7 +632,7 @@ function cachedBuiltinCategories(): pxt.Map<BuiltinCategoryDefinition> {
                 },
                 {
                     name: "lists_length",
-                    snippetName: "array length",
+                    snippetName: "length",
                     attributes: {
                         blockId: "lists_length",
                         group: "Read",
@@ -744,7 +744,7 @@ export function getPauseUntil() {
     if (opts) {
         pauseUntil = {
             name: pxtc.PAUSE_UNTIL_TYPE,
-
+            snippetName: "pause until",
             attributes: {
                 blockId: pxtc.PAUSE_UNTIL_TYPE,
                 blockNamespace: opts.category || "loops",
@@ -786,6 +786,7 @@ export function allBuiltinBlocks() {
     // Add on start built in block
     builtinBlockCache[ts.pxtc.ON_START_TYPE] = {
         name: ts.pxtc.ON_START_TYPE,
+        snippetName: "on start",
         attributes: {
             blockId: ts.pxtc.ON_START_TYPE,
             weight: pxt.appTarget.runtime.onStartWeight || 10,

From cae7c4dbf5c78cc09f410b9bc3bd69647425cac1 Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Tue, 24 Sep 2024 18:56:44 -0700
Subject: [PATCH 26/31] blockTextParts -> blockAsText

---
 localtypings/pxteditor.d.ts                      | 14 +++++++-------
 pxteditor/editorcontroller.ts                    |  8 ++++----
 pxtservices/editorDriver.ts                      |  8 ++++----
 .../src/components/CriteriaInstanceDisplay.tsx   | 16 ++++++++--------
 .../src/services/makecodeEditorService.ts        |  4 ++--
 teachertool/src/services/storageService.ts       | 14 +++++++-------
 .../src/transforms/loadReadableBlockName.ts      | 12 ++++++------
 webapp/src/app.tsx                               |  6 +++---
 webapp/src/monacoFlyout.tsx                      |  8 ++++----
 webapp/src/toolboxHelpers.ts                     |  2 +-
 10 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/localtypings/pxteditor.d.ts b/localtypings/pxteditor.d.ts
index 81111c3ac463..432421125b76 100644
--- a/localtypings/pxteditor.d.ts
+++ b/localtypings/pxteditor.d.ts
@@ -75,7 +75,7 @@ declare namespace pxt.editor {
         | "convertcloudprojectstolocal"
         | "setlanguagerestriction"
         | "gettoolboxcategories"
-        | "getblocktextparts"
+        | "getblockastext"
 
         | "toggletrace" // EditorMessageToggleTraceRequest
         | "togglehighcontrast"
@@ -458,13 +458,13 @@ declare namespace pxt.editor {
         categories: pxt.editor.ToolboxCategoryDefinition[];
     }
 
-    export interface EditorMessageGetBlockReadableNameRequest extends EditorMessageRequest {
-        action: "getblocktextparts";
+    export interface EditorMessageGetBlockAsTextRequest extends EditorMessageRequest {
+        action: "getblockastext";
         blockId: string;
     }
 
-    export interface EditorMessageGetBlockReadableNameResponse {
-        readableName: pxt.editor.BlockTextParts | undefined;
+    export interface EditorMessageGetBlockAsTextResponse {
+        blockAsText: pxt.editor.BlockAsText | undefined;
     }
 
     export interface EditorMessageServiceWorkerRegisteredRequest extends EditorMessageRequest {
@@ -1007,7 +1007,7 @@ declare namespace pxt.editor {
         // getBlocks(): Blockly.Block[];
         getBlocks(): any[];
         getToolboxCategories(advanced?: boolean): pxt.editor.EditorMessageGetToolboxCategoriesResponse;
-        getBlockTextParts(blockId: string): pxt.editor.BlockTextParts | undefined;
+        getBlockAsText(blockId: string): pxt.editor.BlockAsText | undefined;
 
         toggleHighContrast(): void;
         setHighContrast(on: boolean): void;
@@ -1275,7 +1275,7 @@ declare namespace pxt.editor {
         blockId?: string;
     }
 
-    export interface BlockTextParts {
+    export interface BlockAsText {
         parts: BlockTextPart[];
     }
 
diff --git a/pxteditor/editorcontroller.ts b/pxteditor/editorcontroller.ts
index af5df599f667..8c4e5b7f41ae 100644
--- a/pxteditor/editorcontroller.ts
+++ b/pxteditor/editorcontroller.ts
@@ -209,12 +209,12 @@ case "renderxml": {
                                         resp = projectView.getToolboxCategories(msg.advanced);
                                     });
                             }
-                            case "getblocktextparts": {
-                                const msg = data as pxt.editor.EditorMessageGetBlockReadableNameRequest;
+                            case "getblockastext": {
+                                const msg = data as pxt.editor.EditorMessageGetBlockAsTextRequest;
                                 return Promise.resolve()
                                     .then(() => {
-                                        const readableName = projectView.getBlockTextParts(msg.blockId);
-                                        resp = { readableName } as pxt.editor.EditorMessageGetBlockReadableNameResponse;
+                                        const readableName = projectView.getBlockAsText(msg.blockId);
+                                        resp = { blockAsText: readableName } as pxt.editor.EditorMessageGetBlockAsTextResponse;
                                     });
                             }
                             case "renderpython": {
diff --git a/pxtservices/editorDriver.ts b/pxtservices/editorDriver.ts
index 2789fbf3180c..e2104b317c92 100644
--- a/pxtservices/editorDriver.ts
+++ b/pxtservices/editorDriver.ts
@@ -389,16 +389,16 @@ export class EditorDriver extends IframeDriver {
         return (resp.resp as pxt.editor.EditorMessageGetToolboxCategoriesResponse).categories;
     }
 
-    async getBlockTextParts(blockId: string): Promise<pxt.editor.BlockTextParts | undefined> {
+    async getBlockAsText(blockId: string): Promise<pxt.editor.BlockAsText | undefined> {
         const resp = await this.sendRequest(
             {
                 type: "pxteditor",
-                action: "getblocktextparts",
+                action: "getblockastext",
                 blockId
-            } as pxt.editor.EditorMessageGetBlockReadableNameRequest
+            } as pxt.editor.EditorMessageGetBlockAsTextRequest
         ) as pxt.editor.EditorMessageResponse;
 
-        return (resp.resp as pxt.editor.EditorMessageGetBlockReadableNameResponse)?.readableName;
+        return (resp.resp as pxt.editor.EditorMessageGetBlockAsTextResponse)?.blockAsText;
     }
 
     async runValidatorPlan(validatorPlan: pxt.blocks.ValidatorPlan, planLib: pxt.blocks.ValidatorPlan[]) {
diff --git a/teachertool/src/components/CriteriaInstanceDisplay.tsx b/teachertool/src/components/CriteriaInstanceDisplay.tsx
index e4fd1da33d72..96096dff23db 100644
--- a/teachertool/src/components/CriteriaInstanceDisplay.tsx
+++ b/teachertool/src/components/CriteriaInstanceDisplay.tsx
@@ -13,7 +13,7 @@ import { Strings, Ticks } from "../constants";
 import { showModal } from "../transforms/showModal";
 import { BlockPickerOptions } from "../types/modalOptions";
 import { validateParameterValue } from "../utils/validateParameterValue";
-import { loadBlockTextParts } from "../transforms/loadReadableBlockName";
+import { loadBlockAsText } from "../transforms/loadReadableBlockName";
 
 interface InlineInputSegmentProps {
     initialValue: string;
@@ -86,32 +86,32 @@ interface ReadableBlockNameProps {
 }
 const ReadableBlockName: React.FC<ReadableBlockNameProps> = ({ blockId }) => {
     const { state: teacherTool } = useContext(AppStateContext);
-    const [blockTextParts, setBlockTextParts] = useState<pxt.editor.BlockTextParts | undefined>(undefined);
+    const [blockAsText, setBlockAsText] = useState<pxt.editor.BlockAsText | undefined>(undefined);
 
     useEffect(() => {
         async function updateReadableName(blockId: string | undefined) {
-            let blockReadableName: pxt.editor.BlockTextParts | undefined;
+            let blockReadableName: pxt.editor.BlockAsText | undefined;
             if (blockId) {
-                blockReadableName = blockId ? await loadBlockTextParts(blockId) : undefined;
+                blockReadableName = blockId ? await loadBlockAsText(blockId) : undefined;
             }
 
             if (blockReadableName) {
-                setBlockTextParts(blockReadableName);
+                setBlockAsText(blockReadableName);
             } else if (!teacherTool.toolboxCategories) {
                 // If teacherTool.toolboxCategories has not loaded yet, we may get the readable component later once it loads.
                 // Show a spinner (handled below).
-                setBlockTextParts(undefined);
+                setBlockAsText(undefined);
             } else {
                 // TeacherTool.toolboxCategories has loaded and we still don't have a readable component.
                 // We won't be able to get it, so fallback to the id.
-                setBlockTextParts({ parts: [ { kind: "label", content: blockId } ] });
+                setBlockAsText({ parts: [ { kind: "label", content: blockId } ] });
             }
         }
 
         updateReadableName(blockId);
     }, [blockId, teacherTool.toolboxCategories]);
 
-    const readableComponent = blockTextParts?.parts.map((part, i) => {
+    const readableComponent = blockAsText?.parts.map((part, i) => {
         let content = "";
         if (part.kind === "param") {
             // Mask default values like "hello!" with generic "value"
diff --git a/teachertool/src/services/makecodeEditorService.ts b/teachertool/src/services/makecodeEditorService.ts
index e5679dbb5efb..d61f2a397d1b 100644
--- a/teachertool/src/services/makecodeEditorService.ts
+++ b/teachertool/src/services/makecodeEditorService.ts
@@ -74,8 +74,8 @@ export async function getToolboxCategoriesAsync(
     return response;
 }
 
-export async function getBlockTextParts(blockId: string): Promise<pxt.editor.BlockTextParts | undefined> {
-    const response = driver ? await driver.getBlockTextParts(blockId) : undefined;
+export async function getBlockAsText(blockId: string): Promise<pxt.editor.BlockAsText | undefined> {
+    const response = driver ? await driver.getBlockAsText(blockId) : undefined;
     return response;
 }
 
diff --git a/teachertool/src/services/storageService.ts b/teachertool/src/services/storageService.ts
index 6fb3bd9b7353..4f739d3a3466 100644
--- a/teachertool/src/services/storageService.ts
+++ b/teachertool/src/services/storageService.ts
@@ -12,7 +12,7 @@ const RUN_ON_LOAD_KEY = [KEY_PREFIX, "runOnLoad"].join("/");
 const LAST_ACTIVE_CHECKLIST_KEY = [KEY_PREFIX, "lastActiveChecklist"].join("/");
 const SPLIT_POSITION_KEY = [KEY_PREFIX, "splitPosition"].join("/");
 const EXPANDED_CATALOG_TAGS_KEY = [KEY_PREFIX, "expandedCatalogTags"].join("/");
-const BLOCK_TEXT_PARTS_PREFIX = [KEY_PREFIX, "blockTextParts"].join("/");
+const BLOCK_AS_TEXT_PREFIX = [KEY_PREFIX, "blockAsText"].join("/");
 
 function getValue(key: string, defaultValue?: string): string | undefined {
     return localStorage.getItem(key) || defaultValue;
@@ -113,8 +113,8 @@ async function deleteChecklistFromIndexedDbAsync(name: string) {
     await db.deleteChecklist(name);
 }
 
-function getBlockTextPartsKey(blockId: string): string {
-    return [BLOCK_TEXT_PARTS_PREFIX, blockId].join("/");
+function getBlockAsTextKey(blockId: string): string {
+    return [BLOCK_AS_TEXT_PREFIX, blockId].join("/");
 }
 
 // ----------------------------------
@@ -241,8 +241,8 @@ export function removeExpandedCatalogTag(tag: string) {
     }
 }
 
-export function getCachedBlockTextParts(blockId: string): pxt.editor.BlockTextParts | undefined {
-    const key = getBlockTextPartsKey(blockId);
+export function getCachedBlockAsText(blockId: string): pxt.editor.BlockAsText | undefined {
+    const key = getBlockAsTextKey(blockId);
     try {
         const cachedReadableBlockName = getValue(key);
         return cachedReadableBlockName ? JSON.parse(cachedReadableBlockName) : undefined;
@@ -252,8 +252,8 @@ export function getCachedBlockTextParts(blockId: string): pxt.editor.BlockTextPa
     }
 }
 
-export function cacheBlockTextParts(blockId: string, readableBlockName: pxt.editor.BlockTextParts) {
-    const key = getBlockTextPartsKey(blockId);
+export function cacheBlockAsText(blockId: string, readableBlockName: pxt.editor.BlockAsText) {
+    const key = getBlockAsTextKey(blockId);
     try {
         setValue(key, JSON.stringify(readableBlockName));
     } catch (e) {
diff --git a/teachertool/src/transforms/loadReadableBlockName.ts b/teachertool/src/transforms/loadReadableBlockName.ts
index 9221b0c1d7c0..6d11a89db628 100644
--- a/teachertool/src/transforms/loadReadableBlockName.ts
+++ b/teachertool/src/transforms/loadReadableBlockName.ts
@@ -1,17 +1,17 @@
-import { getBlockTextParts } from "../services/makecodeEditorService";
-import { cacheBlockTextParts, getCachedBlockTextParts } from "../services/storageService";
+import { getBlockAsText } from "../services/makecodeEditorService";
+import { cacheBlockAsText, getCachedBlockAsText } from "../services/storageService";
 
-export async function loadBlockTextParts(blockId: string): Promise<pxt.editor.BlockTextParts | undefined> {
+export async function loadBlockAsText(blockId: string): Promise<pxt.editor.BlockAsText | undefined> {
     // Check for cached version.
-    let readableBlockName = getCachedBlockTextParts(blockId);
+    let readableBlockName = getCachedBlockAsText(blockId);
     if (readableBlockName) {
         return Promise.resolve(readableBlockName);
     }
 
     // Call into editor service & cache result
-    readableBlockName = await getBlockTextParts(blockId);
+    readableBlockName = await getBlockAsText(blockId);
     if (readableBlockName) {
-        cacheBlockTextParts(blockId, readableBlockName);
+        cacheBlockAsText(blockId, readableBlockName);
     }
 
     return readableBlockName;
diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
index 81b592f8f55c..dc425e5ebd37 100644
--- a/webapp/src/app.tsx
+++ b/webapp/src/app.tsx
@@ -4156,14 +4156,14 @@ export class ProjectView
         return matches;
     }
 
-    getBlockTextParts(blockId: string): pxt.editor.BlockTextParts | undefined {
+    getBlockAsText(blockId: string): pxt.editor.BlockAsText | undefined {
         const blocksWithId = this.getBlocksWithId(blockId);
-        let readableName: pxt.editor.BlockTextParts = undefined;
+        let readableName: pxt.editor.BlockAsText = undefined;
         if (blocksWithId.length === 0) {
             return undefined;
         } else if (blocksWithId.length === 1) {
             const block = blocksWithId[0];
-            readableName = toolboxHelpers.getBlockTextParts(block, block.parameters ? block.parameters.slice() : null, false);
+            readableName = toolboxHelpers.getBlockAsText(block, block.parameters ? block.parameters.slice() : null, false);
         }
 
         if (!readableName) {
diff --git a/webapp/src/monacoFlyout.tsx b/webapp/src/monacoFlyout.tsx
index 8c19119aec97..729ea1bb859b 100644
--- a/webapp/src/monacoFlyout.tsx
+++ b/webapp/src/monacoFlyout.tsx
@@ -7,7 +7,7 @@ import * as data from "./data";
 import * as auth from "./auth";
 import * as pxtblockly from "../../pxtblocks";
 import { HELP_IMAGE_URI } from "../../pxteditor";
-import { getBlockTextParts } from "./toolboxHelpers";
+import { getBlockAsText } from "./toolboxHelpers";
 
 import ISettingsProps = pxt.editor.ISettingsProps;
 
@@ -257,9 +257,9 @@ export class MonacoFlyout extends data.Component<MonacoFlyoutProps, MonacoFlyout
         let name = block.qName || block.name;
         const isPython = this.props.fileType == pxt.editor.FileType.Python;
 
-        const blockTextParts = getBlockTextParts(block, params, isPython);
-        if (blockTextParts?.parts?.length) {
-            blockTextParts.parts?.forEach((part, i) => {
+        const blockAsText = getBlockAsText(block, params, isPython);
+        if (blockAsText?.parts?.length) {
+            blockAsText.parts?.forEach((part, i) => {
                 switch (part.kind) {
                     case "label":
                         description.push(<span key={name + i}>{part.content}</span>);
diff --git a/webapp/src/toolboxHelpers.ts b/webapp/src/toolboxHelpers.ts
index 9ab0b29eb6b8..7d4ba16e65d6 100644
--- a/webapp/src/toolboxHelpers.ts
+++ b/webapp/src/toolboxHelpers.ts
@@ -2,7 +2,7 @@
 import * as toolbox from "./toolbox";
 
 // Breaks a block down into segments that can be displayed in a readable format.
-export function getBlockTextParts(block: toolbox.BlockDefinition, params: pxtc.ParameterDesc[], isPython: boolean): pxt.editor.BlockTextParts | undefined {
+export function getBlockAsText(block: toolbox.BlockDefinition, params: pxtc.ParameterDesc[], isPython: boolean): pxt.editor.BlockAsText | undefined {
     let description: pxt.editor.BlockTextPart[] = [];
     let compileInfo = pxt.blocks.compileInfo(block as pxtc.SymbolInfo);
     let parts = block.attributes._def && block.attributes._def.parts;

From d6673d8589882e71ca60a97bb50ee72f5f8bb0df Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Tue, 24 Sep 2024 18:57:55 -0700
Subject: [PATCH 27/31] Remove unnecessary newline

---
 webapp/src/toolboxHelpers.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/webapp/src/toolboxHelpers.ts b/webapp/src/toolboxHelpers.ts
index 7d4ba16e65d6..b1fec200ac26 100644
--- a/webapp/src/toolboxHelpers.ts
+++ b/webapp/src/toolboxHelpers.ts
@@ -1,4 +1,3 @@
-
 import * as toolbox from "./toolbox";
 
 // Breaks a block down into segments that can be displayed in a readable format.

From 5e56afcc89f86bc15affe30345a9ce8d476d5fdb Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Tue, 24 Sep 2024 20:24:51 -0700
Subject: [PATCH 28/31] Fix typo

---
 webapp/src/app.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
index dc425e5ebd37..01a1490a062f 100644
--- a/webapp/src/app.tsx
+++ b/webapp/src/app.tsx
@@ -4167,7 +4167,7 @@ export class ProjectView
         }
 
         if (!readableName) {
-            // Found nultiple blocks matching the id, or we were unable to generate a readable name from block parameters.
+            // Found multiple blocks matching the id, or we were unable to generate a readable name from block parameters.
             // In this case, use the block snippet names to describe the block.
             const blockSnippets: string[] = [];
             for (const name of blocksWithId.map(b => b.snippetName || b.name)) {

From 0ba72f2c08b500c598f5a5c24e1985ff394a7359 Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Tue, 24 Sep 2024 20:27:52 -0700
Subject: [PATCH 29/31] Prettier

---
 teachertool/src/components/CriteriaInstanceDisplay.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/teachertool/src/components/CriteriaInstanceDisplay.tsx b/teachertool/src/components/CriteriaInstanceDisplay.tsx
index 96096dff23db..27eb7a785a3f 100644
--- a/teachertool/src/components/CriteriaInstanceDisplay.tsx
+++ b/teachertool/src/components/CriteriaInstanceDisplay.tsx
@@ -104,7 +104,7 @@ const ReadableBlockName: React.FC<ReadableBlockNameProps> = ({ blockId }) => {
             } else {
                 // TeacherTool.toolboxCategories has loaded and we still don't have a readable component.
                 // We won't be able to get it, so fallback to the id.
-                setBlockAsText({ parts: [ { kind: "label", content: blockId } ] });
+                setBlockAsText({ parts: [{ kind: "label", content: blockId }] });
             }
         }
 

From 52da0b9d5e95d0f022b152ad80ba250a3f858a67 Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Wed, 25 Sep 2024 14:46:55 -0700
Subject: [PATCH 30/31] Remove unnecessary Promise.resolve

---
 teachertool/src/transforms/loadReadableBlockName.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/teachertool/src/transforms/loadReadableBlockName.ts b/teachertool/src/transforms/loadReadableBlockName.ts
index 6d11a89db628..65ea650e626a 100644
--- a/teachertool/src/transforms/loadReadableBlockName.ts
+++ b/teachertool/src/transforms/loadReadableBlockName.ts
@@ -5,7 +5,7 @@ export async function loadBlockAsText(blockId: string): Promise<pxt.editor.Block
     // Check for cached version.
     let readableBlockName = getCachedBlockAsText(blockId);
     if (readableBlockName) {
-        return Promise.resolve(readableBlockName);
+        return readableBlockName;
     }
 
     // Call into editor service & cache result

From 2864ed9c63a98753a87861ed450c86d24c9cbbcd Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Wed, 25 Sep 2024 14:47:07 -0700
Subject: [PATCH 31/31] Use var for shadow color

---
 teachertool/src/components/styling/BlockPickerModal.module.scss | 2 +-
 teachertool/src/components/styling/CatalogOverlay.module.scss   | 2 +-
 .../src/components/styling/CriteriaInstanceDisplay.module.scss  | 2 +-
 theme/themepacks.less                                           | 1 +
 4 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/teachertool/src/components/styling/BlockPickerModal.module.scss b/teachertool/src/components/styling/BlockPickerModal.module.scss
index eb1ff8837d4e..0f06d667225b 100644
--- a/teachertool/src/components/styling/BlockPickerModal.module.scss
+++ b/teachertool/src/components/styling/BlockPickerModal.module.scss
@@ -80,7 +80,7 @@
                             height: 3rem;
                             border-radius: 0.2rem;
                             color: white;
-                            border: 1px solid rgba(0, 0, 0, 0.5);
+                            border: 1px solid var(--pxt-page-dark-shadow);
                             font-size: 1rem;
                             font-weight: bold;
                             background-color: var(--category-color);
diff --git a/teachertool/src/components/styling/CatalogOverlay.module.scss b/teachertool/src/components/styling/CatalogOverlay.module.scss
index 66c5b8ff6acf..35e92076db91 100644
--- a/teachertool/src/components/styling/CatalogOverlay.module.scss
+++ b/teachertool/src/components/styling/CatalogOverlay.module.scss
@@ -5,7 +5,7 @@
     width: 100%;
     height: 100%;
     z-index: 49; // Above everything except toasts
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: var(--pxt-page-dark-shadow);
 
     color: var(--pxt-page-foreground);
 
diff --git a/teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss b/teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss
index a85d034f2420..6e58aa4c08b8 100644
--- a/teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss
+++ b/teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss
@@ -58,7 +58,7 @@
                     .block-name-param {
                         border-radius: 1rem;
                         padding: 0.2rem 0.4rem;
-                        background-color: rgba(0, 0, 0, 0.3);
+                        background-color: var(--pxt-page-dark-shadow);
                     }
                 }
 
diff --git a/theme/themepacks.less b/theme/themepacks.less
index b3a21587b797..962afdddbfa0 100644
--- a/theme/themepacks.less
+++ b/theme/themepacks.less
@@ -15,6 +15,7 @@
     --pxt-page-foreground: black;
     --pxt-page-foreground-light: #767676;
     --pxt-page-foreground-shadow: rgba(0, 0, 0, 0.08);
+    --pxt-page-dark-shadow: rgba(0, 0, 0, 0.5);
     /// Header bar
     --pxt-headerbar-background: #475569;
     --pxt-headerbar-background-glass: #47556940;