/
Custom Blocks
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.
Acceptance:
Dependencies:
, multiple selections available,
Related content
Community Workshop and Design Crit Topics from 2024
Community Workshop and Design Crit Topics from 2024
More like this
Inverted Word Clouds Architecture
Inverted Word Clouds Architecture
More like this
Community Workshop and Design Crit Topics from 2020
Community Workshop and Design Crit Topics from 2020
More like this
Community workshops and design crits
Community workshops and design crits
More like this
Community Workshop and Design Crit Topics from 2015
Community Workshop and Design Crit Topics from 2015
More like this
Co-design activities repository
Co-design activities repository
More like this