Can auto-added shadow string blocks be removed?

[Raphael Engel]

Hi everyone,

I'm working with Blockly and have a quick question. Currently, when I use blocks that allow string inputs, Blockly automatically adds these orange shadow blocks with quotation marks. I understand that they help users understand how the blocks can be used, but for my use case, they don't look that good and are rather unnecessary.

Is there a way to remove these automatically added shadow blocks and allow users to type text directly into the input fields, as in Scratch (see second picture)?

Any tips or suggestions would be awesome! Thanks in advance!

Best, Raphael

[Christopher Allen]

Hi Raphael,

I'm working with Blockly and have a quick question. Currently, when I use blocks that allow string inputs, Blockly automatically adds these orange shadow blocks with quotation marks. I understand that they help users understand how the blocks can be used, but for my use case, they don't look that good and are rather unnecessary.

Is there a way to remove these automatically added shadow blocks and allow users to type text directly into the input fields, as in Scratch (see second picture)?

You may already realise this, but for context it is important to understand that the Scratch blocks you give as examples:

…do in fact have shadow blocks, each containing only a single FieldInput.  You can test this by dragging an oval string value block onto one of the oval inputs, and noting that it will replace the "field" (really: replace the shadow block containing the field).

If the text_join block (e.g.) did not have inputs with shadow blocks—but instead had a dummy input directly containing the FieldInput fields—then the outlines around "apple" and "text can be written here" would be rectangular, and it would not be possible to attach other blocks there.

The difference between the Scratch example and yours:

… is that your example is using the default text block definition, which (thanks use of the text_quotes extension) also contains two custom image fields, one before and one after the main FieldInput, whereas in Scratch they have modified the block definition to include only the FieldInput, and the zelos renderer (but not geras or thrasos) special-cases blocks containing only a single text or colour input field by expanding the field into a full-block field.

The easiest way to get the same effect in your app is to replace the default text block definition with a custom definition that does not use the text_quotes extension:

 

Blockly.common.defineBlocksWithJsonArray([
  // Block for text value
  {
    'type': 'text',
    'message0': '%1',
    'args0': [
      {
        'type': 'field_input',
        'name': 'TEXT',
        'text': '',
      },
    ],
    'output': 'String',
    'style': 'text_blocks',
    'helpUrl': '%{BKY_TEXT_TEXT_HELPURL}',
    'tooltip': '%{BKY_TEXT_TEXT_TOOLTIP}',
    'extensions': ['parent_tooltip_when_inline'],
  },
]);

N.B.that this will remove the quotes from all text blocks.  That's probably good for consistency.

It's probably also worth mentioning at this point that the reason the text_quotes extension exists (and is used in the default text block definition) is to help users to understand that there is a difference between numeric and string values, as well as to prepare them for the transition from block-based programming to text-based programming; if the goal of your app is primarily pedagogical then removing the quotes may arguably be doing your users a disservice—though evidently not a serious one, given Scratch's success and popularity.

Best wishes,

Christopher