Segment block internally with colors and/or grouping

[Matt Chana]

Hello All,

Has anyone found a way to segment the internal components of a block via the background color and/or another grouping method? So, very simply:

• Top section of the block has some labels and editable fields, has a color background
  
• Bottom section of the block also has some labels and editable field, has a different color background
  

What is a clever way and/or a standard way in Blockly to create logical groups of these components, internally to the block? I saw a screenshot of someone's Blockly project (now I can't find it) where they had two shades of grey, one light and one dark, and within each shade there were a grouping of labels and editable fields (dropdowns I believe).  It was nice because there was a clear separation between the two sections internal to the block.

Here is a code example of something that DOES NOT work, but illustrates what making of these sections could be like:

```

        Blockly.Blocks['block_type'] = {
            init: function () {
                this.appendDummyInput()
                    .appendField("Welcome to field 1:")
                    .appendField(new Blockly.FieldTextInput("Write here"), "NAME");
                    .setColour(120);
                this.appendDummyInput()
                    .appendField("Welcome to field 2:")
                    .appendField(new Blockly.FieldTextInput("Write here"), "NAME");
                    .setColour(230);
                this.setTooltip("");
                this.setHelpUrl("");
            }
        };
```

I've tried making a label with just a line in it to separate sections, but it's not very clean looking as compared to what simply applying different colors to dummy inputs would be like.

Thanks!

[Matt Chana]

Illustration:

[Beka Westberg]

Hello,

Sadly this is not possible in the unmodified version of Blockly :/ You may be able to get it working with a custom renderer but I'm not familiar enough with that system to be sure. Hopefully someone else here has more information for you :D

I hope that gives you some place to start!

--Beka

--
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 on the web visit https://groups.google.com/d/msgid/blockly/74412c06-487c-4354-8446-186bfa4683c3n%40googlegroups.com.

[Matt Chana]

Thanks Beka :) Yes, maybe someone else knows of a simple way to at least give the appearance of grouping of components within a block.

Also, I tried multiple times to comment on the other thread about wrapping field label text, but strangely each time my comment was automatically deleted by Google groups without any explanation. I was saying there that if you come out with revised documentation please feel free to let me know and I can review from the perspective of someone who is new to custom components.

Kind regards,
Matt

[Beka Westberg]

> I was saying there that if you come out with revised documentation please feel free to let me know and I can review from the perspective of someone who is new to custom components.

Awesome! I will definitely let you if/when I get to it. Or the dev team will put information about it in the quarterly release notes :D Getting someone new to look at docs is always super helpful, so I really appreciate you offering :D

> my comment was automatically deleted by Google groups without any explanation.

Yeah the google groups have auto-moderation to try to eliminate spam :/ It's caught me a time or two as well hehe. I think the core-team has the ability to review recent auto-mods to make sure you don't get caught again, but I'm not sure. If it keeps bugging you you can try posting a new thread (which usually works). Or you can shoot me a direct message and then I can try to ask someone to check =)

Best wishes,

--Beka

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/ee8ccf48-752c-419e-bd78-8295ad5645b5n%40googlegroups.com.

[feni...@google.com]

Hey Matt,

Your messages got flagged as spam and held up for inspection. I'm about to release them.

Cheers,

Rachel