fix rendering for getter/setter blocks in eval tool (microsoft#11054)

Author: riknoll

teachertool/src/components/styling/BlockPickerModal.module.scss

@@ -9,30 +9,30 @@
             overflow-x: hidden;
             overflow-y: auto;
             padding: 0;
-    
+
             .bottom-border {
                 border-bottom: 2px solid var(--pxt-target-background1-hover);
             }
-    
+
             .loading-container {
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
                 align-items: center;
                 height: 100%;
                 width: 100%;
-    
+
                 div[class*="common-spinner"] {
                     width: 5rem;
                     height: 5rem;
                     margin: 1rem;
                 }
             }
-    
+
             .category-container {
                 border-left: 1rem solid var(--category-color);
                 color: var(--category-color);
-    
+
                 .category-button {
                     width: 100%;
                     padding: 0.5rem;
@@ -42,22 +42,22 @@
                     border-radius: 0;
                     color: var(--category-color);
                 }
-    
+
                 .category-block-list {
                     width: 100%;
                     display: flex;
                     flex-direction: column;
                     align-items: flex-start;
-    
+
                     transition: max-height 0.2s ease-out;
                     &.collapsed {
                         max-height: 0;
                         display:none;
                     }
                     &.expanded {
-                        max-height: 100rem; /* larger that it should ever get */
+                        max-height: 200rem; /* larger that it should ever get */
                     }
-    
+
                     .block-button {
                         width: 100%;
                         align-content: start;

teachertool/src/transforms/loadBlockImagesAsync.ts

@@ -26,9 +26,16 @@ async function loadBlockImageAsync(block: pxt.editor.ToolboxBlockDefinition) {
 export async function loadBlockImagesAsync(category: pxt.editor.ToolboxCategoryDefinition) {
     return category.blocks
         ? pxt.Util.promisePoolAsync(
-              4,
-              category.blocks,
-              async (block: pxt.editor.ToolboxBlockDefinition) => await loadBlockImageAsync(block)
-          )
+            4,
+            category.blocks,
+            async (block: pxt.editor.ToolboxBlockDefinition) => {
+                try {
+                    await loadBlockImageAsync(block);
+                }
+                catch (e) {
+                    console.warn(`Failed to load image for block ${block.name}: ${e}`);
+                }
+            }
+        )
         : Promise.resolve();
 }

webapp/src/app.tsx

@@ -4298,7 +4298,10 @@ export class ProjectView
     async renderByBlockIdAsync(req: pxt.editor.EditorMessageRenderByBlockIdRequest): Promise<pxt.editor.EditorMessageRenderByBlockIdResponse> {
         const blocksInfo = await compiler.getBlocksAsync();
         const blockInfo = blocksInfo.blocksById[req.blockId];
-        const symbolInfo: pxtc.SymbolInfo = blocksInfo.apis.byQName[blockInfo.qName];
+        let symbolInfo: pxtc.SymbolInfo = blocksInfo.apis.byQName[blockInfo.qName];
+        if (!symbolInfo) {
+            symbolInfo = pxtblockly.blockSymbol(blockInfo.attributes.blockId)
+        }
         const compileInfo: pxt.blocks.BlockCompileInfo = pxt.blocks.compileInfo(symbolInfo);
         const xml = pxtblockly.createToolboxBlock(blocksInfo, symbolInfo, compileInfo, false, 3);
         return this.renderXmlInner(xml.outerHTML, req.snippetMode, req.layout);