Design - Block insertion UI

[thisandagain]

We currently have two different ways to "insert" a block that is inconsistent between Scratch and Scratch Jr. From observation (particularly on mobile devices), we'd like to implement a variant of our design from Scratch Jr for all grammars.

Scratch Jr

Scratch

Scratch (Prototype)

Blockly

Tickle

---

Questions

• In Scratch Jr and some of our prototypes even if you are inserting a group (stack) of blocks, the UI only shows an insertion shadow for the top / outer most block. This is different from some other Scratch variants in which the entire group is shown. This is done to avoid jarring changes in the display (see Tickle for reference) but comes at the cost of slightly inconsistent behavior. This is something we should discuss / spec.

[thisandagain]

/cc @ntlrsk

[NeilFraser]

Totally agree that mid-air resizing is good. But I hope we can do it right. See screenshot of Scratch's current behaviour where the blocks fall apart in the process.

[ntlrsk]

@thisandagain - So helpful to see them all.
@NeilFraser Oh, I hadn't seen that bug before (curious if have you seen it with other blocks besides if/then).

[thisandagain]

Update:
We made some good progress on this front yesterday. @carljbowman will follow-up with mockups.

[tmickel]

Here are some more states to think about for horizontal C/pants-blocks @carljbowman

The work with pants blocks has helped some clear differences emerge.

Current ScratchJr insertion states:
Place repeat after strip:

Place repeat before strip:

Place repeat around block:

Place repeat arounds substrips:

Around whole strip before:

Around whole strip after:

And some Blockly comparisons:
Before placing pants around strip at beginning:

After:

Before placing around part of a strip:

After:

To my understanding Blockly C/pants blocks will currently only wrap the entire stack/strip if you place a C/pants at the beginning, and otherwise insert itself into the stack.

[rachel-fenichel]

Related: what happens when you place a repeat around a substrip with an "end" block (repeat forever)? In current scratch jr it wraps all of the code before the end block, and bumps the end block to the end of the stack (attached).

[thisandagain]

As per discussion I think implementing the behavior we currently have within Scratch Jr should be our first step here. @rachel-fenichel would you feel comfortable getting started on this?

/cc @carljbowman @tmickel

[rachel-fenichel]

Sounds good--I'm going to start with just "ghosting" a single block into place, rather than the pants blocks.