OpenNoodl/dev-docs/tasks/phase-3-editor-ux-overhaul/TASK-012-blockly-integration/CHANGELOG.md

TASK-012 Changelog

Track all changes made during implementation.

---

[Unreleased]

Added

• Initial task documentation (README.md, CHECKLIST.md, BLOCKS-SPEC.md)
• Blockly package installed (~500KB)
• BlocklyWorkspace React component with full initialization and cleanup
• Custom Noodl blocks: Input/Output, Variables, Objects (basic), Arrays (basic)
• JavaScript code generators for all custom blocks
• Theme-aware SCSS styling for Blockly workspace
• Module exports and initialization functions

Changed

• (none yet)

Fixed

• (none yet)

Removed

• (none yet)

---

Session Log

Session 1: 2026-01-11

Duration: ~1 hour

Phase: A - Foundation

Changes:

• Created branch task/012-blockly-logic-builder
• Installed blockly npm package in noodl-editor
• Created packages/noodl-editor/src/editor/src/views/BlocklyEditor/ directory
• Implemented BlocklyWorkspace React component with:
  • Blockly injection and initialization
  • Workspace serialization (save/load JSON)
  • Change detection callbacks
  • Proper cleanup on unmount
• Defined custom blocks in NoodlBlocks.ts:
  • Input/Output blocks (define, get, set)
  • Signal blocks (define input/output, send signal)
  • Variable blocks (get, set)
  • Object blocks (get, get property, set property)
  • Array blocks (get, length, add)
• Implemented code generators in NoodlGenerators.ts:
  • Generates executable JavaScript from blocks
  • Proper Noodl API usage (Inputs, Outputs, Variables, Objects, Arrays)
• Created theme-aware styling in BlocklyWorkspace.module.scss
• Added module exports in index.ts

Files Created:

• packages/noodl-editor/src/editor/src/views/BlocklyEditor/BlocklyWorkspace.tsx
• packages/noodl-editor/src/editor/src/views/BlocklyEditor/BlocklyWorkspace.module.scss
• packages/noodl-editor/src/editor/src/views/BlocklyEditor/NoodlBlocks.ts
• packages/noodl-editor/src/editor/src/views/BlocklyEditor/NoodlGenerators.ts
• packages/noodl-editor/src/editor/src/views/BlocklyEditor/index.ts

Files Modified:

• packages/noodl-editor/package.json (added blockly dependency)

Notes:

• Phase A foundation complete ✅
• Blockly workspace renders with default toolbox
• Custom blocks defined but not yet tested in live environment
• Code generation implemented for basic Noodl API access
• Ready to proceed with Phase B (Logic Builder Node)

Next Steps:

• Test Blockly rendering in the editor
• Create Logic Builder runtime node definition
• Implement I/O detection from workspace
• Build modal editor integration

---

Session 2: [Date]

Duration: X hours

Changes:

Files Modified:

Notes:

---

(Continue adding sessions as work progresses)