Collapsible hats/c-blocks

[luxaritas]

In advance, if it's not appropriate for me to bring this up here, I apologize, close this topic, and I'll be on my way. However, this seems like a pretty important design consideration.

One of the biggest UI/UX issues in using almost any visual programming environment I've encountered (such as Scratch, or Mindstorms NXT-G/EV3-G) is that the code can get extremely long and (arguably) cluttered. Even in a text-based environment, length can still be an issue so code blocks are often able to be collapsed in editors, something which seems to make a lot of sense for Scratch/Blockly (vertical specifically).

This has been brought up a few times (the core thread on the forums being this one), and this potentially fits quite well into Scratch by implementing this within hats and c-blocks, by including an arrow to allow all code to be effectively hidden from the immediate view, meaning that it's significantly easier to get an overview of the sections of code. I imagine this would be important to consider as this can have a number of implications (such as how blocks are moved once 'extended', room in block length for an arrow, etc).

Thoughts are appreciated.

[luxaritas]

It's possible this might really be more appropriately targeted to Blockly itself. I'll shift it to there if that makes sense

[carlosperate]

Blockly already supports collapsible blocks, but I guess their visual representation would probably clash with the general patterns in Scratch. I'm not quite sure I understand how hats could be used to represent this, as far as I thought they are generally there to indicate events, no? Maybe you are referring to add this functionality only to blocks with hats or C shapes?

[tmickel]

Hey @LFP6: I think this is a good consideration. Thanks for raising it here, it's good for us to keep in mind.

Collapsible blocks are definitely something on our long-term scratch-blocks wish-list. As you mention, there's probably a lot of design to be done to make sure it works well.

---

Here is the version from Blockly, for everyone's reference:

becomes:

I imagine a version in scratch-blocks might look quite different. I hope we'll get the chance to think about and try different implementations!

[luxaritas]

Ah, missed that it was in the context menu. Also, correct me if I'm wrong, but I don't think Blockly has hats, and so no collapse functionality for that.

@carlosperate I'm saying that hats and c-blocks "contain" other pieces of code, and so would be used to collapse the code "into".

@tmickel Visual styling/representation for this is definitely something to consider. Jagged edges are a nice visual queue, but I'd personally like to see something a little more refined.

[towerofnix]

In the Scratch mod Bingo, hat blocks with contents can be collapsed by clicking on a small triangle on the far left of the block:

Note that a hat that starts a script without any stacks below will not have this control:

So that's one option, and I don't think it's too hard for anybody to pick up. Of course (especially judging by how Scratch Blocks is currently going) an animation could also help!

I was thinking that maybe blocks could sort of collapse into the hat/parent, while becoming invisible? (less opaque) It would probably work well with both horizontal and vertical grammars, too.

[carlosperate]

Also, correct me if I'm wrong, but I don't think Blockly has hats, and so no collapse functionality for that.

Blockly has hats, but they are an "all or nothing" type of configuration parameter. If enabled then any block without previous connection is rendered with a hat.

I've requested the possibility to selectively activate them, but the issue has been pretty much ignored: https://github.com/google/blockly/issues/261

[carlosperate]

In the Scratch mod Bingo, hat blocks with contents can be collapsed by clicking on a small triangle on the far left of the block

That was my first though as well, but looking at the example I think there should be a more visible clue than that. Perhaps making the block "fatter"/"taller", or make it look as if it has been "accordion collapsed" somehow?

[mrjacobbloom]

One option is to show the c-block as empty, and without any space in between the top part an the end. Since there's usually a space there, it might stick out. Another option is to insert an imaginary "..." block, like we sometimes see on the forums

[luxaritas]

Late reply, but @carlosperate I think maybe adding some "fake" content to the bottom/inside would work well, either as @Airhogs777 suggested or possibly without it even being a full block or having text.