@blockly/plugin-typed-variable-modal Built on Blockly

A Blockly plugin that adds the ability to create a modal for creating typed variables.


npm install @blockly/plugin-typed-variable-modal --save


To add a Typed Variable Modal to your application you will have to create a custom dynamically populated flyout category. More information on custom flyouts can be found here.


import * as Blockly from 'blockly';
import { TypedVariableModal } from '@blockly/plugin-typed-variable-modal';


<script src="https://unpkg.com/@blockly/plugin-typed-variable-modal"></script>


Create your workspace.

workspace = Blockly.inject('blocklyDiv', {
    toolbox: toolbox

Add a custom category to your toolbox.

<category name="Colours" custom="CREATE_TYPED_VARIABLE"></category>

Define a callback to provide the category content.

const createFlyout = function(workspace) {
    let xmlList = [];
    // Add your button and give it a callback name.
    const button = document.createElement('button');
    button.setAttribute('text', 'Create Typed Variable');
    button.setAttribute('callbackKey', 'callbackName');


    // This gets all the variables that the user creates and adds them to the
    // flyout.
    const blockList = Blockly.VariablesDynamic.flyoutCategoryBlocks(workspace);
    xmlList = xmlList.concat(blockList);
    return xmlList;

Register the callback for the toolbox category.

workspace.registerToolboxCategoryCallback('CREATE_TYPED_VARIABLE', createFlyout);

Create your Typed Variable Modal using the workspace, callbackName for the button and your types.

const typedVarModal = new TypedVariableModal(workspace, 'callbackName', [["PENGUIN", "Penguin"], ["GIRAFFE", "Giraffe"]]);

Blockly Languages

We do not currently support translating the text in this plugin to different languages. However, if you would like to support multiple languages the different messages in the typed variable modal can be set by calling typedVarModal.setLocale(messages).

Messages that need to be translated for a Typed Variable Modal:



Apache 2.0