This document is aimed at developers who wish to create new blocks withinBlockly. It is assumed that one has a local copy of Blockly which one can edit,one is generally familiar with Blockly's usage, and one has a basicunderstanding of JavaScript.
Blockly comes with a large number of pre-defined blocks. Everything frommathematical functions to looping structures. However, in order to interfacewith an external application, one must create custom blocks to form an API. Forexample, when creating a drawing program, one might need to create a "drawcircle of radius R" block.
In most cases the easiest approach is to just find a really similar block whichalready exists, copy it, and modify it as needed. The following documentation isfor those who need more help.
Define a Block
The first step is to create a block; specifying its shape, fields, andconnection points. Using Blockly Developer Tools is the easiest way to writethis code.
→ More info on the Blockly Developer Tools...
Alternatively, one can write this code by hand after studying the API.
→ More info on Defining Blocks...
Advanced blocks may dynamically change their shape in response to the user orother factors.
→ More info on Mutators...
Code Generation
The second step is to create the generator code to export the new block to aprogramming language (such as JavaScript, Python, PHP, Lua, or Dart).
→ More info on Generating Code...
To generate code that is both clean and correct, one must be mindful of theorder of operations list for the given language.
→ More info on Operator Precedence...
Creating more complicated blocks requires the use of temporary variables and/orutility functions. This is particularly true when an input is used twice andneeds to be cached.
→ More info on Caching Arguments...
Use the new Block
After creating your block don't forget to add it to your toolbox or use it in aworkspace.
→ More info on the Toolbox...
