Use built-in procedure blocks

  • Leverage the @blockly/block-shareable-procedures plugin for utilizing procedure blocks within Blockly, ensuring compatibility and enhanced functionality.

  • Install the plugin effortlessly using either Yarn (yarn add @blockly/block-shareable-procedures) or NPM (npm install @blockly/block-shareable-procedures) based on your preference.

  • Integrate the plugin into your project by importing necessary modules, unregistering existing procedure blocks, and defining new ones with shared functionalities, maintaining backward compatibility with older saved files.

  • Incorporate the procedure blocks into your toolbox by utilizing a category style toolbox with a dynamic "Functions" category, allowing users easy access to these essential 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>