microsoft / pxt

Microsoft MakeCode (PXT - Programming eXperience Toolkit)
https://makecode.com
MIT License
2.1k stars 588 forks source link

Line break in blocks #10190

Open THEb0nny opened 2 months ago

THEb0nny commented 2 months ago

At some point I was making custom blocks and couldn't get the result I wanted.

Is it possible to make a block with a bunch of parameters, in which, for example, there will be 2 parameters on one line, 3 on the second, and 2 on the last, or something else. I tried it in playground and it turns out only one parameter per line.

image image

Then I had a thought that in makecode this is a bug and the symbol that should split/break to a new line does not work as in Google Blockly. Is it true that this is a bug?

A transfer that would be placed manually would allow for optimization of block sizes.

abchatra commented 1 month ago

@riknoll do you know the parameter to make it in single line?

riknoll commented 1 month ago

there isn't any way currently to achieve what you're trying to do. today we have three "modes":

//% inlineInputMode=inline
//% inlineInputMode=external
//% inlineInputMode=variable

"variable" is only used on blocks that have +/- buttons to show/hide additional inputs, and there are a couple of other properties you can use to customize that behavior: https://github.com/microsoft/pxt/blob/0d03cb7a8c7daf88e09b343e343217bc1a44b9b3/localtypings/pxtarget.d.ts#L926-L929

additionally, you can add extra line breaks when in "external" mode by using a single pipe like so:

//% inlineInputMode=external
//% block="this is one line|this is another line|this is a third line"

...but as you noted, there is no way to have two inputs on one line when using the external input mode (and i don't think blockly supports it).

we could, however, add support for putting more than one field on a line. that wouldn't help on a block that takes in a bunch of numbers (since those are inputs) but would potentially mean you could put something like two dropdowns on the same line

THEb0nny commented 1 month ago

@riknoll Such an opportunity is needed so that the block does not take up much space in width and in height on the screen of the working area. Now it works in such a way that either the block is very large in width, or the block is very high. And something between you can’t do.

You can find an example of what we are talking about, and this will be the best experience working with blocks.

Image

riknoll commented 1 month ago

@THEb0nny those are fields in your example image, not inputs.

There are two ways to enter data into blocks. Fields, which are UI elements you interact with (like dropdowns, text boxes, buttons, sliders, etc.) and inputs, which are places where you can slot other blocks. Fields can not have other blocks placed on top of them.

In MakeCode, we automatically create inputs for some parameter types and fields for others. When given the choice, we always use an input rather than a field because they are much more flexible. If we do need to use a field, we usually create a shadow block that only has one argument (the field) and attach that shadow block to the input on the parent block so that you can replace it with something like a variable if you so desire. The exception is dropdowns, which we sometimes put directly on the parent block when there is no real value in splitting them up.

Blockly supports having more than one field on a line, but not more than one input. I expect that this is mostly a holdover from the old default Blockly renderer which actually renders external inputs along the edge of the block (instead of stretching the block like the zelos renderer does).

Going back to your original example, all the numbers on those blocks are inputs, so there is no way to put more than one on a line. That being said, we could still make some improvements that let you customize where text shows up so that things look a little nicer alignment-wise