說明：
2. blockly工具箱支援xml和json兩種方式定義，本文使用xml演示，json方式建立工具箱可參考google官網文件https://developers.google.cn/blockly/guides/configure/web/toolbox。
建立分組的工具箱工具箱就是可供使用者使用的程式碼塊，預設顯示在工作區的左側，如果程式碼塊較多的話最好能分類組織，工具箱的程式碼透過在index.html中id為toolbox的xml程式碼進行定義，blcokly會解析xml並注入到頁面圖形化的工具箱程式碼DOM，如下圖的工具箱包含了控制、邏輯兩個類別。
對應的xml定義程式碼如下，其中category定義了一個分類，block定義了程式碼塊，type指定的類別都是blockly預設提供的，定義程式碼在./blockly/blocks目錄下
<xml id="toolbox" style="display: none"> <category name="控制"> <block type="controls_if"></block> <block type="controls_whileUntil"></block> <block type="controls_for"> </category> <category name="邏輯"> <block type="logic_compare"></block> <block type="logic_operation"></block> <block type="logic_boolean"></block> </category> </xml>工具箱還可以多層巢狀定義，如下xml定義的工具箱效果如下：
<xml id="toolbox" style="display: none"> <category name="核心"> <category name="控制"> <block type="controls_if"></block> <block type="controls_whileUntil"></block> </category> <category name="邏輯"> <block type="logic_compare"></block> <block type="logic_operation"></block> <block type="logic_boolean"></block> </category> </category> <category name="數學"> <block type="math_constant"></block> <category name="算術"> <block type="math_arithmetic"></block> <block type="math_number"></block> </category> <category name="三角"> <block type="math_single"></block> <block type="math_trig"></block> </category> </category> </xml>工具箱分組類別還可以指定顏色，透過colour屬性進行設定，colour值的範圍是0~360，如下xml程式碼生成的工具箱效果如下：
<xml id="toolbox" style="display: none"> <category name="邏輯" colour="20"> <block type="controls_if"></block> <block type="controls_whileUntil"></block> <block type="controls_for"> </category> <category name="控制" colour="200"> <block type="logic_compare"></block> <block type="logic_operation"></block> <block type="logic_boolean"></block> </category></xml>blockly提供的工具箱中有兩類有著特殊的行為，分別是變數和函式，它們的xml定義中擁有custom屬性，分別為VARIABLE和PROCEDURE，程式碼及顯示效果如下：
<xml id="toolbox" style="display: none"> <category name="變數" custom="VARIABLE"></category> <category name="函式" custom="PROCEDURE"></category> </xml>函式分組中包含三個程式碼塊，前兩個為方法定義，一個方法帶有返回值，第三個為條件返回的程式碼塊，透過這三個程式碼塊我們可以編寫新的方法來生成新的程式碼塊，如下定義一個inc方法會生成一個新的程式碼塊inc，該方法將輸入的x變數增加1並返回，新生成的程式碼塊又可以作為程式碼塊進行使用：
帶預設值的程式碼塊有些程式碼塊希望擁有預設值，如下程式碼生成工具箱效果如下：
<xml id="toolbox" style="display: none"> <block type="logic_boolean"></block> <block type="math_number"> <field name="NUM">42</field> </block> <block type="math_arithmetic"> <field name="OP">ADD</field> <value name="A"> <shadow type="math_number"> <field name="NUM">1</field> </shadow> </value> <value name="B"> <shadow type="math_number"> <field name="NUM">1</field> </shadow> </value> </block> </xml>其中：
logic_boolean不需要事先設定，預設值為真（true）；math_number透過field設定預設值42；math_arithmetic使用field、value，加上shadow blocks實現了預設值的設定。