Change textfield font size in blocks?

[Josefin Ulfenborg]

Hello!

Is it possible to change the font size for some textfields in a block? I currently have the block

Blockly.Blocks['function_block'] = {
  init: function() {
    this.appendDummyInput()
        .appendField("fun (");
    this.appendDummyInput()
        .appendField("inp1:");
    this.appendValueInput("input")
        .setCheck(null);
    this.appendDummyInput()
        .appendField(" )");
    this.setInputsInline(true);
    this.setOutput(true, null);
    this.setColour(210);
 this.setTooltip("");
 this.setHelpUrl("");
  }

and the idea is that, as in for instance Java, "inp1" is a hint as to what the function fun() takes as argument. However, I would like to alter this text field; change color or make it smaller compared to "fun( )". This as to not confuse the user by making them look as equals.

I've been looking into Blockly.Field but not sure if I'm even looking in the right place, or how to work with it if I am. Is there some easy way to change font size?

I hope my question is clear! 

[Josefin Ulfenborg]

I get the feeling I should be able to override something for FieldLabel but not sure how

[Zozman]

Josefin,

You can change the text fields by adding a class using the Blockly.FieldLabel constructor as opposed to just passing a string to appendField.  The constructor can take a second parameter that lets you assign a CSS class for text styling.  Try something like this:

Blockly.Blocks['function_block'] = {

  init: function() {

    this.appendDummyInput()

        .appendField(new Blockly.FieldLabel("fun (", "funClass1"));

    this.appendDummyInput()

        .appendField(new Blockly.FieldLabel("fun (", "funClass2"));

    this.appendValueInput("input")

        .setCheck(null);

    this.appendDummyInput()

        .appendField(new Blockly.FieldLabel("fun (", "funClass3");

    this.setInputsInline(true);

    this.setOutput(true, null);

    this.setColour(210);

    this.setTooltip("");

    this.setHelpUrl("");

  }

Then just use funClass1, funClass2, and funClass3 just like any other CSS class to style the text.

Hope that helps.

[Rachel Fenichel]

You can pass an optional CSS classname when defining the FieldLabel.  Check out the documentation: https://developers.google.com/blockly/guides/create-custom-blocks/define-blocks#label

Cheers,

Rachel

[Andrew n marshall]

It is also possible to use Blockly's JSON block definitions. The label just needs to be created via %1 and args, like all other field types:

{  "type": "block_type",  "message0": "%1",  "args0": [    {      "type": "field_label",      "text": "default",      "class": "style_me"    }  ] }

--
Andrew

--
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+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Harsh Chaturvedi]

Is there any way to do this via the XML definitions for the default blocks?

To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.