Custom toolbox label

[Max Stephen Russell]

In the early stage of building my app using Blockly's starter app, I have imported the custom toolbox codelab. 

https://blocklycodelabs.dev/codelabs/custom-toolbox/index.html?index=..%2F..index#0

At this point, I am able to color the custom label text, situated above the categories which are also behaving as expected, but the label font does not match the category font, and possibly some other styling is missing. The blue-highlighted comment below mentions "css-" prefixed attributes. But the toolbox definition does not allow me to use "css-label", and this is where I'm stuck, it seems. May I ask, what exactly is cssconfig, and where does "css-" come from, or is this even related to my problem?

toolbox.js

export const toolbox = {

  kind: 'categoryToolbox',

  contents: [

    {

      kind: 'toolboxlabel',

      name: 'Building Blocks',

      colour: 'darkslategrey',

      csslabel: 'customLabel',

    },

    {

      kind: 'category',

...

toolbox_label.js

export default class ToolboxLabel extends Blockly.ToolboxItem {

  /**

   * Constructor for a label in the toolbox.

...

  /**

   * Init method for the label.

   * @override

   */

  init() {

    // Create the label.

    this.label = document.createElement('label');

    // Set the name.

    this.label.textContent = this.toolboxItemDef_['name'];

    // Set the color.

    this.label.style.color = this.toolboxItemDef_['colour'];

    // Any attributes that begin with css- will get added to a cssconfig.

    const cssConfig = this.toolboxItemDef_['cssconfig'];

    // Add the class.

    if (cssConfig) {

      this.label.classList.add(cssConfig['label']);

    }

  }

...

Thank you,

-Steve

[Aaron Dodson]

Hi Steve,

The codelab is written assuming that your toolbox definition is using the old XML format; in that case, as noted under "Add some CSS", any attributes in a <toolboxlabel> XML element that start with css- will be automatically parsed out and loaded into the toolboxItemDef_ object that your ToolboxLabel class is referencing.

In your case, it appears that you're using the JSON format for your toolbox definition. In that case, you would want to do the following (changes in bold):

export const toolbox = {

  kind: 'categoryToolbox',

  contents: [

    {

      kind: 'toolboxlabel',

      name: 'Building Blocks',

      colour: 'darkslategrey',

      cssconfig: {

label: 'customLabel',

}

    },

    {

      kind: 'category',

...

This corresponds with the following code:

  const cssConfig = this.toolboxItemDef_['cssconfig'];

    // Add the class.

    if (cssConfig) {

      this.label.classList.add(cssConfig['label']);

    }

which accesses the `cssconfig` property of the toolboxItemDef_, and then accesses the `label` property of that object.

I hope that helps - feel free to let me know if you have further questions!

- Aaron

[Max Stephen Russell]

Aaron,

Thank you for the guidance and explanation. I really appreciate it. I knew the XML to JSON was questionable. However, this correction has had no visible effect on the label, i.e. the font. I wonder what I'm failing to see or include.

-Steve

[Aaron Dodson]

Hi Steve,

Sure thing, happy to help! With regard to it having no effect, just to confirm you've added some CSS targeting the `.customLabel` selector? And the toolbox item does in fact have that class in the web inspector?

- Aaron

[Max Stephen Russell]

Aaron,

I can now answer both questions with a Yes. I did not understand that I could target customLabel with css. Also I had thought I should somewhere discover the label's original styling in the imported codelab files. The codelab index.html has:

    <link

      rel="stylesheet"

      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

which I wasn't sure how to bring over into my modular starter app nor if it was contributing to the custom label.

So between xml to Javascript and script tags to imports, some of these constructions and relationships leave me puzzled, but I have the solution I need. Thank you many times over. This makes my day!

-Steve

[Max Stephen Russell]

I mean I do realize that stylesheet is from Font Awesome, but I found the codelab and the label to be confounding when it comes to fully comprehending the actions and results.

--
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 visit https://groups.google.com/d/msgid/blockly/25a6ef0c-05b4-40a5-a41e-0862b74a2374n%40googlegroups.com.

[Aaron Dodson]

Glad to hear you got it sorted out, and agreed that the codelab could likely stand to be improved; we're working on improving the documentation in general, and your feedback here is very useful!

- Aaron

[Max Stephen Russell]

Similar but different situation -- In the built-in dynamic VARIABLE category of my toolbox, what is the secret to inserting a label? This isn't working:

    {

      kind: 'category',

      name: 'Variables',

      categorystyle: 'variable_category',

      custom: 'VARIABLE',

      "contents": [

        {

          "kind": "label",

          "text": "Anything you want to measure",

          "web-class": "myLabelStyle",

        },

      ],

    },

Thanks.

-Steve

[Max Stephen Russell]

More importantly, I want to remove the math_change block. So now I'm getting farther afield from this conversation topic, and I suppose I should  figure out how to create a category that would allow my customization and retain the behavior of custom:VARIABLE. So please disregard the question above. Thanks. -Steve