AI-generated Key Takeaways
-
Inputs can be rendered either inline, with connectors inside the block and sharing rows with other inputs, or externally, with connectors on the outside edge and each input typically on its own row.
-
The rendering of inputs as inline or external can be controlled by an optional boolean setting in the block definition, specified in JSON or JavaScript.
-
When not explicitly defined, Blockly uses heuristics to automatically determine the best rendering mode, which can be beneficial for different language translations.
-
Inline inputs are generally preferred for blocks likely to have small inputs like numbers, and users can toggle this option.
Inputs can be rendered inline or externally. This controls whether the connectors for value inputs are rendered inside the block (inline) or on the outside edge (external), as well as whether inputs are rendered in the same or different rows.
The block definition can specify an optional boolean controlling whether inputs are inline or not.
JSON
{
// ...,
"inputsInline": true
}
JavaScript
init: function() {
// ...
this.setInputsInline(true);
}
When this boolean is set to true
(inline inputs):
- The connectors for value inputs are rendered inside the block.
- Statement inputs are rendered on their own row.
- Dummy, end-of-row, and value inputs are all rendered in the same row, except that any input following a statement or end-of-row input is rendered on a new row.
When it is set to false
(external inputs):
- The connectors for value inputs are rendered on the outside edge of the block.
- All inputs are rendered in their own row, except that an end-of-row input that follows a dummy input is rendered in the same row as the dummy input.
If you're having trouble visualizing this, construct blocks in the Blockly
Developer
Tools
and choose different settings for the inputs
dropdown (automatic
,
external
, inline
).
If this boolean is not defined then Blockly will use some heuristics to guess
which mode is
best. Assuming Blockly makes the right choice, leaving this field undefined
is preferable since different language translations can automatically have
different modes. See the example of "set %1 to %2"
(external inputs) and
"put %2 in %1"
(inline inputs) in Interpolation token
order.
Use inline inputs when a block is likely to have small inputs such as numbers. The user can toggle this option through the context menu.