✨ feat(block): make modern blockly Scratch-stylized

[SimonShiki]

Proposals

• Scratch-styled zoom controls
  Use a unelegant way to do this. tracking feat: Make zoom controls and trash can native SVG RaspberryPiFoundation/blockly#9128 to improve
• Scratch-styled css
• CSS Variable controlled styles

Known issues

• Dragging workspace comments cannot over the flyout
  the RenderedWorkspaceComment:onNodeFocus was unconditionally moving the comment back to the BLOCK layer, which is rendered below the flyout. since that class is used internally, we may use monkey-patches to do this.

Blockly.comments.RenderedWorkspaceComment.prototype.onNodeFocus = function() {
  this.select();
  // Ensure workspace comment is on the top while dragging.
  if (!this.workspace.isDragging()) {
    this.workspace.getLayerManager()?.append(this, Blockly.layers.BLOCK);
  }

  this.workspace.scrollBoundsIntoView(this.getBoundingRectangle());
};

• Workspace comments always lower than block comments
  tracking Workspace comments and bubbles appear behind the toolbox when dragged RaspberryPiFoundation/blockly#9537

[cloudflare-workers-and-pages]

Deploying clipcc-preview with    Cloudflare Pages

Latest commit:	c4580e1
Status:	🚫  Build failed.

View logs

[Copilot]

Pull request overview

This PR modernizes the Blockly implementation to adopt Scratch-style visual design, introducing custom zoom controls, theme management functions, and CSS variable-based styling for improved customization and consistency.

Key Changes:

• New custom zoom controls with Scratch-styled icons and positioning (zoom-in, zoom-out, reset)
• Enhanced theme management API with createTheme, getTheme, and setTheme functions
• CSS variable injection system for dynamic color customization across components

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
packages/block/tests/playground.html	Added "nostalgic" theme demo with custom color palette and theme selector dropdown
packages/block/src/zoom_controls.ts	New Scratch-styled zoom controls implementation with image-based buttons and custom positioning
packages/block/src/toolbox/flyout.ts	Registered flyout CSS styles for border styling
packages/block/src/theme.ts	Refactored theme system: removed nested color objects, added theme management functions, and CSS variable injection
packages/block/src/styles/toolbox.css	Added border styling and content-box sizing
packages/block/src/styles/note.css	Updated CSS variable reference to use --clipcc-block- prefix
packages/block/src/styles/flyout.css	New file adding border and border-radius styling for flyout with RTL support
packages/block/src/styles/comment.css	Enhanced comment styling with improved borders, shadows, and state-specific appearances
packages/block/src/styles/colour_slider.css	Updated CSS variable reference to use --clipcc-block- prefix
packages/block/src/styles/checkbox.css	Replaced hardcoded colors with CSS variables
packages/block/src/styles/blockly.css	Added menu hover styles, drag shadows, disabled block styles, dropdown radius, and zoom control opacity effects
packages/block/src/report_value.ts	Updated import path from ./colours to ./theme
packages/block/src/renderer/constants.ts	Added Colours import and updated CSS generation to use CSS variables with fallbacks
packages/block/src/index.ts	Integrated new zoom controls via monkey patch, updated theme imports, and added CSS variable injection

Comments suppressed due to low confidence (4)

packages/block/src/theme.ts:219

• The documentation states "use main workspace by default" but this is misleading since the parameter is typed as required. Either the parameter should be optional (workspace?: Blockly.WorkspaceSvg) and the documentation updated to clarify when it's used, or the documentation should be changed to reflect that the workspace parameter is required.
  packages/block/src/theme.ts:197
• The themeDef parameter is typed as object, which is too generic and provides no type safety or IDE autocomplete support. Consider using a more specific type like Partial<Blockly.Theme.ITheme> or defining a custom interface that describes the expected theme definition structure.
  packages/block/src/theme.ts:228
• Calling injectCssVariables() here is unnecessary and incorrect. The Colours object is static and doesn't change based on the theme being set. This call would re-inject the same CSS variables every time setTheme is called, which provides no benefit. If the intent is to support dynamic theme colors, the Colours object would need to be updated first, or a different approach should be used (e.g., theme-specific CSS variables).
  packages/block/src/theme.ts:224
• The function signature states workspace is required, but the logic at line 222-224 assumes it could be falsy and tries to get the main workspace as a fallback. This creates a type mismatch. Either mark the parameter as optional (workspace?: Blockly.WorkspaceSvg) or remove the null check logic.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[alexcui03]

Small changes should be made, the others are great.

Bugs:

• After setting the theme, block render info won't re-create, but the shape, size and position might be changed in another theme, depending on the font family.

[SimonShiki]

• After setting the theme, block render info won't re-create, but the shape, size and position might be changed in another theme, depending on the font family.

Blockly won't re-render blocks when theme changed. since the update logic is in BlockSvg/WorkspaceSvg's prototype, there's nothing we can do now.

[alexcui03]

• After setting the theme, block render info won't re-create, but the shape, size and position might be changed in another theme, depending on the font family.

Blockly won't re-render blocks when theme changed. since the update logic is in BlockSvg/WorkspaceSvg's prototype, there's nothing we can do now.

i see that blockly do allow theme to change there font weight, it might to be issued in blockly.