Custom Blocks doesn't show up in toolbox

Tuan Ahmad Wafiq

unread,

Nov 14, 2022, 3:59:15 AM11/14/22

to Blockly

Hi, so recently I've been using Blockly to create a website for my internship project, and I've been through a lot of tutorials on youtube and also guide from the Blockly website itself. So my problem is I have created the workspace with the toolbox with some of my custom blocks and two of the premade blocks category which are Math and Loop. In the preview section in Blockly Developer Tools, my custom blocks show perfectly fine( I will attach a picture of the preview) Screenshot 2022-11-14 164846.png

But when I export the coding and insert it into my website, the custom blocks don't appear while the premade one works perfectly fine Screenshot 2022-11-14 165114.png

May any of you help me with this problem, Thank you!

This is my HTML coding for the website(this is just a test website for me to test the blocks, so it is not perfect :3)

<!DOCTYPE html>

<html>

<head>

<title>Workspace Test</title>

</head>

<body>

<field name="move">move_forward</field>

</block>

<field name="move_2">move_forward</field>

</block>

</category>

</block>

</category>

</category>

</block>

</category>

</block>

</shadow>

</value>

</shadow>

</value>

</block>

</shadow>

</value>

</block>

</shadow>

</value>

</block>

</block>

</shadow>

</value>

</block>

<field name="OP">ROUND</field>

</shadow>

</value>

</block>

</block>

</shadow>

</value>

</shadow>

</value>

</block>

</shadow>

</value>

</shadow>

</value>

</shadow>

</value>

</block>

</shadow>

</value>

</shadow>

</value>

</block>

</category>

</shadow>

</value>

</block>

<field name="MODE">WHILE</field>

</block>

</shadow>

</value>

</shadow>

</value>

</shadow>

</value>

</block>

</block>

<field name="FLOW">BREAK</field>

</block>

</category>

var demoWorkspace = Blockly.inject('blocklyDiv',

{ media: 'media/', toolbox: document.getElementById('toolbox') });

</script>

</xml>

</body>

</html>

Aaron Dodson

unread,

Nov 14, 2022, 12:25:24 PM11/14/22

to Blockly

Hi,

Are there any errors or 404s shown in the web inspector console? It looks like your toolbox definition is loading fine since the category is appearing, but I'm wondering if blockDefinition.js is at a different path or otherwise not loading/parsing for some reason.

- Aaron

Tuan Ahmad Wafiq

unread,

Nov 14, 2022, 8:55:45 PM11/14/22

to Blockly

yes there is an error at the web inspector console, it said that Blockly is not defined in the blockDefinition.js

Tuan Ahmad Wafiq

unread,

Nov 14, 2022, 8:59:22 PM11/14/22

to Blockly

This is my blockDefinition.js coding

Blockly.Blocks['move_1'] = {
init: function() {
this.appendDummyInput()
.appendField("keep moving")
.appendField(new Blockly.FieldDropdown([["forward","move_forward"], ["backward","move_backward"], ["right","move_right"], ["left","move_left"]]), "move")
.appendField("at the speed of")
.appendField(new Blockly.FieldDropdown([["100","slow"], ["150","fast"], ["255","fastest"]]), "speed");
this.setPreviousStatement(true, null);
this.setNextStatement(true, null);
this.setColour(120);
this.setTooltip("");
this.setHelpUrl("");
}
};

Blockly.Blocks['move_2'] = {
init: function() {
this.appendDummyInput()
.appendField(new Blockly.FieldDropdown([["forward","move_forward"], ["backward","move_backward"], ["left","move_left"], ["right","move_right"]]), "move_2");
this.appendValueInput("NAME")
.setCheck("Number");
this.appendDummyInput()
.appendField("second at the speed of")
.appendField(new Blockly.FieldDropdown([["100","slow"], ["150","fast"], ["255","fastest"]]), "speed");
this.setInputsInline(true);
this.setPreviousStatement(true, null);
this.setNextStatement(true, null);
this.setColour(120);
this.setTooltip("");
this.setHelpUrl("");
}
};

Blockly.Blocks['move_3'] = {
init: function() {
this.appendDummyInput()
.appendField("stop moving");
this.setPreviousStatement(true, null);
this.setNextStatement(true, null);
this.setColour(120);
this.setTooltip("");
this.setHelpUrl("");
}
};

Blockly.Blocks['show_1'] = {
init: function() {
this.appendDummyInput()
.appendField("play note")
.appendField(new Blockly.FieldDropdown([["C5","note_1"], ["D5","note_2"], ["E5","note_3"], ["F5","note_4"], ["G5","note_5"], ["A5","note_6"], ["B5","note_7"], ["C6","note_8"]]), "note")
.appendField("for a")
.appendField(new Blockly.FieldDropdown([["eighth","beat_1"], ["quarter","beat_2"], ["half","beat_3"], ["whole","beat_4"], ["double","beat_5"]]), "beat");
this.setPreviousStatement(true, null);
this.setNextStatement(true, null);
this.setColour(230);
this.setTooltip("");
this.setHelpUrl("");
}
};

Blockly.Blocks['sense_1'] = {
init: function() {
this.appendDummyInput()
.appendField("obstacle ahead");
this.setOutput(true, null);
this.setColour(315);
this.setTooltip("");
this.setHelpUrl("");
}
};

Blockly.Blocks['control_1'] = {
init: function() {
this.appendDummyInput()
.appendField("wait");
this.setPreviousStatement(true, null);
this.setNextStatement(true, null);
this.setColour(195);
this.setTooltip("");
this.setHelpUrl("");
}
};

Blockly.Blocks['control_2'] = {
init: function() {
this.appendDummyInput()
.appendField("repeat")
.appendField(new Blockly.FieldDropdown([["1","loop_1"], ["2","loop_2"], ["3","loop_3"], ["4","loop_4"], ["5","loop_5"], ["6","loop_6"], ["7","loop_7"], ["8","loop_8"], ["9","loop_9"]]), "loop");
this.appendStatementInput("do")
.setCheck(null)
.appendField("do");
this.setPreviousStatement(true, null);
this.setNextStatement(true, null);
this.setColour(195);
this.setTooltip("");
this.setHelpUrl("");
}
};

Blockly.Blocks['control_3'] = {
init: function() {
this.appendValueInput("if")
.setCheck(null)
.appendField("if");
this.appendStatementInput("then")
.setCheck(null)
.appendField("then");
this.setPreviousStatement(true, null);
this.setNextStatement(true, null);
this.setColour(195);
this.setTooltip("");
this.setHelpUrl("");
}
};

Blockly.Blocks['control_4'] = {
init: function() {
this.appendValueInput("if")
.setCheck(null)
.appendField("if");
this.appendStatementInput("then")
.setCheck(null)
.appendField("then");
this.appendStatementInput("else")
.setCheck(null)
.appendField("else");
this.setPreviousStatement(true, null);
this.setNextStatement(true, null);
this.setColour(195);
this.setTooltip("");
this.setHelpUrl("");
}
};

Beka Westberg

unread,

Nov 15, 2022, 12:55:10 PM11/15/22

to Blockly

Hello!

Could you share how you're importing Blockly, as well as blockDefinition.js ? blockDefinition.js needs to be able to find Blockly so that it can assign to `Blockly.Blocks` and how it does that is different depending on your environment =) E.g. are you importing with script tags, using modules + a bundler, etc. (This is a web dev / javascript problem, not a Blockly problem)

Once we have a few more details hopefully we can get this sorted!

Best wishes,

--Beka

Tuan Ahmad Wafiq

unread,

Nov 15, 2022, 9:20:57 PM11/15/22

to Blockly

I'm sorry if my response doesn't answer your question because I'm still new in this website dev things cause I'm still a student.

so for the Blockly, I've downloaded the file from the google dev website like in the picture below

here I download the ZIP file option for the Blockly coding, and I create my project inside that folder. and the way I import Blockly into my website is by using <script src="../../blockly_compressed.js"></script>

Meanwhile, for the blockDefinition.js, I export it from the Blockly Developer Tool

and I've followed this tutorial on youtube for the blockDefinition.js https://youtu.be/YjGoDh-Qqkg

Tuan Ahmad Wafiq

unread,

Nov 16, 2022, 2:39:52 AM11/16/22

to Blockly

ahh and I forgot that I got one more error that I forgot to mention before

here it is:

Mark Friedman

unread,

Nov 17, 2022, 12:54:10 PM11/17/22

to blo...@googlegroups.com

I see a couple of issues with your html. One is that you're including your blockDefinition.js file before your Blockly files. Those Blockly files should be included first, since they define things that are likely referenced in your blockDefinition.js file. The other issue is that you are including the Blockly files twice; once near the beginning of your html file and again near the end of your html file where you include https://unpkg.com/blockly/blockly.min.js. That second load will essentially overwrite your Blockly objects and that will cause problems. You should pick one mechanism for loading Blockly, i.e. either the separate files or the single blockly.min.js file, do it at the beginning of your html file. and include your blockDefinition.js file after that.

Hope this helps.

-Mark

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/58e0ca83-cd5c-490e-8217-9b1df7fe921fn%40googlegroups.com.

Tuan Ahmad Wafiq

unread,

Nov 17, 2022, 12:59:02 PM11/17/22

to Blockly

hey after following ur suggestion to include blokDefinition.js after the Blockly files and removing the unpkg one it works. Thank you so much, Mark, you're such a lifesaver

Beka Westberg

unread,

Nov 18, 2022, 2:59:19 PM11/18/22

to blo...@googlegroups.com

Heylo! Thanks for the additional info :D

Could you provide the code where you're importing the blockDefinitions.js? If you're using script tags, the order matters.

You probably want something like:

```

```

Hopefully that helps get things resolved! If it doesn't work, please post back with any additional info you can provide =)

Best wishes,

--Beka

--

You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/2f4cdcd5-fa27-4976-81ab-18a6c3af2d01n%40googlegroups.com.

Tuan Ahmad Wafiq

unread,

Nov 21, 2022, 8:59:14 AM11/21/22

to Blockly

hey sorry i forgot to reply, but your suggestion as same as Mark's suggestion and I've fixed it and it works, Thanks for your concern, much appreciated

Christopher Allen

unread,

Nov 23, 2022, 12:42:06 PM11/23/22

to blo...@googlegroups.com

On Wed, 16 Nov 2022 at 02:20, Tuan Ahmad Wafiq <tuan...@gmail.com> wrote:

I've downloaded the file from the google dev website like in the picture below

It looks like Tuan's difficulties got solved—thanks Beka and Mark!—but I thought that I should mention that the instructions on the page Tuan mentioned are slightly out-of-date—the "ZIP File" and "TAR Ball" options are no longer as useful as they were before, because we deleted pre-compiled version of Blockly from the repository. One can now get compiled versions of Blockly as a .tgz file via the Releases page for recent releases (since v9.0.0)

I've filed issue #6649 to remind us to update this documentation soon.

Reply all

Reply to author

Forward