Design - Vertical Grammar

[thisandagain]

• Define subset of blocks for initial design pass
• Initial design pass
  • Input Block (Integer)
  • Hat Block
  • Input Block (String)
  • Dropdown Block
  • C-Block (Repeat)
  • Variable Block
  • Dropdown/Input Block (Integer)
  • Boolean Block
• Design review
• Second design pass
• Handoff for implementation

[thisandagain]

@carljbowman Mind dropping in the process work thus far?

[carljbowman]

WIP - Sketches (R1.2)

Note: Images were exported at 2x for hi-res screens. Blocks are currently speced on a 7px=1rem grid system.

More robust explorations coming soon.

Grids

No Grids

[thisandagain]

Question that came up today:
Particularly with the option of re-using blockly's "angle" field, should we consider dropping support for the hybrid input / dropdown input style that is used in only two places ("point in direction" and "play drum")?

[thisandagain]

Follow-up from design meeting today:
Yes, we'd like to drop the use of the "hybrid" block type, but we should check Scratch X for compelling uses of it before walking away completely.

[carljbowman]

Round 1.3 — Vertical Blocks

Larger notches

Round 1.4 — Vertical Blocks

Smaller notches

Blocks are sketched on a 4px grid. These PNGs are exported at 2x for HI-DPI screens. Colors are still a WIP.

[thisandagain]

Follow-up from discussions yesterday:
We are leaning towards the larger notches as the general feeling is that the smaller notches get lost (particularly on mobile devices). The large notch size creates an awkward minimum area on the left side of each block (see the "if / then" block for an example) but that seems like a better compromise than having notches that may not be noticed / visible by users.

[tmickel]

Rachel:
Useful set of test blocks for the playground:

<xml xmlns="http://www.w3.org/1999/xhtml">
  <block type="controls_repeat_ext" x="13" y="13">
  <value name="TIMES">
  <shadow type="math_number">
  <field name="NUM">10</field>
  </shadow>
  </value>
  </block>
  <block type="controls_if" x="13" y="113"></block>
  <block type="math_arithmetic" x="13" y="213">
  <field name="OP">ADD</field>
  <value name="A">
  <shadow type="math_number">
  <field name="NUM">1</field>
  </shadow>
  </value>
  <value name="B">
  <shadow type="math_number">
  <field name="NUM">1</field>
  </shadow>
  </value>
  </block>
  <block type="logic_operation" x="13" y="288">
  <field name="OP">AND</field>
  </block>
  <block type="variables_set" x="13" y="338">
  <field name="VAR">item</field>
  </block>
  <block type="text_print" x="12" y="388">
  <value name="TEXT">
  <shadow type="text">
  <field name="TEXT">abc</field>
  </shadow>
  <block type="text">
  <field name="TEXT">hello</field>
  </block>
  </value>
  </block>
  <block type="text_append" x="12" y="438">
  <field name="VAR">item</field>
  <value name="TEXT">
  <shadow type="text">
  <field name="TEXT"></field>
  </shadow>
  <block type="text">
  <field name="TEXT">&lt;- dropdown block</field>
  </block>
  </value>
  </block>
</xml>

[carljbowman]

Round 3 – Vertical Blocks

Normalized with Horizontal blocks:

• Larger notches
• 4px rounded corners (border-radius)

Still needs work:

• Colors

[tmickel]

Closing as this has been broken into a few implementation issues.