allow block configs to override builtin blocks (microsoft#11082)

Author: riknoll

webapp/src/blocks.tsx

@@ -2176,6 +2176,7 @@ export class Editor extends toolboxeditor.ToolboxEditor {
 
     protected showFlyoutBlocks(ns: string, color: string, blocks: toolbox.BlockDefinition[]) {
         const filters = this.parent.state.editorState ? this.parent.state.editorState.filters : undefined;
+        let configBlocksShown = new Set<string>();
         blocks.sort((f1, f2) => {
             // Sort the blocks
             return (f2.attributes.weight != undefined ? f2.attributes.weight : 50)
@@ -2186,6 +2187,19 @@ export class Editor extends toolboxeditor.ToolboxEditor {
                 blockXmlList = this.getButtonXml(block as toolbox.ButtonDefinition);
             } else {
                 blockXmlList = this.getBlockXml(block as toolbox.BlockDefinition);
+
+                if (blockXmlList?.some(element => element?.getAttribute("data-isBlockConfigOverride") === "true")) {
+                    // Some builtin blocks appear in the toolbox multiple times, for example the if/else
+                    // and lists_create_with blocks. If one of those has its XML overridden by a block config,
+                    // we need to make sure we only show it once since all of the snippets will have the same
+                    // overridden XML.
+                    if (configBlocksShown.has(block.attributes.blockId)) {
+                        blockXmlList = undefined;
+                    }
+                    else {
+                        configBlocksShown.add(block.attributes.blockId);
+                    }
+                }
             }
             if (blockXmlList) this.flyoutXmlList = this.flyoutXmlList.concat(blockXmlList);
         })
@@ -2268,12 +2282,29 @@ export class Editor extends toolboxeditor.ToolboxEditor {
     private getBlockXml(block: toolbox.BlockDefinition, ignoregap?: boolean, shadow?: boolean): Element[] {
         const that = this;
         let blockXml: Element;
+
+        // Check for custom config in scope of the current tutorial step.
+        const currTutorialStep = this.parent.state.tutorialOptions?.tutorialStep;
+        const currTutorialStepInfo = currTutorialStep !== undefined ? this.parent.state.tutorialOptions.tutorialStepInfo[currTutorialStep] : undefined;
+        if (currTutorialStepInfo?.localBlockConfig?.blocks) {
+            blockXml = getBlockConfigXml(block, currTutorialStepInfo.localBlockConfig);
+        }
+
+        // Check for custom config in the tutorial's global scope.
+        if (!blockXml && this.parent.state.tutorialOptions?.globalBlockConfig?.blocks) {
+            blockXml = getBlockConfigXml(block, this.parent.state.tutorialOptions.globalBlockConfig);
+        }
+
+        if (blockXml) {
+            blockXml.setAttribute("data-isBlockConfigOverride", "true");
+        }
+
         // Check if the block is built in, ignore it as it's already defined in snippets
         if (block.attributes.blockBuiltin) {
             pxt.log("ignoring built in block: " + block.attributes.blockId);
             return undefined;
         }
-        if (block.builtinBlock) {
+        if (block.builtinBlock && !blockXml) {
             // function_return is conditionally added to the toolbox, so it needs a special case
             if (block.attributes.blockId === "function_return") {
                 return [pxtblockly.mkReturnStatementBlock()];
@@ -2297,29 +2328,6 @@ export class Editor extends toolboxeditor.ToolboxEditor {
                 if (!shouldShowBlock(fn)) return undefined;
                 let comp = pxt.blocks.compileInfo(fn);
 
-                function getBlockConfigXml(blockConfig: pxt.tutorial.TutorialBlockConfig): Element | undefined {
-                    const entry = blockConfig.blocks.find(entry => entry.blockId === block.attributes.blockId);
-                    if (entry) {
-                        const xml = Blockly.utils.xml.textToDom(entry.xml);
-                        xml.setAttribute("gap", `${pxt.appTarget.appTheme
-                            && pxt.appTarget.appTheme.defaultBlockGap && pxt.appTarget.appTheme.defaultBlockGap.toString() || 8}`);
-                        return xml;
-                    }
-                    return undefined;
-                }
-
-                // Check for custom config in scope of the current tutorial step.
-                const currTutorialStep = this.parent.state.tutorialOptions?.tutorialStep;
-                const currTutorialStepInfo = currTutorialStep !== undefined ? this.parent.state.tutorialOptions.tutorialStepInfo[currTutorialStep] : undefined;
-                if (currTutorialStepInfo?.localBlockConfig?.blocks) {
-                    blockXml = getBlockConfigXml(currTutorialStepInfo.localBlockConfig);
-                }
-
-                // Check for custom config in the tutorial's global scope.
-                if (!blockXml && this.parent.state.tutorialOptions?.globalBlockConfig?.blocks) {
-                    blockXml = getBlockConfigXml(this.parent.state.tutorialOptions.globalBlockConfig);
-                }
-
                 // Create the block XML from block definition.
                 if (!blockXml) {
                     blockXml = pxtblockly.createToolboxBlock(this.blockInfo, fn, comp, shadow);
@@ -2393,7 +2401,7 @@ export class Editor extends toolboxeditor.ToolboxEditor {
                 pxt.log("Couldn't find block for: " + block.attributes.blockId);
                 pxt.log(block);
             }
-        } else {
+        } else if (!blockXml) {
             blockXml = Blockly.utils.xml.textToDom(block.blockXml);
         }
         if (blockXml) {
@@ -2822,4 +2830,15 @@ function maybeCloneBlockForMove(workspace: Blockly.WorkspaceSvg) {
 
         Blockly.getFocusManager().focusNode(clone as Blockly.BlockSvg);
     }
+}
+
+function getBlockConfigXml(block: toolbox.BlockDefinition, blockConfig: pxt.tutorial.TutorialBlockConfig): Element | undefined {
+    const entry = blockConfig.blocks.find(entry => entry.blockId === block.attributes.blockId);
+    if (entry) {
+        const xml = Blockly.utils.xml.textToDom(entry.xml);
+        xml.setAttribute("gap", `${pxt.appTarget.appTheme
+            && pxt.appTarget.appTheme.defaultBlockGap && pxt.appTarget.appTheme.defaultBlockGap.toString() || 8}`);
+        return xml;
+    }
+    return undefined;
 }