Technical Preview: Blockly v10 Update

Hello everyone,

I have deployed an early tech preview server for the next Blockly update. Blockly is the library that drives the App Inventor block editor, and we last updated our copy of Blockly back in 2017! Since then, the Blockly team has made a number of architectural changes to Blockly, including the creation of themes and a plugin system. The theme mechanism will eventually tie into the new UI change to allow for dark theme support. For plugins, we have incorporated a selection of plugins that should hopefully improve the development environment:

  • Multiselect: Using the shift key, or the checkbox button above the zoom controls, select more than one block for simultaneous editing/moving of blocks in the workspace
  • Scroll options: Dragging a block to the edge of the workspace will automatically scroll the viewport
  • Autoextending blocks: This one is still a bit buggy, but blocks such as the "make a list block", the "join" block, and others will automatically add empty inputs if you drag a value block into their immediate vicinity. This allows you to extend the block without having to first enter the mutator and additional inputs.

Blockly has also added some other features, such as using the Ctrl key (Windows/Linux) or Alt key (macOS) to drag blocks from the middle of a stack without disturbing the flow of the remaining blocks. By default, dragging a statement block will drag all of the following blocks as well (the current behavior of App Inventor). Holding the corresponding key allows one to "extract" a statement from within another sequence without disturbing that sequence.

There is also a new rendering engine in Blockly. We'd like to hear your experiences with this, especially when it comes to workspaces with a large number of blocks.

Thanks to @Mark_Friedman, @BeksOmega, and @HollowMan6 for their efforts in making these improvements possible.

Cheers,
Evan

21 Likes

HidatoV286.aia (76.9 KB)
Here's a 3k block project from a while ago.
call procedure names missing on imported project

Procedure name selections from the pulldown list in call blocks were missing until the block was toggled between external and internal sockets.

When I multiselected blocks 1 and 3 of a block sequence, and lifted them, I was unable to dock or release them
(edit attempt failed on too large video)

Thanks for the report @ABG. There were some pending fixes for the multiselect support that I've just pushed out.

More procedure name weirdness:
Procedure names in calls are stuck at first in list

More on the procedure name list dropdown behavior:
Procedure names in calls are stuck at first in list with lag

That Oops procedure just also happens the top of the Elements list for procedure names.

In the second video, notice how the procedure argument name starts out wrong, and chases after the procedure name. Adjoining call blocks improve on their own, as if they are catching the attention of some roving display cleanup process running way behind schedule.

There is a delay effect when changing the procedure names in the calls:
Delayed procedure name switch

(Not shown here: The internal name is right, as evidenced by proper operation of the Highlight Procedure right click option. That takes you to the right procedure definition, and not to that Oops (first on the list) procedure.)

1 Like

This is just a demo of the new, barely visible check box that toggles between drag mode and multiselect mode:

Toggling between drag and multiselect by check box

(It took me a while to figure out, and the toggled and not toggled states are barely distinguishable, at the same level of salience as the mouse over highlights.)

P.S. I wonder how much worse this will look in dark mode?

2 Likes

This is my drag and drop blooper reel, where I had hoped to show off the effect of the Ctrl key on drag scope.

Instead, I lost my ability to replace the dragged out blocks into the same place they were before, eventually having to drag them offscreen to reach the STOP button on my screen recording app.

Drag and drop blooper reel

P.S. This does, however, show off the new socket addition feature on that neighboring Add Items To List block.

I wonder if that feature was causing my inability to dock under that block?

1 Like

Oh no, I broke the Mutator!

Broken mutator 1

Closing and reopening the project cleared that up.
Broken mutator 2

I had to juggle blocks to get them back in the right order, though. (Not recorded, sorry.)

Docking below an open input socket remains hard.

1 Like

It's great to learn that we will finally have multiselect integrated into App Inventor! Thank you @ABG for providing so much feedback! some comments from me about the multi-select:

When I multiselected blocks 1 and 3 of a block sequence, and lifted them, I was unable to dock or release them
(edit attempt failed on too large video)

That sounds like a bug in the gesture handling at Blockly core's side, I received similar reports occasionally, but they are typically hard to reproduce. If it shows that it's directly related to the plugin, it would be greatly appreciated if you could send the related stack trace in the console to Sign in to GitHub · GitHub, next time you encounter that again.

This is just a demo of the new, barely visible check box that toggles between drag mode and multiselect mode:

Toggling between drag and multiselect by check box

(It took me a while to figure out, and the toggled and not toggled states are barely distinguishable, at the same level of salience as the mouse over highlights.)

P.S. I wonder how much worse this will look in dark mode?

I just fine-tuned the parameters (CSS opacity changes, as well as the color of the SVG) a little bit to make this more distinguishable and also to fit the dark mode, so that now we are up to the standard of what we have in official Blockly workspace-backpack plugin: blockly-samples/plugins/workspace-backpack/src/backpack.ts at 5d699d2b3ccf80adb50a17da4207af2c368764f0 · google/blockly-samples · GitHub
But anyway it would be a better idea to use a better SVG here (I don't have a visual design team stand in the back of me, so I can't help here), those are configurable on the plugin side and I just made the icons configurable at runtime as well to fit possible dark/light theme switch with different icons.

image

1 Like

Thanks for the comments.

I am too low on the AI2 food chain to implement your patches, so I leave that to the MIT AI2 implementation team.

My particular skill set mostly consists of breaking things.

4 Likes

Please Add The Option For Find Block Option.... It Will Locate Finds Name Block Just Like Highlight Procedure.

Right Click > Select Find Option > Enter Text > And Highlight All Blocks with this Name.

Because Find Option in Chrome/Firefox Does not Work for Same.

image

1 Like

While you hold your breath for that, you can use the AI2Helper browser extension from

That is in our plans. It will likely be based on the work of one of our GSOC students, Arya Anand, described in this post.

-Mark

1 Like

There is a possibility that the variables (local and global) can be of "strong type" example:

  • Int, Bool, String, etc.

It is to avoid memory attacks by memory leaks, and possible buffer overflow failures/attacks (stack/heap).

  • I know that appinventor is not designed to be secure, but there are many applications that are made with the platform, as well as it is a good practice (and teaching) to approach security (cyber, computing, data, etc).

  • I currently teach how to check the data entered (given the lack of strong typing) by means of sync/async functions, dictionaries, etc.

But it would be very nice if that option were available by default.

@ewpatton

1 Like

I'm curious about the mutator issue! Do you have reproduction steps for that?

Here's another video and sample project, off ewpatton's appspot server:
chart_drunkards_walk.aia (2.6 KB)
sample run

AT first I thought it was a Heisenbug, from window conflicts with the screen recorder, but it is reproducible by trying to drag the mutator bubble by its NorthEast corner.

A bottom drag spawned a second bubble.

1 Like

Iiinteresting, are you able to reproduce it in the Blockly playground as well?

I tried, but could not reproduce the bug there.

But that playground was not wired for things like the new helicopter drag or the automatic socket spawn on drag approach.

My gut reaction is that it might be an interaction with the auto-extending blocks since they will try to rebuild the structure of the block and this could somehow detach the mutator since it rebuilds the block entirely. Does it happen with other mutated blocks like the if statement (which doesn't auto-extend)?