Is There anyway to customize Blockly blocks with JavaScript & CSS

397 views
Skip to first unread message

PalooDev

unread,
Aug 15, 2022, 8:13:54 PM8/15/22
to Blockly
Is There anyway to customize Blockly blocks with JavaScript & CSS
The question is in the title

Is there anyway for me to programmly edit Blockly's source code so that this:

BlocklyDemoImage.png

Becomes this:
visual-programming-scratch-screen-capture_1144x519.jpg
Basically I need a way to style Blockly with JavaScript or Css, 

pigeonmaléfique

unread,
Aug 16, 2022, 4:42:06 AM8/16/22
to Blockly
Hello,

First of all you can use renderers already provided in Blockly, like for example 'zelos' (looks like scratch). There are of course other renderers.

Just inject this option : (also don't forget to change other options)
Blockly. inject('blocklyDiv', {
           renderer: 'zelos',
...
});

And for the toolbox there is a tutorial

If, however, you can't find what you're looking for, you can either customize the renderers or as a last resort use scratch-blocks directly 

Oussama Mubarak

unread,
Aug 16, 2022, 6:53:17 AM8/16/22
to Blockly
Hi,
You can also use the continuous toolbox plugin (see https://google.github.io/blockly-samples/plugins/continuous-toolbox/README.html) to get a bit closer to the look of scratch.
Reply all
Reply to author
Forward
0 new messages