Skip to main content

Use built-in procedure blocks

Using the plugin​

To use procedure blocks, we recommend using the @blockly/block-shareable-procedures plugin. For the difference between the plugin blocks and the built-in blocks see the overview.

Installation​

Yarn:

yarn add @blockly/block-shareable-procedures

NPM:

npm install @blockly/block-shareable-procedures

Usage​

import Blockly from 'blockly';
import {blocks, unregisterProcedureBlocks} '@blockly/block-shareable-procedures';

unregisterProcedureBlocks();
Blockly.common.defineBlocks(blocks);

This will define procedure blocks that have the same names as the legacy built-in procedure blocks. So if you are loading JSON or XML that was saved with the old procedure blocks, they will continue to load properly.

Adding them to the toolbox​

After you have defined your blocks (either the plugin ones, or the legacy built-in ones), you need to make them available to your users. This requires you to use a category style toolbox, because the procedure category is populated dynamically, which is not supported by the flyout toolbox.

You can add the dynamic category to your toolbox like so:

{
  "kind": "categoryToolbox",
  "contents": [
    {
      "kind": "category",
      "name": "Functions",
      "custom": "PROCEDURE"
    }
  ]
};