积木 JSON 定义

    Blockly.Blocks['move_and_say'] = {
        init: function() {
            this.jsonInit({
                message0: '移动 %1 步后说 %2',
                args0: [
                    {
                        type: 'input_value',
                        name: 'STEPS'
                    },
                    {
                        type: 'field_dropdown',
                        name: "MENU",
                        options: [
                            ['你好!', 'hello'],
                            ['再见!', 'bye']
                        ]
                    }
                ],
                colour: '#4C97FF',
                colourSecondary: '#3373CC',
                category: 'motion',
                extensions: ['shape_statement']
            })
        }
    };
            

积木 XML 代码

    <xml>
        <category name="动作" id="action" colour="#4C97FF" secondaryColour="#3373CC">
            <block type="move_and_say">
                <value name="STEPS">
                    <shadow type="math_number">
                        <field name="NUM">10</field>
                    </shadow>
                </value>
                <field name="MENU">bye</field>
            </block>
        </category>
    </xml>
            
为方便示例展示,直接使用了打包好的 scratch-blocks 的脚本,脚本来自 https://github.com/LLK/scratch-blocks.git 可以通过如下操作打包所需的脚本 dist/web/vertical.js
    > git clone https://github.com/LLK/scratch-blocks.git
    > cd scratch-blocks
    > npm i
    > npm run prepublish
                
你也可以通过 npm 依赖的方式在项目中使用