Shadow Blocks Pt. 1: Fields vs Inputs vs Shadows + Inputs

Published 7/9/19

Back in the old timey times of Blockly, there were two ways to collect values: fields (which live directly on a block), and inputs (which allow blocks to be strung together).


Fields are good and necessary, but they’re basically magic constants. They can’t (or rather shouldn’t) hold arithmetic, or other complex logic. They simply hold a value, which isn’t very flexible.


Inputs are more advanced. They take in blocks with values rather than values directly. This allows the user to add variables in place of constants, or combine blocks to do more complex actions. Inputs are definitely more flexible than fields, but on their own they’re still not perfect.

  1. Empty inputs give the user no hints.
  2. Say you have a block that looks like the below:

    What’s supposed to go in the input? A number? An angle? A direction?
    What’s the default value? Does it even have a default value?

    There’s no way for the user to tell without trying to connect blocks.

  3. Empty inputs make extra work.
  4. Fields have the advantage that you can edit them directly, inputs have no such luxury. If the user does want to use a magic constant for an input they will have to grab a block from the toolbox before they can edit the value.

  5. Filled inputs also make extra work.
  6. You could solve for problem 2 by adding a default block in place of the input, a fine idea. But if the user wants to replace that block with more complex logic, they will have to delete it before they can edit anything.

Inputs + shadows

Luckily, here in modern times we have shadow blocks! They augment inputs so you can keep all of the flexibility, while getting rid of all the annoyingness.

Shadow blocks provide:

  1. Flexibility. Users can use actual blocks in place of shadows, just like normal inputs.
  2. Ease of use. Users no longer have to add or remove blocks.
  3. Information (Bonus!). The developer can use the shadow block to provide extra information.

When to use shadows

Now I may have argued for why shadows are more flexible than fields, and less annoying than vanilla inputs, but that doesn’t necessarily mean they’re the best solution. As was already discussed, shadows give the user a lot of freedom, but you don’t always want to give the user a lot of freedom. If you want to limit the options of a user, it’s probably better to just use a field.

For more discussion of this see Custom Blocks: Style Guide > User Inputs .


You may have noticed that points 1 & 2 of what shadow blocks provide were covered in depth, and that point 3 was covered not at all. In the next post we’ll start to discuss that, as well as how to actually create your shadow blocks!

Go to the next post: Shadow Blocks Pt 2