Vertical alignement

[Fabien Rohrer]

Hi all,

Some fields takes more vertical space than others, such as a dropdown field when itis filled with images. It seems that the vertical alignement of a custom block is set to "top" by default.

To illustrate this, when I add an image dropdown, I get this rendering:

---

The result is a bit weird, and would be significantly better if the vertical alignement was set to "middle", but I cannot figure out how to do this. Expected behavior:

Is there a simple way to set the vertical alignment?

---

1. I found the music game in the Blockly games in which the same issue seems to be solved. But I can't find the source code.
2. I also found this article, but it seems completely overkilled.

---

Thank you in advance,

[Christopher Allen]

Hi Fabien,

I don't know much about how rendering works, so hopefully one of my colleagues who is more familiar with this part of the codebase will jump in to answer the rest of your questions, but I can help you with this:

1. I found the music game in the Blockly games in which the same issue seems to be solved. But I can't find the source code.

The source code for the music game is here.

Christopher

[Fabien Rohrer]

Thank you, I also finally found the music game source code yesterday, but once again, I cannot figure out what works here, and not in my project.

I don't find any reference to an alignement setting anywhere.

Ok, I wait on your colleagues feedback.

Sincerely,

[Maribeth Bottorff]

Hello,

The short answer is to use the Thrasos renderer, which might behave the way you want but looks slightly different. You can play with it here, this plugin has some tall dropdowns and you can change the renderer in the options on the right. Compare between thrasos and geras (geras is the default). https://google.github.io/blockly-samples/plugins/field-grid-dropdown/test/#renderer=thrasos&toolbox=test%20blocks&debugEnabled=false

The medium answer is that no, there is not a simple way to set the vertical alignment within a row on a block while using the geras renderer. You would need to create a custom renderer.

The long answer with more details:

First, Blockly Games isn't doing anything special. In your screenshot, it only looks like it's center aligned because that particular block has an inline input block. Compare to the "rest" block:

 

where you can see the text is not centered.

Second, this has been a long standing feature request in Blockly: https://github.com/google/blockly/issues/333

There is actually a lot to think about here when you ask about centering the text. What should be centered? Should all of the external, inline, and statement inputs be centered? If so you need to handle each of those cases. So Beka's blog post you linked is a great place to read about this if you did want to create a custom renderer.

If we dig into the rendering code, we can compare the geras getElemCenterline method against the thrasos one. In thrasos, for the default field case (where the element is a field, and the row doesn't have any spacers or inline inputs or statement inputs or anything) we use row.height/2 for the centerline, while in geras we use elem.height/2 for the centerline, where elem in this case is the text itself. So that leads to the text being centered in thrasos and not in geras. So one option if you don't want to use the thrasos renderer would be to create a new renderer based off geras that changes this `getElemCenterline` method to look more like the thrasos version, but you would definitely want to do some testing to make sure that looks good in every case, and again Beka's blog post is probably a great place to check for cases you'd need to cover.

This is a complicated topic as you can see, but I hope this information makes sense and helps you out.

Maribeth