Grapesjs Blockly

Adding interactivity to a page built visually normally means dropping to JavaScript. This plugin offers a middle path: Google Blockly's drag-and-drop programming interface, opened from a component's toolbar, generating the script attached to that component.

What it adds

A blockly-script command and a toolbar button that opens the Blockly workspace in a modal. The generated code is attached to the selected component, so behaviour travels with the element rather than living in a separate file.

Options

• blocklyOptions — toolbox replaces the default Blockly toolbox, toolboxPush adds to it, and workspaceOptions passes injection options straight to Blockly.
• starter — the canvas starter blocks. The default generates let el = this, giving the script a reference to its own component.
• blocklyTypesSupport — which component types may have scripts attached. Defaults to default, wrapper, text, textnode, image, video and svg. Leave out components that already define their own scripts.
• onRun and onError — hooks fired after the syntax check passes or fails.
• modalTitle, buttonLabel, toolbarIcon and codeViewOptions — interface details.

Requirements

Blockly must be present, and the @blockly/block-plus-minus plugin is recommended. Register this plugin after your other components.