@blockly/block-plus-minus

A group of Blockly blocks that replace the built-in mutator UI with a +/- based UI.

Currently this only affects the built-in blocks that use mutators (controls_if, text_join, list_create_with, procedures_defnoreturn, and procedures_defreturn).

But the ability to easily add this to your own mutators may be added in the future.

Installation

Yarn

yarn add @blockly/block-plus-minus

npm

npm install @blockly/block-plus-minus --save

Usage

Import

import Blockly from 'blockly';
import '@blockly/block-plus-minus';

Localization and text customization

The plus and minus buttons have ARIA labels to communicate their purpose to screenreaders. These are localizable; additionally, if you want to customize the labels (for example, to use a different term that "input" for procedure blocks) you can do so by adjusting the messages:

Blockly.Msg['ARIA_LABEL_ADD_INPUT'] = 'Add parameter';
// Inject workspace, etc...

XML

Blocks will automatically use the +/- UI when loaded from XML. But here is some example XML incase you are trying to add specific mutations of blocks:

If

<block type="controls_if"></block>

<block type="controls_if">
    <mutation elseif="1"></mutation>
</block>

<block type="controls_if">
    <mutation elseif="1" else="1"></mutation>
</block>

Text Join

<block type="text_join"></block>

<block type="text_join">
    <mutation items="0"></mutation>
</block>

List Create

<block type="lists_create_with"></block>

<block type="lists_create_with">
    <mutation items="0"></mutation>
</block>

License

Apache 2.0