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] 的信中寫道：

[fu6...@gmail.com]

Hi,

  I successfully solved the programming problem.  

Blockly.Blocks['test'] = {
  init: function() {
    this.appendDummyInput()
.appendField(new FieldZelosLabelBackground('Taiwan', null, {
textColor: '#FFFFFF',
backgroundColor: '#FD6723',
shapeType: 0
}));
    this.appendDummyInput()
.appendField(new FieldZelosLabelBackground('Hello', null, {
textColor: '#FFFFFF',
backgroundColor: '#CC9900',
shapeType: 1
}));
    this.appendDummyInput()
.appendField(new FieldZelosLabelBackground('World', null, {
textColor: '#FFFFFF',
backgroundColor: '#59C059',
shapeType: 2
}));
    this.setInputsInline(true);  
    this.setPreviousStatement(0);
    this.setNextStatement(!0);
    this.setStyle('control_blocks');
  }
};

class FieldZelosLabelBackground extends Blockly.FieldLabelSerializable {
    static KEY_ = 'field_zelos_label_background';

    static SHAPE_TYPES = {
        SQUARE: 0,
        OVAL: 1,
        HEXAGON: 2
    };

static getRoundRectPath(x, y, width, height, radius) {
return `M ${x + radius},${y}
h ${width - 2 * radius}
a ${radius},${radius} 0 0 1 ${radius},${radius}
v ${height - 2 * radius}
a ${radius},${radius} 0 0 1 -${radius},${radius}
h -${width - 2 * radius}
a ${radius},${radius} 0 0 1 -${radius},-${radius}
v -${height - 2 * radius}
a ${radius},${radius} 0 0 1 ${radius},-${radius}
z`;
}

static getHexagonPath(width, height) {
const slant = height / 2;

const x = 0;
const y = 0;

const path = [
`M ${x + slant},${y}`,
`l ${width},0`,
`l ${slant},${height / 2}`,
`l -${slant},${height / 2}`,
`l -${width},0`,
`l -${slant},-${height / 2}`,
];

return path.join(' ');
}


    constructor(value, opt_class, opt_config) {
        super(value || '  ', null, opt_config);

opt_config = opt_config || {};

this.textColor_ = opt_config.textColor || '#FFFFFF';
this.backgroundColor_ = opt_config.backgroundColor || '#FD6723';
this.backgroundStyle_ = opt_config.shapeType || 0;

    }

    initView() {
        super.initView();
       
        if (this.fieldBorderRect_) {
            this.fieldBorderRect_.remove();
        }

        this.fieldBorderRect_ = Blockly.utils.dom.createSvgElement(
            Blockly.utils.Svg.PATH,
            {

                'class': 'blocklyFieldRect blocklyFieldZelosOvalPath',
                'fill': '#FFFFFF',
                'stroke': '#FFFFFF'
            },
            this.fieldGroup_
        );
       
        this.fieldGroup_.insertBefore(this.fieldBorderRect_, this.textElement_);
        this.textElement_.style.fill = this.textColor_;
        this.applyColour();
    }

    applyColour() {
        if (!this.fieldBorderRect_) {
            return;
        }

        this.fieldBorderRect_.setAttribute('fill', this.backgroundColor_);
        this.fieldBorderRect_.setAttribute('stroke', this.backgroundColor_);

        if (this.textElement_) {
             this.textElement_.style.fill = this.textColor_;
        }
    }
   
    showEditor_() {
     
    }

    updateSize_() {
        super.updateSize_();

        if (!this.fieldBorderRect_ || !this.sourceBlock_ || !this.sourceBlock_.workspace.getRenderer()) {
            return;
        }

        const renderer = this.sourceBlock_.workspace.getRenderer();
        const constants = renderer.getConstants ? renderer.getConstants() : renderer.constants_;

const textWidth = this.textElement_.getComputedTextLength();
let fieldHeight = 30;
let cornerRadius = 0;
let finalWidth = textWidth;
let gRectPath = "";
let paddingLeft = 0;

if (this.backgroundStyle_==0) { // Square
cornerRadius = fieldHeight / 6;
finalWidth = textWidth + cornerRadius*2;
gRectPath = FieldZelosLabelBackground.getRoundRectPath(
0, 0,
finalWidth,
fieldHeight,
cornerRadius
);
paddingLeft = 5;
} else if (this.backgroundStyle_==1) { // Oval
cornerRadius = fieldHeight / 2;
finalWidth = textWidth + cornerRadius*2;
gRectPath = FieldZelosLabelBackground.getRoundRectPath(
0, 0,
finalWidth,
fieldHeight,
cornerRadius
);
paddingLeft = 14;
} else if (this.backgroundStyle_==2) { // Hexagon
finalWidth = textWidth + fieldHeight;
gRectPath = FieldZelosLabelBackground.getHexagonPath(textWidth, fieldHeight);
paddingLeft = 14;
}
this.fieldBorderRect_.setAttribute('d', gRectPath);

this.size_.width = finalWidth;
       
        const translateX = 0;
        const translateY = -4;
       
        this.fieldBorderRect_.setAttribute('transform', `translate(${translateX}, ${translateY})`);

        this.textElement_.setAttribute('x', paddingLeft);
       
        this.applyColour();

    }
}

Blockly.FieldZelosLabelBackground = FieldZelosLabelBackground;

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

fu6...

fu6...@gmail.com 在 2025年10月15日 星期三下午4:05:01 [UTC+8] 的信中寫道：

H i,

I have successfully created a new field inheriting from FieldLabelSerializable to display an oval background with text, and this field allows for custom background and text colors. If there are any best practices or correct implementation details for this code, please feel free to guide me. The next step is to extend this program to create a field where the background shape can be configured as an oval, a diamond, or a rectangle.

blocks.js

Blockly.Blocks['test'] = {
  init: function() {
    this.appendDummyInput()
        .appendField(new FieldZelosOvalBackground('Taiwan', '#FFFFFF', '#FD6723', null));
    this.appendDummyInput()
        .appendField(new FieldZelosOvalBackground('Hello', '#FFFFFF', '#CC9900', null));
    this.appendDummyInput()
        .appendField(new FieldZelosOvalBackground('World', '#FFFFFF', '#59C059', null));
    this.setPreviousStatement(0);
    this.setNextStatement(!0);
    this.setStyle('control_blocks');
  }
};



Blocklycompressed.js

class FieldZelosOvalBackground extends Blockly.FieldLabelSerializable {
    static KEY_ = 'field_zelos_oval_bg';

static getRoundRectPath(x, y, width, height, radius) {
return `M ${x + radius},${y}
h ${width - 2 * radius}
a ${radius},${radius} 0 0 1 ${radius},${radius}
v ${height - 2 * radius}
a ${radius},${radius} 0 0 1 -${radius},${radius}
h -${width - 2 * radius}
a ${radius},${radius} 0 0 1 -${radius},-${radius}
v -${height - 2 * radius}
a ${radius},${radius} 0 0 1 ${radius},-${radius}
z`;
}

    constructor(value, text_color, background_color, opt_config) {
        super(value || '  ', opt_config);
        this.textColor_ = text_color || '#FFFFFF';
        this.backgroundColor_ = background_color || '#FD6723';

    }

    initView() {
        super.initView();
       
        if (this.fieldBorderRect_) {
            this.fieldBorderRect_.remove();
        }

        this.fieldBorderRect_ = Blockly.utils.dom.createSvgElement(
            Blockly.utils.Svg.PATH,
            {

                'class': 'blocklyFieldRect blocklyFieldZelosOvalPath',
                'fill': '#FFFFFF',
                'stroke': '#FFFFFF'
            },
            this.fieldGroup_
        );
       
        this.fieldGroup_.insertBefore(this.fieldBorderRect_, this.textElement_);
        this.textElement_.style.fill = this.textColor_;
        this.applyColour();
    }

    applyColour() {
        if (!this.fieldBorderRect_) {
            return;
        }

        this.fieldBorderRect_.setAttribute('fill', this.backgroundColor_);
        this.fieldBorderRect_.setAttribute('stroke', this.backgroundColor_);

        if (this.textElement_) {
             this.textElement_.style.fill = this.textColor_;
        }
    }
   
    showEditor_() {
     
    }

    updateSize_() {
        super.updateSize_();

        if (!this.fieldBorderRect_ || !this.sourceBlock_ || !this.sourceBlock_.workspace.getRenderer()) {
            return;
        }

        const renderer = this.sourceBlock_.workspace.getRenderer();
        const constants = renderer.getConstants ? renderer.getConstants() : renderer.constants_;

        let fieldHeight = 30;
const cornerRadius = fieldHeight / 2;

const textWidth = this.textElement_.getComputedTextLength();
       
        const totalWidth = textWidth + cornerRadius*2;

        this.size_.width = totalWidth;
       
        const d = FieldZelosOvalBackground.getRoundRectPath(
            0, 0,
            totalWidth,
            fieldHeight,
            cornerRadius
        );

        this.fieldBorderRect_.setAttribute('d', d);
       
        const translateX = 0;
        const translateY = -4;
       
        this.fieldBorderRect_.setAttribute('transform', `translate(${translateX}, ${translateY})`);

let textPadding = 14;
        this.textElement_.setAttribute('x', textPadding);
       
        this.applyColour();
    }
}

Blockly.FieldZelosOvalBackground = FieldZelosOvalBackground;

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

fu6...

fu6...@gmail.com 在 2025年10月14日 星期二上午10:38:04 [UTC+8] 的信中寫道：

[Max Stephen Russell]

If I ever deal with this particular issue, I will come back to your post. It looks perfect in every way. It’s elegant, it’s organized, it’s intelligent, it’s . . . what I would hope to find, even if it had an error in it. 😎

-Steve Russell

--
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/ba7938c6-6cff-4c80-887a-311d091995fcn%40googlegroups.com.

[fu6...@gmail.com]

Hey everyone!

I'm sharing my new custom field for Blockly v10.0.0 and the Zelos Renderer: a diamond-shaped background! Feel free to use. If you are using a Blockly version other than v10, please be aware that some code adjustments or value corrections may be necessary to ensure the field runs and displays correctly in your environment. Future updates will be posted here.



fu6...

maxsr...@gmail.com 在 2025年10月15日 星期三晚上9:10:33 [UTC+8] 的信中寫道：

[fu6...@gmail.com]

Hi,

Hello everyone,

I'm pleased to announce the successful completion of the custom variable type implementation, which mimics the design of Scratch's "My Blocks" (Procedures).

This project required modifying the core Blockly logic because, in version v10.0.0, the default value for newly created variable types is an empty string (''). Furthermore, the crucial type attribute was not being fully implemented across the mutationToDom/domToMutation methods and the XML mutation argument structure, which caused issues with loading order.

With the crucial assistance of Gemini, I have finalized the necessary core program enhancements to resolve these serialization and synchronization conflicts.

Please feel free to check out the results!

The operation for adding new functions is shown in the video, and I will also attempt to enable the default Mutator feature of procedures_defnoreturn in the future for content modification.


fu6...

fu6...@gmail.com 在 2025年10月16日 星期四晚上7:17:38 [UTC+8] 的信中寫道：

[Seb Seb]

That's great! Wonderful job, as usual.

Thanks a lot.

[fu6...@gmail.com]

Hi all,

I'm excited to share a new custom field I've implemented: FieldZelosInputBackground. It extends Blockly.FieldTextInput.

This field allows you to set a unique background shape and color for the input area, which is visible when the field is static (i.e., before it gains focus/is clicked).

You can find the sample code for FieldZelosInputBackground here.

fu6...

prt...@gmail.com 在 2025年10月17日 星期五下午5:52:38 [UTC+8] 的信中寫道：

[fu6...@gmail.com]

I have successfully completed the modification of the procedure blocks to be consistent with Scratch's design. This is a cause for celebration!

  

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

[Max Stephen Russell]

It LOOKS like a celebration. You do great work.

To view this discussion visit https://groups.google.com/d/msgid/blockly/7e3cbd2e-7171-4f6b-8e00-d87b11b922b7n%40googlegroups.com.

[fu6...@gmail.com]

Hi, 

My implementation of a custom block field now enables a Scratch-like workflow: users can click and drag directly from the field on a function block to create and start dragging a variable getter block. The new block is instantiated and immediately enters the drag state for seamless placement.

This is a link to my code sample. (Blockly v10)

fu6...@gmail.com 在 2025年10月21日 星期二晚上9:07:04 [UTC+8] 的信中寫道：

I have successfully mimicked a Scratch functionality where a double-click on a function block's variable field (a FieldLabel) dynamically spawns a variable getter block at the precise cursor location. I have not yet managed to implement the variable block creation using Scratch's signature drag-and-drop mechanism. Please refer to the video demonstration.

maxsr...@gmail.com 在 2025年10月20日 星期一下午5:44:27 [UTC+8] 的信中寫道：

[fu6...@gmail.com]

Hello everyone,

I currently have one final issue left to solve in our Scratch-Like block development project, and despite many attempts, I haven't been able to pinpoint the key to the solution. I am reaching out to the community for guidance.

The problem, as demonstrated in the attached video, is as follows:

When I move a block near an input connection point where it should snap, I execute the highlight() command. This command is intended to display the yellow highlighted outline (or connection preview) around the target connection area. However, it only renders a small yellow dot and simultaneously throws an error message.

I would greatly appreciate any insights or guidance to resolve this as soon as possible. Thank you in advance for your help.    The link below is my code.  

Error Message

m 0,-5  v 5 pathDown(d){return a(d,!1,!1)} v 5 



fu6...

fu6...@gmail.com 在 2025年10月22日 星期三凌晨12:36:32 [UTC+8] 的信中寫道：

[fu6...@gmail.com]

Hello everyone,

I have successfully modified the code to resolve the issue where the highlight feature failed to appear when approaching the oval-shaped input field.
However, I am now facing a new problem: when moving a Boolean block, the targetConnection property unexpectedly returns null, thus preventing the highlight() function from executing correctly.

fu6....

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

[fu6...@gmail.com]

Hi,

I have implemented a custom highlightPath logic to temporarily resolve the issue of the connection highlight failing to render when an input field lacks a Shadow block or an targetConnection. Here is the code I am using.

However, a significant and persistent issue remains: the workspace frequently experiences an unexpected rightward drift during user interaction. This behavior is clearly demonstrated in the accompanying video file.


fu6...

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

[fu6...@gmail.com]

Hi,

I am pleased to announce the successful integration of the Continuous Toolbox extension into my custom Scratch-like programming environment, as showcased in the attached video. I welcome any feedback regarding functionality or technical inquiries for collaborative discussion and refinement.

Best wishes

fu6...

fu6...@gmail.com 在 2025年10月26日 星期日下午3:44:34 [UTC+8] 的信中寫道：

[Max Stephen Russell]

I’d like to know (1) why you use icons in your categories, and (2) how you do it. I removed all my Unicode symbols and tried to replace them with SVGs — to the left of the category text just as you have done, but I failed.

You’ve got a lot going on there in your video. I’ll have to study it more.

Thanks!

-Steve Russell

To view this discussion visit https://groups.google.com/d/msgid/blockly/25384d22-e85b-4796-b59f-f1f7429c5090n%40googlegroups.com.

[fu6...@gmail.com]

Hi Steve,

Thank you for your acknowledgement of my project implementation. Regarding the use of icons within the toolbox, this was achieved by modifying the Continuous Toolbox plugin source code. I have prepared another, more concise example for your reference, specifically detailing the CSS configurations and the integration of icon assets for the toolbox. You can consult this example for the specific implementation details.


Best wishes

fu6...

maxsr...@gmail.com 在 2025年11月5日 星期三晚上9:44:33 [UTC+8] 的信中寫道：

[Max Stephen Russell]

Thank you, fu6..., but this looks like the custom toolbox codelab, which I use for custom labels in the toolbox. I do not see where a category icon is sitting next to (left of) the category text. Could you point to something specific?

-Steve 

[Maribeth Moffatt]

Hey Steve, you should be able to get the icons to left using css. If you want to start a new thread and post your current css and toolbox category code we can help you out.

Maribeth

[Max Stephen Russell]

Thanks, Maribeth. I will gladly start a new thread soon.  -Steve

To view this discussion visit https://groups.google.com/d/msgid/blockly/7c7cddc1-35a3-4e0d-bfde-99a84587c13an%40googlegroups.com.

[fu6...@gmail.com]

Dear Community,

I am facing an issue with a custom dynamic Flyout category in my Scratch-like platform.

The problem, as shown in the attached video file, occurs when a Procedure Definition block is deleted from the workspace, the dynamic Flyout still incorrectly displays its corresponding Call and Variable blocks upon reopening.

I have confirmed that the flyoutCategory function correctly generates an array of blocks (console.log(blocks) is correct), showing only current procedures. The issue appears during the Flyout's visual rendering, which seems to display stale data related to the deleted function.

Any help with this data inconsistency/caching issue in dynamic Flyouts is greatly appreciated.

Thank you for your time and help.

fu6...