Inline vs. external inputs

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.