Migrate to modern Blockly

[SimonShiki]

Description

Since the Scratch foundation has redone scratch-blocks based on the latest version of Blockly, the scratch-blocks used by clipcc are outdated and need to be upgraded urgently.

Proposed Changes

1. Once scratchfoundation has officially completed their work, replace the existing clipcc-block with the new scratch-blocks and update the associated toolchain.
2. Re-applying clipcc changes based on the new code base.
3. Use raw-loader to load CSS of blockly.

Related upstream branch

https://github.com/scratchfoundation/scratch-gui/tree/spork
https://github.com/scratchfoundation/scratch-vm/tree/spork
https://github.com/scratchfoundation/scratch-blocks/tree/spork
https://github.com/scratchfoundation/scratch-editor/tree/spork

Related Pull Requests

• 🏗️ feat: migration to modern blockly #80
• Migrate basic stuffs to modern blockly. #81
• ♻️ refactor(block): migrate procedures to modern blockly #82
• ♻️ refactor(block): migrate block definitions to typescript #83
• 💄 style(block): scratch styled flyout button #85
• 🧪 test(block): setup tests for block #87
• ✨ feat(block): Scratch-styled comments #90
• ✨ feat(block): Scratch-styled context menu #96
• ✨ feat(block): visual report #104
• ✨ feat(block): unknown block #108
• ✨ feat(block): implement ScratchNumberField #110
• ✨ feat(block): checkbox in flyout #111
• ✨ feat(block): make modern blockly Scratch-stylized #112
• 🚚 chore(block): migrate scratch variable model #125

Todo Lists

• Core Features

  • Migrate vertical extensions.
  • Use custom theme to manage block color. Reference: Theme
  • Use raw-loader to load CSS of blockly.
  • CSS variables (should keep up with scratch-blocks). ✨ feat(block): make modern blockly Scratch-stylized #112
  • Variables. Reference: Variables 🚚 chore(block): migrate scratch variable model #125
  • Procedures. Reference: Procedures
  • Comments. Reference: Workspace Comments
    • Issue: deleted block comment cannot be undone.
      ✨ feat(block): Scratch-styled comments #90

• Blocks

  • See ♻️ refactor(block): migrate block definitions to typescript #83
  • Need Discuss: The shadow inputs like menu should be rendered as its parent's colour.
  • Issue: Insertion marker
    Insertion marker should shown as Scratch #88

• Toolbox

  • Continuous toolbox. Reference: blockly-samples/continuous-toolbox
    • Issue: The toolbox should have fixed width.
  • Category style of ClipCC.
    • Issue: Selected category won't update when dragging scrollbar.
      Solution: Override setMetrics_ to update selected category.
    • Issue: Display issues with nested category. 🐛 fix(block): toolbox related issues #106
  • Button styles. 💄 style(block): scratch styled flyout button #85
  • Checkbox. ✨ feat(block): checkbox in flyout #111
  • Status indicator label.'
  • Events: BlockDragOutside

• Fields

  • FieldAngle. Reference: blockly-samples/field-angle
  • FieldColorSlider. Reference: blockly-samples/field-colour
  • FieldMatrix
    • Issue: Cannot use Blockly.getMainWorkspace in initView (in FieldMatrix) since mainWorkspace hasn't set when initializing the toolbox. (scratch-blocks spork may also meet the issue)
      Solution: Add FieldMatrix.getWorkspaceOption to get correct workspace.
    • Issue: FieldMatrix cannot automatically use parent block's color theme. Generally, in the scratch-blocks it specified block matrix has the color of pen, it is not a good solution.
      Solution: Override applyColour to update source block's color.
    • Issue: FieldMatrix with initial value '' cannot render properly.
      Solution: Modify FieldMatrix.doClassValidation_.
    • Issue: Dragging mouse on FieldMatrix editor will get unexpected result.
      Solution: Fix condition in FieldMatrix.doValueUpdate_.
    • Plan: Configurable matrix size. Reference: blockly-samples/field-bitmap
  • FieldNote
    • Issue: FieldNote's json config reads note while the block definition uses value in blocks_common/note.js. This also occurs in scratch-blocks.
      Solution: Replace value with note in block definition.
  • FieldButton: Replacement of FieldPlusMinus.
  • FieldNumber
    • Issue: Blockly's FieldNumber doesn't allow empty value('') and doesn't show number pad in touch devices. We might have to implement another Field class. ✨ feat(block): implement ScratchNumberField #110
  • FieldVariable
    • Issue: A block contains FieldVariable without any connection to it's inputs will be a bit higher than other blocks.
      Solution: Override zelos.ConstantProvider.setFontConstants_ to prevent update of FIELD_DROPDOWN_BORDER_RECT_HEIGHT. It should be fixed to 8 * GRID_UNIT
      🐛 fix(block): prevent update of FIELD_DROPDOWN_BORDER_RECT_HEIGHT #89
  • FieldVariableGetter
    • Todo: domToFieldVariable and its behaviors.
  • FieldVerticalSeparator
  • FieldTextInputRemovable
  • Removed fields: FieldNumberDropdown, FieldTextDropdown, FieldColour, FieldIconMenu

• Developer Enhancements

  • Migrate .eslintrc to eslint.config.mjs, to support typescript-eslint. Reference

• Compatibility Issues

  • Compatibility for unknown blocks. ✨ feat(block): unknown block #108
  • Serialization.

• Integration

  • Integration with vm and gui.
    • ✨ feat: integration with new blockly #128

• Other Plans

  • Field.updateSize_ should deal with margin argument.
  • Constructor of Field and its sub-classes should deal with value Field.SKIP_SETUP. ✨ feat(block): implement ScratchNumberField #110
  • Unit tests. 🧪 test(block): setup tests for block #87
  • Scratch-specific context menu behaviors. ✨ feat(block): Scratch-styled context menu #96 (ref)
  • Visual Report. ✨ feat(block): visual report #104
  • Zoom controls. ✨ feat(block): make modern blockly Scratch-stylized #112
  • Glow stack. ✨ feat(block): glow stack #130
  • Make blocks can drag outside. ✨ feat(block): make blocks can drag outside #131

Warnings Related to Blockly

• Blockly.Workspace.getAllVariables was deprecated in v12 and will be deleted in v13. Use Blockly.Workspace.getVariableMap().getAllVariables instead.
• Blockly.utils.style.getSizeWithDisplay() was deprecated in v11.2 and will be deleted in v13.