Scratch is a visual programming language. Because of this, it’s helpful to show what the blocks look like when teaching people to program using this language. Whether you’re creating presentations, planning sheets, or something else, I’ll show you how you can quickly and easily create images of Scratch blocks for these materials. At the end, I have a template you can use to create these blocks directly in Google Docs and Slides just by typing.
Scratch Blocks Generator
This Scratch Blocks Generator by Tim Radvan is great for creating mockups of blocks. On the webpage, type the Scratch blocks in the box, one block per line, in the editor box. As you type, you’ll see your text transformed into Scratch blocks.
Saving Images
You can download your blocks in PNG and SVG formats using the Export buttons. The PNG format is good for plugging and playing. You can insert this type of image into just about any program/app. SVG is a vector format that needs to be opened with more specialized programs and exported into a more common format before it can be inserted into other apps/programs. SVG files offer more editing capabilities, such as making the shapes larger or changing their text.
What do I type?
In the editor, type one block per line. For most blocks, type the exact words that appear in the Scratch blocks. This page lists what needs to be typed for each type of block. Here are a few general-purpose blocks:
Flag
when flag clicked
Text placeholders
Text placeholders go inside of [
and ]
say [Hello world!]
Number placeholders
Number placeholders go inside of (
and )
wait (3) seconds
G Suite add-ons
If you’re planning to make Scratch materials in Google Docs or Slides, I used Tim Radvan’s generator to create two add-ons that you can use to generate blocks directly in those apps. The Docs and Slides add-ons are available in the Chrome web store.
Using the add-on
This tutorial shows the process in Google Docs, but the Slides version works in exactly the same way. Use the “next” and “previous” buttons in the “Try” tab to walk through each step. Click the “view” tab to see all steps at once. Open tutorial in new window.
Here's an interactive tutorial for the visual learners