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?
Technical notes:
- React Bootstrap includes an Overlay component
- Error rendering macro 'jira' : Unable to locate Jira server for this macro. It may be due to Application Link configuration.
- 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.