How to generate blocks from code in blockly?

Question

I have a blockly application which generates some output code. Now, is it possible to write some function which will take my output code and will put corresponding blocks on workspace. For example, on this page, https://developers.google.com/blockly/

Blocks are connected to generate javascript code, But is there any way, I will give javascript code and blocks will appear on workspace.

Although it's possible (to do something that works, with limitations), it's definitely not a trivial problem to solve generally. blockly can be seen in this context as a subset of JavaScript with an alternate representation based on simplified restricted syntax. Thus going from blockly to JavaScript is reliable (and to XML and back is reliable), but the inverse is not, because there are too many possibilities to account for. For a reliable implementation, you'd want to find and create an implementation of a restricted subset of JavaScript to use as input for converting "JS" to blockly. — user120242, Jun 27 '20 at 01:52
Or probably you can see it as converting source code to executable format. And then trying to convert the executable binary back to source code (after editing the binary). eg: How would you expect it to convert something like destructuring or iterators or even something simple like wrapped function closures? — user120242, Jun 27 '20 at 01:59
it is, as user120242 states, not trivial, it's basically writing the back end of a compiler. I have included a link in my answer below which is a working Python to Blocks compiler for most of python, since it is Python it uses Sculpt.js to parse the Python into an abstract syntax tree, then walk the tree converting each node into XML which can then be concatenated into an XML document for Blockly (using Blockly.Xml.domToWorkspace method). If you can find a similar JavaScript to AST parser then you can probably attempt the same. Bear in mind that Blockly now uses a JSON format not XML. — James Cat, Jul 28 '22 at 20:39

score 5 · Answer 1 · answered Jun 27 '20 at 01:13

You can only create javascript from blocks, not blocks from javascript. However, You can export blocks to xml, and import back the xml to blocks. So you can always save your blocks anywhere you wish in xml format, and load those from xml back to your blockly workspace.

function saveBlocks() {
    var xmlDom = Blockly.Xml.workspaceToDom(Blockly.mainWorkspace);
    var xmlText = Blockly.Xml.domToPrettyText(xmlDom);
    // do whatever you want to this xml
}
function loadBlock(xml) { // xml is the same block xml you stored
    if (typeof xml != "string" || xml.length < 5) {
        return false;
    }
    try {
        var dom = Blockly.Xml.textToDom(xml);
        Blockly.mainWorkspace.clear();
        Blockly.Xml.domToWorkspace(Blockly.mainWorkspace, dom);
        return true;
    } catch (e) {
        return false;
    }
}

https://blockly-demo.appspot.com/static/demos/code/index.html shows a complete example of serializing blocks to XML and vice-versa, as well as blocks to JS. It's totally possible to converts JS to Blockly, though, as https://github.com/JC-Orozco/BlocksIDE shows. It uses acorn to parse the JS and then [walk the AST to generate XML](https://github.com/JC-Orozco/BlocksIDE/blob/master/src/lib/js2blocks.js). — ggorlen, Jun 29 '22 at 20:27

James Cat · Answer 2 · 2022-07-28T20:41:02.280

2

We are working on a python-to-blocks system here https://www.npmjs.com/package/@pi-top/blockly it's a work in progress but pretty much deals with all of Python and is being built to work with the pi-top project website https://further.pi-top.com/ but you should be able to extract something useful, the main code->blocks functionality is in the src/piBlocks folder. The code is based on this project https://github.com/blockpy-edu/BlockMirror I mainly converted it to typescript, reorganised the code and linted it, with a few additions and bugfixes.

edited Jul 28 '22 at 20:41

answered Feb 24 '22 at 19:15

James Cat

432
2
12

Just a quick addition to the above answer, having not worked on this for 6 months Blockly has moved from version 6 to version 8 - version 8 has a new serialisation/de-serialisation system which uses JSON instead of XML - although the XML still works it is frozen and new features are not being added to it. This means ideally we will re-write the python to blocks compiler, so instead of going Python->AST->XML->Blockly it will go Python->AST->JSON->Blockly but this will take some time. – James Cat Jul 28 '22 at 20:33
James, it seems like the GitHub repo associated with the @pi-top/blockly package either no longer exists or is now private. – Mark Friedman Aug 11 '22 at 16:51
1

I've asked for it to be made public and that should happen very soon. You can install with npm maybe to look at the code, sorry can't immediately fix it – James Cat Aug 17 '22 at 21:19

score 1 · Answer 3 · answered Dec 11 '17 at 10:44

1

It can be done - see https://makecode.microbit.org/. If you create a block then edit as Javascript, you can edit and (if it's valid code) then it will show the correct blocks when you switch back to the block view. The javascript is a bit odd that it's generates - so don't expect it to turn any javascript into blocks...

This isn't part of Blockly - and I'm not sure how this has been done - just that it exists - hope this helps.

answered Dec 11 '17 at 10:44

AndyS

725
7
17

5

Another unofficial Blockly app that does this for JavaScript is BlocksIDE: https://jc-orozco.github.io/BlocksIDE/build/index.html (src https://github.com/JC-Orozco/BlocksIDE) – Anm Dec 16 '17 at 16:21

score 0 · Answer 4 · answered Sep 14 '19 at 13:35

I don't remember seeing this feature in blockly, but it is definitely possible. You will have to write custom parsers for your language code and then build the blocks accordingly.

This was somewhat explored in this answer.

Basically as and when you parse the code, you need to programatically create the blocks and attach them together to create the program in blockly.

How to generate blocks from code in blockly?

4 Answers4

Linked