search

blockpy-edu / BlockMirror

An interface for dual block/text representation with Blockly
Apache License 2.0
78 stars 30 forks source link

Adding Blocks #21

Open JoshuaLowe1002 opened 4 years ago

JoshuaLowe1002 commented 4 years ago

Hi @acbart

Great work on this, super useful tool.

I was wondering if there was any docs on how to add a simple block into BlockMirror and show in the toolbox? That would be super handy.

Josh

JoshuaLowe1002 commented 4 years ago

Hey @acbart, not sure if you've seen this (understand you're super busy) but wanted to reach out to check if you could point me in the right direction! :)

acbart commented 4 years ago

Hi @JoshuaLowe1002, sorry for the delay. Things are indeed super busy, and I don't have any docs. However, this is actually pretty easy to do in BlockMirror just by editing the toolbars: https://github.com/blockpy-edu/BlockMirror/blob/master/src/toolbars.js#L66

This is an object mapping toolbox names to their list of categories (and string literals).

Each category is an object with name, colour, and blocks list.

The blocks is actually just a list of strings, where each string is a valid chunk of Python code that will be translated to the block representation.

Instead of a category, you can also provide a string literal instead that will be embedded directly. Examples are here for a horizontal separator bar and a special expressions block category: https://github.com/blockpy-edu/BlockMirror/blob/master/src/toolbars.js#L270-L272

Then to actually use a different toolbox, you can pass in toolbox as a field to the BlockMirror constructor: https://github.com/blockpy-edu/BlockMirror/blob/master/src/block_mirror.js#L89

And in fact, I apparently also coded it so that you can create custom toolboxes without ever needing to modify the source code. Instead of passing in the name of a predefined name of a toolbox to the toolbox configuration parameter, you can instead pass in desired list of categories... I think. That last feature I didn't spend much time on, I believe, but I think all the code is there?

If you give it a try and it's successful, feel free to PR some documentation for all of this ;)

JoshuaLowe1002 commented 4 years ago

Awesome thank you @acbart ! Managed to get some blocks added which is great.

One other quick question. Is there an extra step so that the block is detected when doing python to blocks translation? That doesn't seem to be working for me right now :)

acbart commented 4 years ago

I'm not sure I know what you mean - the text side is not generating blocks automatically when you edit the text side?