Exporting nested custom blocks

[Denis Jovic]

Hello all,

Does anyone know if is there a way to export several custom blocks that are already connected to each other and nested inside each other, similar to the example below, and share them between different files?

[Beka Westberg]

Hello =)

You can serialize the blocks using Blockly.serialization.workspaces.save, and add them to another workspace using Blockly.serialization.workspaces.load. Does that solve the use-case you're interested in?

I hope that helps! But if that's not what you're looking for, please definitely reply and we'll see if we can find a better solution =)

--Beka

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/5b7f8239-e65f-48c6-9c46-e6d2c82e3eb4n%40googlegroups.com.

[Denis Dev]

Hi Beka,

Thanks for the quick reply. I am gonna try your suggestion and see does it work for my use case. :)

In the meantime, I have actually found a chat you had here in the group with one of the members, he created a blockly plugin that does what I want, allows a block to be exported as an external file, and then imported again to another place. You might remember that, here is the demo he created: https://fustyles.github.io/webduino/SPduino_tool/index.html#
I would just need to figure out how to add that to my code. But now at least I have the direction I need to follow. Thank again.

Denis

[fu6...@gmail.com]

Hi  jovic

Here is my code. Hope this helps.
https://github.com/fustyles/BlocklyResearch/blob/main/ContextMenu/fuExportImportBlock/fuExportImportBlock.js

Best wishes.

fu6...

jovic.d...@gmail.com 在 2022年12月2日 星期五清晨6:16:55 [UTC+8] 的信中寫道：

[Maribeth Bottorff]

Hi,

We also have a backpack demo here: https://google.github.io/blockly-samples/examples/backpack-demo/

This uses the backpack plugin and events to create a shared backpack between two workspaces. You might find some inspiration in that code as well. Good luck!

Maribeth

[Denis Dev]

Thank you fustyles, you've done some amazing things with Blockly, your code was a lifesaver more than once :) Thank you too Maribeth, this demo look great, I am sure I will be able to come up with a solution from both of these examples.

[Psycho Buddha]

Hi,

Sorry for 'stealing' the thread, but it is kind of connected to the question being asked here. When copying block to the backpack, where is the data being stored? I tried to play around with it little bit, but I am using react-blockly, and can't figure out how to use it properly. I was able to initialize it by passing the backpack.init() to the onInject() function, as recommended in the react-blockly docs, and it kind of works, in way that I can copy block(s) to the backpack, but if I refresh the page, they are gone. Did I miss something or it is expected behavior? I am aware that you don't maintain react-blockly and it's a separate library, but I am curious if anyone used it like that.

[Maribeth Bottorff]

The data isn't being stored anywhere, which is why it's disappearing on refresh. That doesn't have anything to do with react-blockly.

It's not being stored because we have no way of doing that for your application; we don't know how you are storing the rest of your application's data. So you need to add that logic yourself.

One way to do this is to listen for events and when you get a backpack_change event, store the data yourself wherever you want. The shared backpack demo has an example of using the event: https://github.com/google/blockly-samples/blob/master/examples/backpack-demo/index.js#L34

Here is a quick example of using local storage to persist the backpack contents between sessions:

const storageKey = 'backpackContents';

const backpack = new Backpack(workspace);

backpack.init();

const saveBackpack = function(event) {

  // Update local storage if the backpack has changed.

  if (event.type !== 'backpack_change') return;

  const data = backpack.getContents();

  window.localStorage?.setItem(storageKey, JSON.stringify(data));

};

const loadBackpack = function() {

  const data = JSON.parse(window.localStorage?.getItem(storageKey));

  if (!data) return;

  backpack.setContents(data);

};

// Load initial contents

loadBackpack();

// Save contents whenever we get a backpack_change event.

workspace.addChangeListener(saveBackpack);

This is just an example using local storage to show how it would work with events. Local storage may or may not be the right solution for your application.

Hope that helps!

Maribeth

[Psycho Buddha]

Hi Maribeth, 

That makes sense actually. And your example wonderfully does the job. I will think a bit about what to use for storage, but that's the easy part. Thank you again!