Blockly: Feature request: Support css classnames for <category> blocks

[MarkusBordihn]

Problem statement

Currently it is not possible to set individual css classnames for the different blocks which limits the current styling options.

Expected Behavior

It should be possible to pass the css class names like:

<category name="..." colour="120" class="some_css_class some_other_css_class">
  ...
</category>

Which should be translated to:

<div class="blocklyTreeRowItem some_css_class some_other_css_class" id=":w" role="treeitem" aria-selected="false" aria-level="1" aria-labelledby=":w.label">
 ...
</div>

Additional Information

I currently solving this by using an loop and adding css classnames dynamically over javascript.

[rachel-fenichel]

To be clear, you want this to be on the <category> elements in the toolbox, not on the SVG elements of specific blocks?

If so, I'm happy to accept a PR for this.

[MarkusBordihn]

Yes exactly, this allows category styling like (left side):

For styling SVG elements I currently using the Blockly.FieldImage(...).

Could you maybe point me to the relevant js files for this?

[rachel-fenichel]

Here's where a single category is being created in the toolbox: https://github.com/google/blockly/blob/develop/core/toolbox.js#L320

The Blockly toolbox extends the closure library toolbox. The relevant classes are TreeControl and TreeNode. They're defined in the closure library but extended in various ways in the second half of toolbox.js.

[picklesrus]

I'm not sure I agree that we should do this, but I'm also not sure I fully understand the proposl

Is the proposal that the xml would look something like
<cateogry name="category name" class = "aClass">?
and then the html would be:
<div class="aClass" id=":1" role="treeitem" aria-selected="false" aria-level="1" aria-labelledby=":1.label" aria-setsize="9" aria-posinset="1">....</div>

[LarryKlugerDS]

This idea would also be helpful to me. The overall idea is to provide labels and additional navigation aids for the toolbox at the topmost (category) level.

[rachel-fenichel]

@alschmiedt fyi

[alschmiedt]

This is still not a feature, however it might be worth considering when we take a look at redesigning the toolbox. @samelhusseini

[GAUTAMRAJU15]

@samelhusseini what do you think ?

[samelhusseini]

The request makes sense to me. In the same way category style is being added here. You can read the category's className attribute and set the tree node's class. The getRowClassName would need to be extended to include this additional class.

[beetaa]

Yes exactly, this allows category styling like (left side):

For styling SVG elements I currently using the Blockly.FieldImage(...).

Could you maybe point me to the relevant js files for this?

@MarkusBordihn It's nice for this feature. before blockly providing this feature itself, how you can acheive the customized UI like that? how is the detail way to use an loop and adding css classnames dynamically over javascript ?

Thank you.

[MarkusBordihn]

At https://github.com/google/coding-with-chrome/blob/master/src/ui/blockly/blockly_toolbox.js#L79 you can see how this implementation is done on my side.
Please keep in mind that I'm not using the latest version yet, so it could be you need to adjust this example to get it work.

[beetaa]

@MarkusBordihn got it! THANKS so much.

[alschmiedt]

You can now add a css class to a specific category.