Custom Blocks
Size: (weeks of effort)
Summary:
As a user of the coding environment, I can create custom blocks of reusable sequences.
Details:
The following pages in the Prototype Design show the Custom Blocks interface:
- https://xd.adobe.com/view/b98ef251-c459-4cbc-4cb4-4cffeae64801-cfbf/screen/2d2ea2d9-6547-410e-9c3a-04246956de85/Custom-Blocks-1
- https://xd.adobe.com/view/b98ef251-c459-4cbc-4cb4-4cffeae64801-cfbf/screen/8fe3fe71-4540-4400-97e7-cc8cfba15319/Custom-Blocks-2
- https://xd.adobe.com/view/b98ef251-c459-4cbc-4cb4-4cffeae64801-cfbf/screen/e7389016-8dd7-4892-8ebf-a7f730de5372/Custom-Blocks-3
- https://xd.adobe.com/view/b98ef251-c459-4cbc-4cb4-4cffeae64801-cfbf/screen/7915867e-5be2-44fa-b35e-80c9625fd89d/Custom-Blocks-4
- https://xd.adobe.com/view/b98ef251-c459-4cbc-4cb4-4cffeae64801-cfbf/screen/a6c17ed8-2d62-407b-9061-6ffb8583cf28/Custom-Blocks-5
- https://xd.adobe.com/view/b98ef251-c459-4cbc-4cb4-4cffeae64801-cfbf/screen/e8712353-09fe-4e07-8c10-3289aca365c5/Custom-Blocks-6
- https://xd.adobe.com/view/b98ef251-c459-4cbc-4cb4-4cffeae64801-cfbf/screen/6de5c3a3-c316-41d7-b194-7cf3224a1e23/Custom-Blocks-7
Description of changes and new functionality:
- The command palette has a new tab called "Custom Blocks", with contents:
- "Create A Block" button
- One block for each previously created custom block
- The "Create A Block" button opens an overlay with similar functionality to the block editor, enabling the user to create a sequence
- The custom block overlay includes:
- A text control for setting the block name
- Buttons to Save or Cancel the creation of the custom block
Design Questions:
- Accessibility design
- What is the keyboard interaction for the Custom Block editor?
- What ARIA attributes do we need?
- How can one edit a Custom Block after it has been created?
- Vocabulary question:
- What is the Program plus Custom Commands called?
- A Project?
- If it's a "Program", what is the main sequence called?
- What is the Program plus Custom Commands called?
- Redefinition of built-in commands
- It would be possible to create a Custom Block with a name the same as an existing built-in block, such as "forward"; options:
- Disallow it
- Allow it and treat them as 2 distinct things
- Allow it and have the new Custom Block replace the built-in one (Simon: this is powerful in the right programming contexts, but I don't think it's a good idea in our coding environment right now, without more supports to explain what is happening and how to manage it)
- How does having the same name as a built-in command interact with localization of the commands names, where they might have different names depending on the language?
- It would be possible to create a Custom Block with a name the same as an existing built-in block, such as "forward"; options:
- Recursion
- In the current design, where we cannot edit a Custom Command, recursion isn't possible (I think), but when we add editing, recursion becomes possible
- Simon: my thinking is that we terminate program execution on recursion as we have no conditionals in our language and all recursion is therefore infinite
- There could be potential designs where we block recursion at the editing stage
- Some examples of recursion:
- MyCustomBlock: MyCustomBlock (the block sequence contains itself)
- MuCustomBlock1: MyCustomBlock2, MyCustomBlock2: MyCustomBlock1 (mutual recursion where 2 blocks refer to each other)
- Interaction with other components
- In the current design, when the custom command window is open, preview window gets blocked by it and won't be able to see the preview window
- Not only for viewing purpose, but would be better if users can pre-run their custom command before saving them, which means interaction with preview window is required
Technical notes:
- React Bootstrap includes an Overlay component
- - C2LC-21Getting issue details... STATUS
- I'd like to see if we can get rid of the programVer state variable from App.js and from our Editors. It was introduced to manage state in the ProgramTextEditor (https://github.com/codelearncreate/c2lc-coding-environment/blob/master/src/ProgramTextEditor.js) but it's going to be some hassle to keep it when we introduce a richer program model. Let's see if we can just store a reference to the program (will be commandSequence after C2LC-21 above) and test object reference equality instead of the version number.