Tip: Using component colors to find components in the Blocks Editor

Finding a specific programming block with in the AI2 Blocks editor can be hard for new AI programmers.

You found a great code example online and want to recreate it by entering the blocks in to your program – but you cannot find that red block in the middle of the code sample? Where is it? !!!

You start poking around the drop down lists, scanning up and down the pop up menus, missing it the first time(!) and then going through all the blocks again until you finally locate that darned block! Frustrating!

Here is a sample code section:



How do you find that red “split at first” block in the top middle?

There are two ways to help find the block in the Blocks editor.

One is the block color the blocks are color coded. The red block corresponds to the “Text” blocks as seen in the list of Built-in Blocks in the editor:



Blocks such as “If-then” are light brown in color. Where would you find the if-then block? Probably in the “Control” section!


The second method is to look at how the block is used and what type of parameters it works with. In the example above, you may guess the “split at first” block is a Text block because it uses text as a parameter.

As you learn your way around the App Inventor Blocks editor, use the block color to guide you towards a likely location for the block. Use hints about the block’s usage to further refine the location.

Color Coding Does Not Always Work!

Consider the following code segment:




Where do we find the light brown “when” block? Its the same color as the “if-then” block – but it is not located in the Control section!


This is where the color coding scheme is not fool proof.

When a block names a control (such as Spinner1) you must click on the Spinner1 control in the list of components on the left side of the Blocks editor, to find the block. Even though this event handler block is the same color as a Control, you will not find the event handler in the Control section!


Dark green blocks set the value of a control property. These are also located by clicking on the component name.

Light green blocks get the value of a property, and these light green blocks are found by clicking on the component name.



With practice, you will soon memorize the location of each block – really!

But until that happens, use the color coding to help you find a needed block.

Learn to recognize references to controls and remember to click on the control in the list of user interface controls, at lower left to look for event handlers, “calls” to method procedures, and to get and set property values.

Hope these tips are useful to you!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.