Skip to content

Customizing the toolbox

Jump to bottom
bartbutenaers edited this page Jul 22, 2021 · 1 revision

Some people have asked us to be able to customize the toolbox in the workspace. This tutorial explains a number of ways to customize the toolbox.

CAUTION - THIS IS ONLY FOR ADVANCED USERS:

  • When customizing the toolbox, there is a risc that some blocks in your Blockly workspace will disappear. It is adviced to make a backup of your workspace before experimenting with this feature.
  • When you have questions about the blocks that you have created, please ask those question on the Blockly forum. On that forum much more knowledge is available about developing blocks!

Here are the basic steps to get started:

  1. Acivate the customization checkbox in the config node:

    image

    From now on, the customized toolbox will be applied to all the workspaces of the Blockly nodes that use this config node.

  2. As soon as the checkbox has been enabled, the tabsheet "Categories" will become active.

  3. Press on the "X" icon at the end of a row to remove this category from the toolbox.

    CAUTION: as soon as this config node is being used in a Blockly node that contains blocks from the removed category (in its workspace), then those blocks will disappear! This can result in strange unexpected behaviour! The user will be informed about this via this Node-RED notification:

    Notification

  4. Drag and drop categories in the order you want them to appear in the toolbox. Note that this is only possible for custom categories, i.e. categories which we have developed for this node:

    Custom categories

    For standard Blockly categories (developed by Google), you will have to update the content of their toolbox.xml file:

    standard

    Best way to do that is copy their xml file to a custom folder, and then store the link to your xml file in the "Blockly standard" category. Otherwise your xml file might be overwritten when a new version of this node is being installed!

  5. Add blocks to existing categories by simply re-using those category names in your toolbox.xml file. For example our "Blockly extension" category contains some of our custom blocks that we have added to existing standard Blockly categories. This is demonstrated in the demo of point 6.

  6. Add your own category to the toolbox, by pressing the "add" buttom at the bottom of the editableList. Now you can specify the required resources, which can be files from an npm module or from a normal folder. For example when the following line is added:

    image

    With those resources (i.e. full file paths after the prefix 'blockly-contrib/file/'):

    [
 "blockly-contrib/file/c:/temp/myblocks/myBlocksCodeGen.js",
 "blockly-contrib/file/c:/temp/myblocks/myBlocksDefs.js",
 "blockly-contrib/file/c:/temp/myblocks/myToolbox.xml",
 "blockly-contrib/file/c:/temp/myblocks/my_messages/en.js"
]

    Which tells this node to get your files e.g. from this folder:

    image

    The myToolbox.xml file specifies that one of my custom blocks need to be displayed in my custom category, and the other one needs to be displayed in the existing Node-RED library:

    <xml xmlns="http://www.w3.org/1999/xhtml" id="toolbox" style="display: none;">
   <category name="MyCategory" colour="#FF0000">
      <block type="my_own_block"></block>
   </category>   
   <category name="Node-RED" colour="#BB8FCE">
      <block type="my_nodered_block"></block>
   </category>
</xml>

    Which will result in this:

    blockly_custom_category

    myblocks.zip contains the files for this custom category example.

  7. If you want to revert your changes, you can use the "reset" button at the bottom of the editableList.

CAUTION: when you don't want to continue with custom categories, it is advised to deactivate the "Customize toolbox categories" checkbox. Although it will work, the categories will not be updated in a future release of this node (by our categories)!

Clone this wiki locally