Override default field label color values for default blocks

[Harsh Chaturvedi]

Hi,

We are using a bunch of default blocks and custom blocks.

I'm able to override the label color for custom blocks using the this code as sample - 

I want to change the label color for the default fields (if, loops etc), from white to another color-

How can I go about achieving that?

Note - I'm using xml to create my toolbox and using themes for background color of blocks, haven't found anything that gives me control of labels of the default blocks.

Regards,

Harsh Chaturvedi

[Maribeth Bottorff]

Hello,

if you want to change all of the text on blocks to the same color you could use the default css selector: .geras-renderer.classic-theme .blocklyText (changed for the theme/renderer you're using)

but if you want each block type to have a different class applied unfortunately it's not very easy to modify the default blocks :/ You could just delete the original block definitions and use your own block definition that adds the classes as needed. The only way I can think of to modify them in place is really gross:

// This loops through all the registered blocks so if you only want it for the built in blocks, either do this before you register your custom blocks, or use a different loop with the hardcoded block names

Object.keys(Blockly.Blocks).forEach((blockId) => {

  const block = Blockly.Blocks[blockId];

  if (block.init) {

    const oldInit = block.init;

    block.init = function() {

      if (oldInit) oldInit.call(this);

      // create whatever class name you want, assuming you want a different one for each type of block

      const className = 'custom_' + blockId;

      // This adds a class to the whole block, you'd have to use the right css selector to grab .blocklyText that is a descendant of this class

      Blockly.utils.dom.addClass(this.getSvgRoot(), className);

    };

  }

});

Sadly it's just not very easy to change the default block definitions.

Maribeth