I want to customize blockly but after following instructions from online sources, I don’t see anything appearing in the browser.
This is the example code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Blockly test</title> <!-- core library --> <script src="https://unpkg.com/blockly/blockly.min.js"></script> </head> <body> <div id="editor"></div> <xml id="toolbox"> <block type="controls_if"></block> <block type="controls_repeat_ext"></block> <block type="logic_compare"></block> <block type="math_number"></block> <block type="math_arithmetic"></block> <block type="text"></block> <block type="text_print"></block> </xml> <script> Blockly.Blocks['constant_value'] = { init: function () { this.appendValueInput('VALUE') .setCheck('String') .appendField('TEST'); this.setOutput(true, 'Number'); this.setColour(160); this.setTooltip('Returns number of letters in the provided text.'); this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp'); } } var workspacePlayground = Blockly.inject('editor', { toolbox: document.getElementById('toolbox') }); </script> </body> </html>
How can I make the Blockly editor show up?
Advertisement
Answer
Your Blockly workspace seems fine. The problem is missing CSS to give the editor a height and width so that it’s visible:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Blockly test</title> <!-- core library --> <script src="https://unpkg.com/blockly/blockly.min.js"></script> <!-- add CSS to give the editor dimensions --> <style> #editor { width: 100%; height: 500px; } </style> </head> <body> <div id="editor"></div> <xml id="toolbox"> <block type="controls_if"></block> <block type="controls_repeat_ext"></block> <block type="logic_compare"></block> <block type="math_number"></block> <block type="math_arithmetic"></block> <block type="text"></block> <block type="text_print"></block> </xml> <script> Blockly.Blocks['constant_value'] = { init: function () { this.appendValueInput('VALUE') .setCheck('String') .appendField('TEST'); this.setOutput(true, 'Number'); this.setColour(160); this.setTooltip('Returns number of letters in the provided text.'); this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp'); } } var workspacePlayground = Blockly.inject('editor', { toolbox: document.getElementById('toolbox') }); </script> </body> </html>
All I added was:
<style> #editor { width: 100%; height: 500px; } </style>