fix: add custom blocks back to sample-apps (#2374)

Author: maribethb

examples/sample-app-ts/src/blocks/text.ts

@@ -12,18 +12,13 @@ import * as Blockly from 'blockly/core';
 // own custom blocks.
 const addText = {
   type: 'add_text',
-  message0: 'Add text %1 with color %2',
+  message0: 'Add text %1',
   args0: [
     {
       type: 'input_value',
       name: 'TEXT',
       check: 'String',
     },
-    {
-      type: 'input_value',
-      name: 'COLOR',
-      check: 'Colour',
-    },
   ],
   previousStatement: null,
   nextStatement: null,

examples/sample-app-ts/src/generators/javascript.ts

@@ -17,22 +17,18 @@ forBlock['add_text'] = function (
   generator: Blockly.CodeGenerator,
 ) {
   const text = generator.valueToCode(block, 'TEXT', Order.NONE) || "''";
-  const color =
-    generator.valueToCode(block, 'COLOR', Order.ATOMIC) || "'#ffffff'";
-
   const addText = generator.provideFunction_(
     'addText',
-    `function ${generator.FUNCTION_NAME_PLACEHOLDER_}(text, color) {
+    `function ${generator.FUNCTION_NAME_PLACEHOLDER_}(text) {
 
   // Add text to the output area.
   const outputDiv = document.getElementById('output');
   const textEl = document.createElement('p');
   textEl.innerText = text;
-  textEl.style.color = color;
   outputDiv.appendChild(textEl);
 }`,
   );
   // Generate the function call for this block.
-  const code = `${addText}(${text}, ${color});\n`;
+  const code = `${addText}(${text});\n`;
   return code;
 };

examples/sample-app-ts/src/index.ts

@@ -20,7 +20,11 @@ Object.assign(javascriptGenerator.forBlock, forBlock);
 const codeDiv = document.getElementById('generatedCode')?.firstChild;
 const outputDiv = document.getElementById('output');
 const blocklyDiv = document.getElementById('blocklyDiv');
-const ws = blocklyDiv && Blockly.inject(blocklyDiv, {toolbox});
+
+if (!blocklyDiv) {
+  throw new Error(`div with id 'blocklyDiv' not found`);
+}
+const ws = Blockly.inject(blocklyDiv, {toolbox});
 
 // This function resets the code and output divs, shows the
 // generated code from the workspace, and evals the code.

examples/sample-app-ts/src/toolbox.ts

@@ -491,6 +491,20 @@ export const toolbox = {
             },
           },
         },
+        {
+          kind: 'block',
+          type: 'add_text',
+          inputs: {
+            TEXT: {
+              shadow: {
+                type: 'text',
+                fields: {
+                  TEXT: 'abc',
+                },
+              },
+            },
+          },
+        },
       ],
     },
     {

examples/sample-app/src/blocks/text.js

@@ -12,18 +12,13 @@ import * as Blockly from 'blockly/core';
 // own custom blocks.
 const addText = {
   type: 'add_text',
-  message0: 'Add text %1 with color %2',
+  message0: 'Add text %1',
   args0: [
     {
       type: 'input_value',
       name: 'TEXT',
       check: 'String',
     },
-    {
-      type: 'input_value',
-      name: 'COLOR',
-      check: 'Colour',
-    },
   ],
   previousStatement: null,
   nextStatement: null,

examples/sample-app/src/generators/javascript.js

@@ -13,22 +13,18 @@ export const forBlock = Object.create(null);
 
 forBlock['add_text'] = function (block, generator) {
   const text = generator.valueToCode(block, 'TEXT', Order.NONE) || "''";
-  const color =
-    generator.valueToCode(block, 'COLOR', Order.ATOMIC) || "'#ffffff'";
-
   const addText = generator.provideFunction_(
     'addText',
-    `function ${generator.FUNCTION_NAME_PLACEHOLDER_}(text, color) {
+    `function ${generator.FUNCTION_NAME_PLACEHOLDER_}(text) {
 
   // Add text to the output area.
   const outputDiv = document.getElementById('output');
   const textEl = document.createElement('p');
   textEl.innerText = text;
-  textEl.style.color = color;
   outputDiv.appendChild(textEl);
 }`,
   );
   // Generate the function call for this block.
-  const code = `${addText}(${text}, ${color});\n`;
+  const code = `${addText}(${text});\n`;
   return code;
 };

examples/sample-app/src/toolbox.js

@@ -491,6 +491,20 @@ export const toolbox = {
             },
           },
         },
+        {
+          kind: 'block',
+          type: 'add_text',
+          inputs: {
+            TEXT: {
+              shadow: {
+                type: 'text',
+                fields: {
+                  TEXT: 'abc',
+                },
+              },
+            },
+          },
+        },
       ],
     },
     {