Inline vs. external inputs

  • 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.

Inline and external variations of the "count with x from value to value do statement" block. In the inline variation, the block has two rows: the top row has "count with x from value to value" and the bottom row has "do statement". The value inputs look like puzzle pieces cut out of the inside of the top row. In the external variation, the block has four rows: "count with x", "from value", "to value", and "do statement". The value inputs are at the ends of the second and third rows and look like female puzzle connectors.

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.