Using 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: shell yarn add @blockly/block-shareable-procedures

NPM: shell 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:

JSON

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

XML

<xml id="toolbox" style="display: none">
  <category name="Functions" custom="PROCEDURE">
</xml>