# Snapblocks

**URL:** https://meta.discourse.org/t/snapblocks/310155
**Category:** Plugin
**Tags:** bbcode
**Created:** [May 31, 2024, 8:42pm UTC](https://meta.discourse.org/t/snapblocks/310155 "2024-05-31T20:42:46Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![ego-lay\_atman-bay](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ego-lay_atman-bay/32/255458_2.png) [@ego-lay\_atman-bay](https://meta.discourse.org/u/ego-lay_atman-bay)
#### Post date: [May 31, 2024, 8:42pm UTC](https://meta.discourse.org/t/snapblocks/310155/1 "2024-05-31T20:42:46Z")

</div>

| | | |
| --- | --- | --- |
| ℹ | **Summary** | Allow users to use [snapblocks](https://snap-blocks.github.io/) in their posts. |
| 🛠 | **Repository Link** | [GitHub - snap-blocks/snapblocks-discourse: snapblocks discourse plugin · GitHub](https://github.com/snap-blocks/snapblocks-discourse/) |
| 📖 | **Install Guide** | [How to install plugins in Discourse](https://meta.discourse.org/t/install-plugins-in-discourse/19157) |

  

### Features

[Snapblocks](https://snap-blocks.github.io/) is a fork of [scratchblocks](https://scratchblocks.github.io/) that allows users to convert text into images of [Snap_!_](https://snap.berkeley.edu/) scripts. This Discourse plugin allows users to use snapblocks in their posts.

You can create snapblocks in a post, by typing snapblocks code inside `[snapblocks][/snapblocks]` bbcode tags. For example:

```markdown
[snapblocks]
move (10) steps
[/snapblocks]

```

 ![image](https://global.discourse-cdn.com/meta/original/4X/b/8/8/b8831daef11e25b687546490f11e19be92b55818.png)

You can alternatively use `[scratchblocks][/scratchblocks]` as an alias, though it can be disabled.

You can also use `[sb][/sb]` to add snapblocks code inline.

```markdown
Use the [sb]move (10) steps[/sb] block to move forward.

```

 ![A Batman emoji is next to a message that says "Use the move 10 steps block to move forward." (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/a/c/2/ac27e7837fccc1fa46c8505725cb45d3eb0c4c34.png)

### Options

There are a few settings available to change how snapblocks are rendered.

- Block Style
- Block Scale
- Zebra Coloring
- Block Wrap
- Show Spaces
- Santa Hats

Many options can also be used in snapblocks snippets.

```plaintext
[snapblocks blockStyle="snap-flat" wrap="true" wrapSize=100 zebra="true" showSpaces="false" santa="true"]
when flag clicked
if <[] = []> {
  forever {
    run ({} @addInput) with inputs [Hello world] @delInput @verticalEllipsis @addInput
  }
}
[/snapblocks]

```

 ![A blockly program with a Batman characteritat the top that triggers a loop to display "Hello world" by clicking the start button, and a green flag at the top to start the program. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/e/1/c/e1c8cbe16309a72b4c1d150f61edb342caf90bb3.png)

You can also set the block style using the default parameter.

```markdown
[snapblocks="snap-flat"]
move (10) steps
[/snapblocks]

```

 ![image](https://global.discourse-cdn.com/meta/original/4X/d/c/6/dc6bfff4b22c7e9e6f6d45cc59ddc6de2c422614.png)

### Configuration

| Name | Description |
| --- | --- |
| Block Style | The default block style. Can be `snap`, `snap-flat`, `scratch2`, `scratch3`, or `scratch3-hc`. |
| Block Scale | The default block image scale. Must be a float. |
| Zebra Coloring | If multiple blocks are the same color, alternate a lighter color. |
| Block Wrap | Wrap block parts onto a new line if the block gets too wide. |
| Show Spaces | Show spaces as a dot in inputs. |
| Scratchblock Alias | Enable the [scratchblocks] alias. |

### CHANGELOG

- 1.5.0
  - Update snapblocks to v1.10.0
  - Fix error with loading the snapblocks library (it was throwing an error because of a “bad filename”)

- 1.4.1
  - Fix multiline code snippet quoting
  - Actually detect block translations

- 1.4.0
  - Make quoting snapblocks better
  - Text in blocks cannot be selected (though you can still select over them and quote the whole script).

- 1.3.0
  - Add “Santa Hats” option to settings
  - Add `santa` option to snapblocks snippets
  - Updated snapblocks to 1.8.0

- 1.2.0
  - Allow the [scratchblocks] alias to be toggled (I finally figured out how to do it).
  - Update snapblocks to 1.7.0

- 1.1.1
  - Make sure overflowing scripts can be scrollable.
  - Added actual text when using the snapblocks button in the toolbar.

- 1.1.0
  - Updated snapblocks to 1.6.0

- 1.0.0
  - Initial release

### TODO

- Allow separate default style for `[scratchblocks]`

---

<div class="post-metadata">

### Author: ![thoka](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thoka/32/115652_2.png) [@thoka](https://meta.discourse.org/u/thoka)
#### Post date: [January 8, 2025, 5:26am UTC](https://meta.discourse.org/t/snapblocks/310155/2 "2025-01-08T05:26:23Z")

</div>

Are there any incompatibilities with `scratchblocks` that would suggest the need for a separate plugin for Scratch?

If not, it could be noted here and in the plugin’s README on GitHub.

---

<div class="post-metadata">

### Author: ![ego-lay\_atman-bay](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ego-lay_atman-bay/32/255458_2.png) [@ego-lay\_atman-bay](https://meta.discourse.org/u/ego-lay_atman-bay)
#### Post date: [January 8, 2025, 6:05am UTC](https://meta.discourse.org/t/snapblocks/310155/3 "2025-01-08T06:05:40Z")

</div>

I’d say that the only incompatibilities are mainly just some minor syntax tweaks, like dropdown menus and the define block. For the most part, scratchblocks code is mostly compatible with snapblocks.

I do still think there should be a separate plugin for scratchblocks, since I know forums that are for scratch/scratch mods might not want to use snapblocks, since snapblocks is geared to work best for snap (and I have been lacking on the scratch styles polish), not to mention, I didn’t add the ability to switch the toolbar shortcut to use scratchblocks instead.

If anyone would like to try and create a scratchblocks plugin using this plugin as a base (I’m probably not going to get around to making one myself), I think it’s worth noting that the render function I used is not in the scratchblocks api, so it would take a bit more work than just dropping in scratchblocks.

---

<div class="post-metadata">

### Author: ![thoka](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thoka/32/115652_2.png) [@thoka](https://meta.discourse.org/u/thoka)
#### Post date: [January 8, 2025, 6:17am UTC](https://meta.discourse.org/t/snapblocks/310155/4 "2025-01-08T06:17:44Z")

</div>

It appears, at first glance, that there is no objection to utilizing this plugin for initial experiments (my environment being a school setting) and only then investing time into a Scratch plugin should the necessity arise.

---

<div class="post-metadata">

### Author: ![thoka](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thoka/32/115652_2.png) [@thoka](https://meta.discourse.org/u/thoka)
#### Post date: [January 8, 2025, 7:00am UTC](https://meta.discourse.org/t/snapblocks/310155/5 "2025-01-08T07:00:44Z")

</div>

Feature request: The block-style could be defined separately for the `[scratchblocks]` alias.  
This would allow effortless usage of different styled Scratch and Snap! elements.

---

<div class="post-metadata">

### Author: ![ego-lay\_atman-bay](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ego-lay_atman-bay/32/255458_2.png) [@ego-lay\_atman-bay](https://meta.discourse.org/u/ego-lay_atman-bay)
#### Post date: [January 8, 2025, 7:27am UTC](https://meta.discourse.org/t/snapblocks/310155/6 "2025-01-08T07:27:59Z")

</div>

That’s actually a good idea. I’ll look into adding that.

---

<div class="post-metadata">

### Author: ![RGJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rgj/32/523185_2.png) [@RGJ](https://meta.discourse.org/u/RGJ)
#### Post date: [May 30, 2026, 1:22pm UTC](https://meta.discourse.org/t/snapblocks/310155/7 "2026-05-30T13:22:18Z")

</div>

I don’t see any server side logic, this could better be built as a theme component?

---

<div class="post-metadata">

### Author: ![ego-lay\_atman-bay](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ego-lay_atman-bay/32/255458_2.png) [@ego-lay\_atman-bay](https://meta.discourse.org/u/ego-lay_atman-bay)
#### Post date: [May 30, 2026, 2:34pm UTC](https://meta.discourse.org/t/snapblocks/310155/9 "2026-05-30T14:34:52Z")

</div>

It’s hooking into the message parser in order to make sure nothing inside the tags are parsed, and includes many options for configuring the behavior. I also want to have the new WYSIWYG message composer support, but I’ve been having trouble getting that working well. I also mainly do not want the forum admins to have to enable it for every theme, cause that can cause problems and confusion (I’ve already seen that happen before).

So is there something I’m not understanding with the capabilities of a theme component, and can it just be an enable once globally and forget it type thing?

---

<div class="post-metadata">

### Author: ![RGJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rgj/32/523185_2.png) [@RGJ](https://meta.discourse.org/u/RGJ)
#### Post date: [May 30, 2026, 3:06pm UTC](https://meta.discourse.org/t/snapblocks/310155/10 "2026-05-30T15:06:27Z")

</div>

> [@ego-lay\_atman-bay](#):
>
> I also mainly do not want the forum admins to have to enable it for every theme,

Installing a plugin is much more cumbersome than this 🤔 and won’t work on [Discourse.org](http://Discourse.org) hosted plans.

Besides, I think most forums only have one active theme.

Theme components can have settings and they can do everything that the Javascript side of a plugin can do. With the current state of the plugin you would not lose any functionality.

---

<div class="post-metadata">

### Author: ![ego-lay\_atman-bay](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ego-lay_atman-bay/32/255458_2.png) [@ego-lay\_atman-bay](https://meta.discourse.org/u/ego-lay_atman-bay)
#### Post date: [May 30, 2026, 3:29pm UTC](https://meta.discourse.org/t/snapblocks/310155/11 "2026-05-30T15:29:54Z")

</div>

> [@RGJ](#):
>
> Installing a plugin is much more cumbersome than this 🤔 and won’t work on [Discourse.org](http://Discourse.org) hosted plans.

Don’t you just clone the repo into the plugins directory? I feel like that’s not very cumbersome. However, not working for the discourse hosted plans is valid.

> [@RGJ](#):
>
> I think most forums only have one active theme.

Not the forum that this plugin was made for. But I did just check, and it seems the theme component settings ui has had a massive overhaul since the last time I had to deal with them, so it looks easier to manage than I remember.

> [@RGJ](#):
>
> Theme components can have settings and they can do everything that the Javascript side of a plugin can do. With the current state of the plugin you would not lose any functionality.

I see, then I’ll try out rewriting it as a theme component, but I don’t think I’ll be able to get to it for a while due to other obligations.

---

<div class="post-metadata">

### Author: ![RGJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rgj/32/523185_2.png) [@RGJ](https://meta.discourse.org/u/RGJ)
#### Post date: [May 30, 2026, 3:38pm UTC](https://meta.discourse.org/t/snapblocks/310155/12 "2026-05-30T15:38:09Z")

</div>

> [@ego-lay\_atman-bay](#):
>
> Don’t you just clone the repo into the plugins directory? I feel like that’s not very cumbersome.

Not all admins have command line access and not all admins who do, are very familiar with it.

And it requires a rebuild, which is not instant, can have side effects and can potentially lead to issues.

Updating a plugin requires a rebuild as well, while updating a theme component is the click of a button.

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [May 31, 2026, 9:08am UTC](https://meta.discourse.org/t/snapblocks/310155/13 "2026-05-31T09:08:24Z")

</div>

> [@ego-lay\_atman-bay](#):
>
> I see, then I’ll try out rewriting it as a theme component, but I don’t think I’ll be able to get to it for a while due to other obligations.

I might have a go at this later, since there really is no backend logic.

---

<div class="post-metadata">

### Author: ![ego-lay\_atman-bay](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ego-lay_atman-bay/32/255458_2.png) [@ego-lay\_atman-bay](https://meta.discourse.org/u/ego-lay_atman-bay)
#### Post date: [May 31, 2026, 3:02pm UTC](https://meta.discourse.org/t/snapblocks/310155/14 "2026-05-31T15:02:32Z")

</div>

That would be helpful, since I assume you might know more about discourse than I do (this plugin was mostly hacked together from reading other plugins).
