How to create a FieldLabelSerializable Field with a custom border and background color?

[fu6...@gmail.com]

Hello everyone,

I am currently working on replicating Scratch-style blocks using Blockly. In Scratch blocks, there are FieldLabelSerializable Fields with different backgrounds. How should I approach this programmatically?

I have already asked Gemini to generate some preliminary code, but the actual operation does not produce the correct visual output. I would be grateful for everyone's help to complete this project as soon as possible.

block.appendDummyInput()
    .appendField(new FieldLabelHexagon("AAA");

```
class FieldLabelHexagon extends Blockly.FieldLabelSerializable {
    static KEY_ = 'field_label_hexagon';
    constructor(opt_value, opt_class, opt_config) {
        super(opt_value, opt_class, opt_config);
        this.SERIALIZABLE = true;
        this.borderRectPadding_ = {
            top: 0,
            right: 12,
            bottom: 0,
            left: 12  
        };
    }

    initView() {
        super.initView();

        if (this.fieldBorderRect_) {
            this.fieldBorderRect_.remove();
        }
        this.fieldBorderRect_ = Blockly.utils.dom.createSvgElement(
            Blockly.utils.Svg.PATH,
            {
                'fill': this.sourceBlock_ ? this.sourceBlock_.getColour() : '#999999',
                'stroke': this.sourceBlock_ ? this.sourceBlock_.getColour() : '#999999',
                'class': 'blocklyFieldRect blocklyFieldLabelHexagonPath'
            },
            this.fieldGroup_
        );

        this.textElement_.style.fill = 'black';
    }

    updateSize_() {
        super.updateSize_();

        if (!this.fieldBorderRect_) {
            return;
        }

        const width = this.size_.width;
        const height = this.size_.height;
       
        const h = 10;

        const path =
            `M 0 ${height / 2} ` +
            `L ${h} 0 ` +
            `L ${width - h} 0 ` +
            `L ${width} ${height / 2} ` +
            `L ${width - h} ${height} ` +
            `L ${h} ${height} ` +
            `Z`;                  

        this.fieldBorderRect_.setAttribute('d', path);
    }
}

Blockly.FieldLabelHexagon = FieldLabelHexagon;

Blockly.registry.register(
    Blockly.registry.Type.FIELD,
    FieldLabelHexagon.KEY_,
    FieldLabelHexagon
);

``` 

Thank you all for your assistance.

fu6...  

[fu6...@gmail.com]

Hi,

I'm about to complete my project. Its main function is to provide Scratch-style blocks for students to practice with. I only have one remaining issue, which is the background style for the block palette/category area. This is the block platform I'm currently developing; please feel free to test it and provide any feedback. Thank you!

My Project

Best wishes

fu6...

fu6...@gmail.com 在 2025年10月11日 星期六晚上8:20:47 [UTC+8] 的信中寫道：

[fu6...@gmail.com]

Hi,

During the development process, I discovered an abnormal output in a Blocky or Scratch block that caused concern.

For example, the 'math_arithmetic' block when executing 1+′a′ should output NaN. However, Scratch outputs 1, while Blockly outputs '1a'. This inconsistency and non-standard behavior could lead to students developing incorrect learning/understanding.

If it produced NaN, the Scratch program should ideally be stopped, rather than outputting 1 to allow Scratch to continue executing erroneously. This potentially leads to students forming poor programming habits or being unable to find errors, which is a detrimental outcome.

fu6...

fu6...@gmail.com 在 2025年10月12日 星期日晚上8:01:28 [UTC+8] 的信中寫道：