So, we have discussed how we should implement blocks and how they should approximately look but not what type and the function of each. Yes I know, this already has been done in the forums but I have another Idea which in my opinion is easier and cleaner to implement.
So, I have to ideas for blocks:
First option
We have two main blocks, a container block and a text entry block.
The container block would be a c block with a drop down of all available tags, then a byob expandable list where another type of block would go into, this block would be an attribute block (more on this later). The colour of the C block should change according to what tag has been selected.
The next entry block would be a very simple block with a textbox inside. This is to allow text to be entered. for example, you could have a paragraph tag as the C block and then inside of that C block, you would have a multi-line text entry block.
The third type is like an operator block inside of scratch, but they would only fit inside of C tag blocks. They would have a drop down of all possible attributes and a textbox for the attribute value. We could implement a separate class block but this would complicate things.
On another tab somewhere in the editor we could have a create a block and create an attribute button. Similar to creating a variable in scratch. They new attribute or tag would become available in the drop down in the respected area.
This would look somthing like this:
---------------------------------------------
| [dropdown] ( [Attribtute]=' ') +|
| |-----------------------------------------
| |
| |
| |
| |-----------------------------------------
| Automagicly insert end tag here |
---------------------------------------------
Instead of having a drop down, you can have a tag block. This would fit into the first slot of the C block where the drop down would be. The tag blocks would then be sorted in the palettes. When we do this, you would need to choose which category a tag belongs to when creating it.
Using scratch blocks: https://scratch.mit.edu/discuss/topic/134554/?page=17#post-1242024
Second option
The other option would be to have one block per tag. and have the same attribute creation system. This would fill up the block selection thing much quicker though and it would be much simpler to just have a smaller (<div>) block instead of having
---------------------------------------------
| <div> |
| |-----------------------------------------
| |
| |
| |
| |-----------------------------------------
| </div> |
---------------------------------------------
for every single block.
As we are going to be saving the files as json anyways, Id also recommend custom blocks. These would allow users to create snippets they use often and use those as custom blocks instead of having to create the same part over and over again
I think I should get a reward for making these beautiful ascii art c blocks! :D
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent