Scratchblocks projects site (#1512)

- adds scratchblocks library
- uses the scratchblocks helpers from projects-ui to render
scratchblocks in instructions panel
- adds styling for scratch code block highlighting for instructions
panel

The scratchblocks helpers from projects-ui are needed to render the
blocks within the instruction panel. In projects-ui these are used for
non editor scratch projects. The reason this is also needed in editor-ui
is because for editor projects, instructions are handled by the
InstructionsPanel component in editor-ui. It is possible that we can
remove this from editor-ui if/when we move to using Raspberry Flavoured
Markdown and client side rendering of instructions down the line.

Before:
<img width="562" height="266" alt="image"
src="https://github.com/user-attachments/assets/12b1a14e-ec69-4c49-a0d8-9b7d8a43b469"
/>

After:
<img width="565" height="377" alt="image"
src="https://github.com/user-attachments/assets/4e0ad983-8da4-4bf2-ab27-833886f4f270"
/>

---------

Co-authored-by: Jo Humphrey <31373245+jamdelion@users.noreply.github.com>

Author: rammodhvadia

package.json

@@ -68,6 +68,7 @@
     "redux-oidc": "^4.0.0-beta1",
     "scratchReactDomVendor": "npm:react-dom@18.3.1",
     "scratchReactVendor": "npm:react@18.3.1",
+    "scratchblocks": "^3.7.0",
     "skulpt": "^1.2.0",
     "stream-browserify": "^3.0.0",
     "three": "0.169.0",

src/assets/stylesheets/Instructions.scss

@@ -7,6 +7,36 @@
 .project-instructions {
   block-size: 100%;
 
+  code.block3control {
+    background-color: #ffab19;
+  }
+  code.block3events {
+    background-color: #ffbf00;
+  }
+  code.block3extensions {
+    background-color: #0fbd8c;
+  }
+  code.block3looks {
+    background-color: #9966ff;
+  }
+  code.block3motion {
+    background-color: #4c97ff;
+  }
+  code.block3myblocks {
+    background-color: #ff6680;
+  }
+  code.block3operators {
+    background-color: #59c059;
+  }
+  code.block3sensing {
+    background-color: #5cb1d6;
+  }
+  code.block3sound {
+    background-color: #cf63cf;
+  }
+  code.block3variables {
+    background-color: #ff8c1a;
+  }
   &__content {
     padding-block-end: var(--project-instructions-padding, $space-1);
   }

src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx

@@ -1,22 +1,24 @@
 /* eslint-disable jsx-a11y/anchor-has-content */
 // This is disabled because the empty anchor tag is used for translation and will have content when rendered.
+
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import { Tab, TabList, TabPanel, Tabs } from "react-tabs";
 import SidebarPanel from "../SidebarPanel";
 
 import Prism from "prismjs";
+import PlusIcon from "../../../../assets/icons/plus.svg";
 import demoInstructions from "../../../../assets/markdown/demoInstructions.md";
 import "../../../../assets/stylesheets/Instructions.scss";
 import { quizReadyEvent } from "../../../../events/WebComponentCustomEvents";
 import { setProjectInstructions } from "../../../../redux/EditorSlice";
 import { setCurrentStepPosition } from "../../../../redux/InstructionsSlice";
 import populateMarkdownTemplate from "../../../../utils/populateMarkdownTemplate";
+import { scratchblocksInit } from "../../../../utils/scratchblocks";
 import DesignSystemButton from "../../../DesignSystemButton/DesignSystemButton";
 import RemoveInstructionsModal from "../../../Modals/RemoveInstructionsModal";
 import ProgressBar from "./ProgressBar/ProgressBar";
-import PlusIcon from "../../../../assets/icons/plus.svg";
 
 const InstructionsPanel = () => {
   useEffect(() => {
@@ -48,7 +50,7 @@ const InstructionsPanel = () => {
   const currentStepPosition = useSelector(
     (state) => state.instructions.currentStepPosition,
   );
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const stepContent = useRef();
 
   const [isQuiz, setIsQuiz] = useState(false);
@@ -64,6 +66,7 @@ const InstructionsPanel = () => {
 
   const hasInstructions = steps && steps.length > 0;
   const hasMultipleSteps = numberOfSteps > 1;
+  const isScratchProject = project?.project_type === "code_editor_scratch";
 
   const applySyntaxHighlighting = (container) => {
     const codeElements = container.querySelectorAll(
@@ -96,6 +99,9 @@ const InstructionsPanel = () => {
         stepContent.current?.parentElement.scrollTo({ top: 0 });
         stepContent.current.innerHTML = content;
         applySyntaxHighlighting(stepContent.current);
+        if (isScratchProject) {
+          scratchblocksInit(i18n.language, stepContent.current);
+        }
       }
     };
     if (isQuiz && !quizCompleted) {
@@ -112,6 +118,8 @@ const InstructionsPanel = () => {
     quizCompleted,
     isQuiz,
     instructionsTab,
+    isScratchProject,
+    i18n.language,
   ]);
 
   useEffect(() => {

src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.test.js

@@ -6,12 +6,30 @@ import { setProjectInstructions } from "../../../../redux/EditorSlice";
 import { act } from "react";
 import Modal from "react-modal";
 import Prism from "prismjs";
+import { scratchblocksInit } from "../../../../utils/scratchblocks";
 
 window.HTMLElement.prototype.scrollTo = jest.fn();
 jest.mock("prismjs", () => ({
   ...jest.requireActual("prismjs"),
   highlightElement: jest.fn(),
 }));
+jest.mock("../../../../utils/scratchblocks", () => ({
+  scratchblocksInit: jest.fn(),
+}));
+
+// Stand-in for the real (jsdom-unfriendly) scratchblocks SVG rendering: swap
+// each .language-blocks element for an svg so we can assert it was processed.
+// Set as the implementation per-test because jest `resetMocks: true` clears it.
+const fakeScratchblocksInit = (_locale, container) => {
+  container.querySelectorAll(".language-blocks").forEach((block) => {
+    const svg = global.document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "svg",
+    );
+    svg.setAttribute("data-testid", "scratchblock");
+    block.parentNode.replaceChild(svg, block);
+  });
+};
 
 describe("When instructionsEditable is true", () => {
   describe("When there are instructions", () => {
@@ -357,6 +375,115 @@ describe("When instructions are not editable", () => {
     });
   });
 
+  describe("When the project is a scratch project", () => {
+    const scratchSteps = [
+      {
+        content: "<pre><code class='language-blocks'>say [hello]</code></pre>",
+      },
+      {
+        content:
+          "<pre><code class='language-blocks'>move (10) steps</code></pre>",
+      },
+    ];
+
+    const renderAtStep = (currentStepPosition) => {
+      const mockStore = configureStore([]);
+      const store = mockStore({
+        editor: {
+          project: { project_type: "code_editor_scratch" },
+          instructionsEditable: false,
+        },
+        instructions: {
+          project: { steps: scratchSteps },
+          quiz: {},
+          currentStepPosition,
+        },
+      });
+      return render(
+        <Provider store={store}>
+          <InstructionsPanel />
+        </Provider>,
+      );
+    };
+
+    beforeEach(() => {
+      scratchblocksInit.mockImplementation(fakeScratchblocksInit);
+    });
+
+    test("Renders the scratch block as an svg", () => {
+      renderAtStep(0);
+      expect(screen.getByTestId("scratchblock")).toBeInTheDocument();
+    });
+
+    test("Initialises scratchblocks with the step content container", () => {
+      renderAtStep(0);
+      expect(scratchblocksInit).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.any(HTMLElement),
+      );
+    });
+
+    test("Re-renders scratch blocks when navigating to another step", () => {
+      const { rerender } = renderAtStep(0);
+      scratchblocksInit.mockClear();
+
+      const mockStore = configureStore([]);
+      const store = mockStore({
+        editor: {
+          project: { project_type: "code_editor_scratch" },
+          instructionsEditable: false,
+        },
+        instructions: {
+          project: { steps: scratchSteps },
+          quiz: {},
+          currentStepPosition: 1,
+        },
+      });
+      rerender(
+        <Provider store={store}>
+          <InstructionsPanel />
+        </Provider>,
+      );
+
+      expect(scratchblocksInit).toHaveBeenCalled();
+      expect(screen.getByTestId("scratchblock")).toBeInTheDocument();
+    });
+  });
+
+  describe("When the project is not a scratch project", () => {
+    beforeEach(() => {
+      scratchblocksInit.mockClear();
+      const mockStore = configureStore([]);
+      const store = mockStore({
+        editor: {
+          project: { project_type: "python" },
+          instructionsEditable: false,
+        },
+        instructions: {
+          project: {
+            steps: [
+              {
+                content:
+                  "<pre><code class='language-blocks'>say [hello]</code></pre>",
+              },
+            ],
+          },
+          quiz: {},
+          currentStepPosition: 0,
+        },
+      });
+      render(
+        <Provider store={store}>
+          <InstructionsPanel />
+        </Provider>,
+      );
+    });
+
+    test("Does not initialise scratchblocks", () => {
+      expect(scratchblocksInit).not.toHaveBeenCalled();
+    });
+  });
+
   describe("When there is a quiz", () => {
     const quizHandler = jest.fn();