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:
JavaScript
x
42
42
1
<!DOCTYPE html>2
<html lang="en">3
4
<head>5
<meta charset="UTF-8">6
<meta http-equiv="X-UA-Compatible" content="IE=edge">7
<meta name="viewport" content="width=device-width, initial-scale=1.0">8
<title>Blockly test</title>9
<!-- core library -->10
<script src="https://unpkg.com/blockly/blockly.min.js"></script>11
</head>12
13
<body>14
<div id="editor"></div>15
<xml id="toolbox">16
<block type="controls_if"></block>17
<block type="controls_repeat_ext"></block>18
<block type="logic_compare"></block>19
<block type="math_number"></block>20
<block type="math_arithmetic"></block>21
<block type="text"></block>22
<block type="text_print"></block>23
</xml>24
25
<script>26
Blockly.Blocks['constant_value'] = {27
init: function () {28
this.appendValueInput('VALUE')29
.setCheck('String')30
.appendField('TEST');31
this.setOutput(true, 'Number');32
this.setColour(160);33
this.setTooltip('Returns number of letters in the provided text.');34
this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');35
}36
}37
var workspacePlayground = Blockly.inject('editor',38
{ toolbox: document.getElementById('toolbox') });39
</script>40
</body>41
42
</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:
JavaScript
1
50
50
1
<!DOCTYPE html>2
<html lang="en">3
4
<head>5
<meta charset="UTF-8">6
<meta http-equiv="X-UA-Compatible" content="IE=edge">7
<meta name="viewport" content="width=device-width, initial-scale=1.0">8
<title>Blockly test</title>9
<!-- core library -->10
<script src="https://unpkg.com/blockly/blockly.min.js"></script>11
12
<!-- add CSS to give the editor dimensions -->13
<style>14
#editor {15
width: 100%;16
height: 500px;17
}18
</style>19
</head>20
21
<body>22
<div id="editor"></div>23
<xml id="toolbox">24
<block type="controls_if"></block>25
<block type="controls_repeat_ext"></block>26
<block type="logic_compare"></block>27
<block type="math_number"></block>28
<block type="math_arithmetic"></block>29
<block type="text"></block>30
<block type="text_print"></block>31
</xml>32
33
<script>34
Blockly.Blocks['constant_value'] = {35
init: function () {36
this.appendValueInput('VALUE')37
.setCheck('String')38
.appendField('TEST');39
this.setOutput(true, 'Number');40
this.setColour(160);41
this.setTooltip('Returns number of letters in the provided text.');42
this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');43
}44
}45
var workspacePlayground = Blockly.inject('editor',46
{ toolbox: document.getElementById('toolbox') });47
</script>48
</body>49
50
</html>All I added was:
JavaScript
1
7
1
<style>2
#editor {3
width: 100%;4
height: 500px;5
}6
</style>7