Skip to main content

Visual glossary

Blockly has a lot of vocabulary for its different visual components. This document breaks down some of the most important ones you need to know to get started with Blockly.

Workspace​

The workspace is the highest level component in Blockly. It contains all of the other components. This is where you do the work of programming!

A workspace with a category toolbox, scroll bars, trashcan, and zoom controls.

Toolbox​

The toolbox contains the blocks that you use to program. The blocks can be dragged onto the workspace.

There are two main types of toolboxes, flyout toolboxes and category toolboxes. These can both be displayed vertically and horizontally.

Flyout toolbox​

Flyout toolboxes (aka simple toolboxes) have one set of blocks which is displayed at all times.

A workspace with a flyout toolbox containing four blocks.

Category toolbox​

Category toolboxes have multiple sets of blocks.

A workspace with a category toolbox with eight categories (Logic, Loops, Math, etc.). No blocks are visible because no categories have been opened.

If you click a category item it opens a flyout that displays the blocks in the category.

The same workspace and category toolbox as in the previous image, except that the Logic category is open, showing seven logic blocks (if-do, comparison, and-or, etc.).

Trashcan​

The trashcan lets you delete blocks by dragging and dropping them. You can also click the trashcan to open a flyout containing the blocks you've deleted so you can get them back.

A workspace with a trashcan in the lower right corner.

Zoom controls​

The zoom controls zoom the workspace in and out when you click them.

A workspace with zoom controls above the trashcan.

Context menu​

The context menu appears when you right-click or long-press on certain elements of the workspace (for example, the workspace background, or blocks). It displays a list of actions you can perform on that element.

A context menu is open over an if-do block. The menu has the items, "Duplicate", "Add Comments", "Inline Inputs", "Collapse Block", "Disable Block", "Delete Block", and "Help".

Blocks​

Blocks are what you use to program. They represent expressions and statements in text-based programming languages.

An if-do block, a number block, and a block for creating a list.

Block stack​

A block stack is any collection of connected blocks. They could be connected horizontally or vertically.

An if-do block with two blocks connected to it. A numeric comparison block is connected to the if input and a repeat block is connected to the do input.

Shadow block​

A shadow block is an editable but non-movable block connected to another block. You can drag non-shadow blocks on top of shadow blocks to overwrite them.

A block for rounding numbers connected to a shadow number block, and a print block connected to a shadow text block. The shadow blocks are greyed out to show that they are default blocks and that you can drag other blocks on top of them.

Insertion marker​

An insertion marker is a preview of where a stack of blocks will be connected if it is dropped. It looks like a grey version of a block.

An if-do block with a marker showing where another block will be inserted.

Block parts​

Blocks have several different parts that you can edit and interact with to program.

Fields​

A field is a visual element that lives on a block. It could be editable (like a text input), or only informational (like a label). A field is always contained by an input.

A block with three fields: the label "repeat", a dropdown with the "while" option chosen, and the label "do".

Connections​

A connection is a place on a block other blocks can connect to.

ConnectionImage
Outputan output connection
Inputan input connection
Previousa previous connection
Nexta next connection

Inputs​

An input is a container for fields and connections. A block is built by rendering its inputs in one or more rows like bricks.

Block built from a value input, an end-of-row input, and a statement input.

All inputs can contain fields. Only value and statement inputs can contain a connection.

Input typeConnection typeNotes
DummyNone
End-of-rowNoneForces next input to start a new row.
ValueInput
StatementNext

Icons​

An icon is a visual element that lives on a block. They always live in the top-start corner of the block, and they often create bubbles.

An if-do block with a mutator icon and a comment icons.

The same block with the mutator and comment bubbles open. The mutator bubble lets you add else clauses to the block and the comment bubble lets you enter a comment about the block.