Use built-in procedure blocks
Stay organized with collections
Save and categorize content based on your preferences.
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.
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>
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-04-14 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-04-14 UTC."],[[["\u003cp\u003eLeverage the \u003ccode\u003e@blockly/block-shareable-procedures\u003c/code\u003e plugin for utilizing procedure blocks within Blockly, ensuring compatibility and enhanced functionality.\u003c/p\u003e\n"],["\u003cp\u003eInstall the plugin effortlessly using either Yarn (\u003ccode\u003eyarn add @blockly/block-shareable-procedures\u003c/code\u003e) or NPM (\u003ccode\u003enpm install @blockly/block-shareable-procedures\u003c/code\u003e) based on your preference.\u003c/p\u003e\n"],["\u003cp\u003eIntegrate 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.\u003c/p\u003e\n"],["\u003cp\u003eIncorporate 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.\u003c/p\u003e\n"]]],["The `@blockly/block-shareable-procedures` plugin is recommended for using procedure blocks. Installation is done via Yarn or NPM. Usage involves importing `Blockly` and the plugin's `blocks`, then using the `unregisterProcedureBlocks()` and `Blockly.common.defineBlocks(blocks)` methods. This defines procedure blocks that maintain compatibility with legacy blocks. To make the blocks accessible, add a \"Functions\" category with the custom attribute \"PROCEDURE\" to your category-style toolbox, which is compatible with the dynamic procedure category.\n"],null,["# Use built-in procedure blocks\n\nUsing the plugin\n----------------\n\nTo use procedure blocks, we recommend using the\n[@blockly/block-shareable-procedures](https://www.npmjs.com/package/@blockly/block-shareable-procedures) plugin.\nFor the difference between the plugin blocks and the built-in blocks see the\n[overview](/blockly/guides/create-custom-blocks/procedures/overview).\n\n### Installation\n\nYarn:\n`shell\nyarn add @blockly/block-shareable-procedures`\n\nNPM:\n`shell\nnpm install @blockly/block-shareable-procedures`\n\n### Usage\n\n import Blockly from 'blockly';\n import {blocks, unregisterProcedureBlocks} '@blockly/block-shareable-procedures';\n\n unregisterProcedureBlocks();\n Blockly.common.defineBlocks(blocks);\n\nThis will define procedure blocks that have the same names as the legacy\nbuilt-in procedure blocks. So if you are loading JSON or XML that was saved\nwith the old procedure blocks, they will continue to load properly.\n\n#### Adding them to the toolbox\n\nAfter you have defined your blocks (either the plugin ones, or the legacy\nbuilt-in ones), you need to make them available to your users. This requires\nyou to use a category style toolbox, because the procedure category is populated\ndynamically, which is not supported by the flyout toolbox.\n\nYou can add the dynamic category to your toolbox like so: \n\n### JSON\n\n {\n \"kind\": \"categoryToolbox\",\n \"contents\": [\n {\n \"kind\": \"category\",\n \"name\": \"Functions\",\n \"custom\": \"PROCEDURE\"\n }\n ]\n };\n\n### XML\n\n \u003cxml id=\"toolbox\" style=\"display: none\"\u003e\n \u003ccategory name=\"Functions\" custom=\"PROCEDURE\"\u003e\n \u003c/xml\u003e"]]