Adding data-* attributes to Blockly elements

[Sorana Ciobanita]

Hello,

Is it possible to add some custom data-* attributes to the elements from Blockly, like the blocks and the flyout? I see that for the blocks there is a data-id that exists, but this will be changed every time the blocks are rendered and I need some kind of data in the DOM to be able to identify the elements in an unique way.

Thanks,

Sorana.

[Christopher Allen]

Hi Sorana,

Is it possible to add some custom data-* attributes to the elements from Blockly, like the blocks and the flyout? I see that for the blocks there is a data-id that exists, but this will be changed every time the blocks are rendered and I need some kind of data in the DOM to be able to identify the elements in an unique way.

The data-id attributes should contain the same value as the Block's id field, and this value should be stable across serialisation (save/load), undo/redo, mirroring, etc.  If you have found an example to the contrary then that's probably a bug and we'd appreciate it if you could file a bug report with a minimal reproduction.

Adding additional attributes to the SVG elements is likely to entail writing a custom renderer.

Can you tell us a little more about what you are trying to achieve?

Best wishes,

Christopher

[Sorana Ciobanita]

I need to create some kind of tutorial for the users that will use the Blockly workspace in our app for the first time, to show them the elements in the workspace and how to work with them. I need to use Reactour and for this I need some way to identify the elements with an unique attribute.

I will check the custom renderer method.

[Christopher Allen]

Hi Sorana,

 

I need to create some kind of tutorial for the users that will use the Blockly workspace in our app for the first time, to show them the elements in the workspace and how to work with them. I need to use Reactour and for this I need some way to identify the elements with an unique attribute.

Ah hah.  For that I would recommend that you simply specify the IDs of the blocks at block-creation time.

You can set the ID when you load the block from JSON:

{
  "type": "block_type",
  "id": "myBlockID",
}

or  XML:

<block type="block_type" id="myBlockID"></block>

Or when you call newBlock:

workspace.newBlock('block_type', 'myBlockID');

You should then be able to find the corresponding data-id in the generated SVG elements.

If for some reason you need to refer to a block whose ID you can't set in one of these ways (e.g. mutators), you could instead try to find the block you're interested in by calling the Workspace .getAllBlocks() method and searching the resulting array for the block of interest to look up it's randomly-assigned .id.

Best wishes,

Christopher