CSS - Padding / margin on the blocks

[Benjamin Nyaoro]

Hi Guys,

I am trying to implement blockly so that when a user sticks the two blocks it forms a complete image.

So I have been able to achieve what is in the attachments. The only problem or challenge I face is removing the space around the image in the block so that the result is a complete image without spaces between the blocks. So in this case I want to remove the red space between the two blocks.

Could someone assist me with this?

I have attached the toolbox, the custom blocks, and the browser result.

Thanks in advance for your help.

Best,

Ben

[Aaron Dodson]

Hi,

You might ultimately need to go down the road of a custom renderer, but that's unfortunately fairly involved. A couple simpler, albeit somewhat hacky, approaches might be to try to set the image as the fill color of the block's SVG, or to adjust the Y_PADDING constant in FieldImage. The latter can be manipulated into aligning the image with the bottom of the block by making it negative, but there's still some padding at the top, and that's generally a bit janky and may cause issues elsewhere.

Hopefully that helps some - if you have further questions about one of those approaches or another idea feel free to let me know!

- Aaron

[Juan Jose Mora Sanchez]

HI @benjamin, I'm trying to make the same thing as you asked. Did you find a way to do it?

I've tried the custom renderer and I tried the Custom Renderer Codelab  but I don't find the value that changes the top and bottom padding on the block on the file constants.ts. Someone could help me with this?

And I don't know how to use the Y_PADDING constant that Aaron said. 

Thanks!

[Christopher Allen]

Hi Juan,

I've tried the custom renderer and I tried the Custom Renderer Codelab  but I don't find the value that changes the top and bottom padding on the block on the file constants.ts. Someone could help me with this?

I've been looking at this, and discussed it with one of my colleagues on the Blockly team, and we're not exactly sure the best way to achieve the effect Benjamin wanted, with blocks with image fields that go right to the top/bottom edge.  We do have some thoughts which we hope will be useful to you, however:

• First, if you haven't yet done so, you should try playing around with the debug renderer.  You can try it by going to the advanced playground, then clicking on ⏵ Debug, then click the box to enable debugEnabled, then click on the various Debug Options to see the different parts of the block.
• You can apply the debug renderer to your own custom renderer by installing the @blockly/dev-tools package and then following the instructions here.
• Note in particular that the block consists of a number of rows: a top row, one or more rows each containing one or more inputs, and a bottom row.  Within each row, the elements are spaced horizontally with element spacers, and the rows are spaced vertically with row spacers.
• We think that the desired effect is most likely to be achieved by creating a subclass of FieldImageInput that misreports its own size (using the .size_ property) as being smaller than the actual image; some changes might additionally be required to the whole image is actually displayed.
• Another possible approach might be to alter the height of (or entirely remove) the first and last rows of the block.

Sorry we don't have a straight-forward answer; this isn't something Blockly was designed to do (though it is probably something Blockly can do); you'll have to do some experiments to see what works.

Finally: the renderers are complex, hairy, and not well documented; we can't do much about the former two, but we are definitely working on the latter: there should be some better documentation for them soon.

 

And I don't know how to use the Y_PADDING constant that Aaron said.

I believe Aaron was referring to a property on class FieldImage declared as private static readonly Y_PADDING.  Needless to say that modifying private readonly properties is not an officially supported (let alone endorsed) way to modify Blockly, which is why it's not documented, and code modifying it will almost certainly break unexpectedly and without warning in some future version of Blockly.  The better way to do this is to subclass FieldImageInput and override how it computes .size_—but for the purposes of experimenting with what happens when you change the reported size of an image field, doing a quick Blockly.FieldImage.Y_PADDING = /* some negative value */  will let you see the effect of having the field claim to be smaller than the actual image.

Best wishes,

Christopher