July 2021 Release is Available!

[Beka Westberg]

Hello peoples!

The July 2021 release is out! In this release there aren’t a lot of new features, because work was focused on blockly-samples. However, there were a lot of great bug fixes like preventing insertion markers from causing crashes when you clear the workspace programmatically (yikes!)

Work that was done in blockly-samples this quarter includes:

• Releasing a backpack plugin that works like App Inventor’s backpack.

• Releasing a content area visibility plugin that helps end-users know where their blocks are. This was originally requested by a contributor, and has now been added!

• Releasing the dark, high contrast, tritanopia, and deuteranopia themes as plugins. Note, these will be moved out of core in the next release.

• Lots of other work done by contributors, who will be shouted out individually below :D

• And coming soon: a scroll plugin that automatically scrolls the workspace when a user moves a block to the edge. This is based on code.org’s custom scrolling behavior.

🎉 Kudos 🎉

First of all, I’d like to thank everyone who contributes to the forums, or files issues against the repos. It’s hard to shout everyone out individually, but these are some of the most wonderful things you can do for this project =) Answering questions helps more people learn about Blockly, and filing bugs makes the codebase better for those same people in the future!

Third Party Plugins

This quarter we have our first third party plugin! These plugins work just like normal plugins, except they’re managed by contributors instead of the core team =) This plugin is an alternative to the built-in colour field, which makes it easier for your users to customize colors. Here’s what Noah (the creator of the plugin) wants you to know about it:

“You can play with the Blockly color wheel field with the live demo and read the documentation.  The repository is open to PRs and support is available through GitHub Issues.  It uses iro color picker and you can pass all configuration options for it.   It sets the field value to the hex value of color.”

Core contributions

There have been a lot of great contributions to the core repo this quarter, including:

• jschanker has done awesome work fixing bugs related to row healing and unnamed fields, as well as filing a bunch of issues.

• nixgc switched how block events are aliased (no breaking changes)

Samples contributions

And there have been some wonderful contributions to the samples repo this quarter, including:

• 2torus added a rad new example showing how to bundle blockly with parcel.

• lazy-geek fixed up some annoying deprecation warnings.

• himanshu007-creator fixed a visibility issue and a var/const issue.

• joshcai added the ability to remove code generators from the advanced playground.

• ShiroRyokoshi cleaned up the readme to point to the new devsite contributing pages.

• Harshita-Kanal fixed a warning with the custom fields react demo.

• amir-arad fixed a link in the theme codelab readme.

• ricknjacky added the captureWarnings helper to the dev-tools plugin.

If I missed anyone I’m really sorry, we don’t have a great method for keeping track of contributions yet. If you did contribute something and I missed you, know that your contribution was very much appreciated =)

🔨 Breaking Changes in Core 🔨

• (#4852) The `IDeletable` interface has been renamed to `IDragTarget`.

• (#4845) `variableDB_` in the generator class has been renamed to `nameDB_`.

• (#4779) The compile.sh file has been removed. In the future you can use `npm run test:compile:advanced`.

• (#4763) `SCROLLBAR_MARGIN` was renamed to `DEFAULT_SCROLLBAR_MARGIN` and `SCROLLBAR_PADDING` was renamed to `SCROLLBAR_MARGIN`.

If you want to know the nitty-gritty of what issues were closed, and which pull requests were merged, you can see that below =)

Best Wishes,

Beka (who is interning for the summer)

Issues Closed:

- Scrollbars Look Chunky on ChromeOS (#4953)

 - Consider Renaming the project. (#4943)

- GoogleFI compatibility issues (#4942)

- Viewport change events causing out of memory error (#4916)

- Flyouts do not recalculate delete area (#4912)

- Escape no longer reverts field edits (#4910)

- Error to generate blocks on complex input (#4891)

- Add hook for getting id of component registered on `ComponentManager` (#4881)

- .blocklyDraggable refers to blockly-demo.appspot.com (#4864)

- translation incorrect (Korean) (#4859)

- Context menu Delete X blocks preview does not match behavior (#4832)

- Calling getField/getFieldValue/setFieldValue without supplying name gets/changes (value of) first unnamed field (#4830)

- Connecting orphan block does not do type checks in correct order (#4826)

- Editing text field impossible on iPad while external keyboard connected (#4818)

- Invisible toolbox still reports delete area (#4811)

- Compatibility blockly with Franka version 4.1+ (#4810)

- Can I provide an interface to directly obtain the fast overall configuration of JSON (#4795)

- Why doesn't code generator give priority to Java (#4794)

- Blockly Developer Tools preview unavailable (#4768)

- Use captureWarning helper from dev-tools (#4761)

- Typo in custom blocks JSON vs. JS (#4759)

- Dynamically generated blocks output is being lost after last lib update (#4757)

- The xml of dynamic appendField block is not included (#4752)

- Cron job to delete expired data in appengine demos (#4751)

- JavaScript APIs (#4749)

- javascript.d.ts exports Blockly.Generator itself instead of its instance (#4742)

- Add an option allowing to select and drag multiple blocks at the same time (#4739)

- I cannot use text input field in blockly to set a dynamic dropdown (#4732)

- Click event should include access to thing being clicked (#4729)

- Zoom reset not centering workspace (#4724)

- Blocks unexpectedly scrolled up or down (reopened) (#4678)

- Toolbox and flyout metrics should report appropriate height and width (#4594)

- Allow the workspace to be panned when a block is dragged near the edge (#4570)

- Travis not properly reporting typing errors (#4546)

- Copying in Safari makes an error sound even if copy works (#4537)

- Workspace Comment Change event does not serialize/deserialize correctly (#4527)

- Very old deprecated functions (#4475)

- Consider adding get/setMetrics to the options struct when creating a workspace (#4377)

- Refactor event grouping to allow for nested groups (#4216)

- Fields don't group edits (#4189)

- Update Toolbox Events (#4187)

- Data retention enhancements needed for 3 blockly demos (code, cloud storage and block) (#3899)

- Create a Public Metrics Method (#3746)

- lastConnectionInRow inconsistent with lastConnectionInStack (#3656)

- Suspicious @suppress (#3517)

- Typings not split into files (#3213)

- Script to bump version and tag release on master (#3210)

- Script for publishing blockly-demo to app engine (#3209)

- Keyboard Nav: Field Cursor Should be correct size (#3026)

- wrong variable scope (#2799)

- Undoing connecting a collapsed block causes positioning issues (#2675)

- Clearing workspace while dragging with insertion marker crashes (#2338)

- UI Event Handling API (#2253)

- Proposal: Mouse Wheel Behavior, Scrolling vs Zooming (#2205)

- Refactor Field validation (#2169)

- WorkspaceSVG: Better APIs to get and set workspace scroll and zoom. (#2145)

- Add finishedLoading event (#2142)

- Recenter issue with a horizontal toolbox (#2036)

- Long press broken on Playground and Multi-Playground (#1955)

- field_label modified in dynamic category resets when dragged onto workspace (#1954)

- Flyout getMetrics causes a reflow and style recalculation (#1303)

Pull requests:

- Merge master into develop. July 2021 Release (#4981)

- Rc 2021 7 (#4976)

- Rebuild (#4975)

- Fix Jsdoc by removing trailing comma (#4974)

- Revert "Group field edits together for undo/redo" (#4965)

- Group field edits together for undo/redo (#4952)

- Remove deprecated build.py script (#4951)

- Bump eslint from 7.28.0 to 7.29.0 (#4949)

- Bump google-closure-deps from 20210406.0.0 to 20210601.0.0 (#4947)

- Bump selenium-standalone from 6.23.0 to 7.1.0 (#4946)

- Bump @blockly/theme-modern from 2.1.17 to 2.1.18 (#4944)

- Bump @blockly/dev-tools from 2.3.0 to 2.4.0 (#4936)

- Fix escape key on all fields. (#4934)

- Fixed bug that prevented delete areas from updating when flyout width changed. (#4927)

- Honour option for collapse in context menu (#4926)

- Prevent an error beep when copying blocks in Safari. (#4925)

- Don’t hide insertion marker if it’s already gone (#4922)

- Fixes workspace scroll bug (#4921)

- Use captureWarning helper from dev-tools instead of mocha/test_helpers.js implementation (#4920)

- Update toolbox drag target when visibility changes (#4919)

- Add msg files to develop (#4918)

- Revert #4697 (#4917)

- Remove return value from Field dropdownCreate_ (#4915)

- Updated user agent parsing to detect iPads posing as desktop Safari. (#4911)

- Update positionable jsdoc (#4908)

- Update JsDoc for IDragTarget (#4907)

- Use selenium-standalone-service to automatically start and stop Selenium when running the test suite. (#4906)

- Creates `getLocationAfterMove` in BlockDragger (#4905)

- Remove extra space in generator error message. (#4904)

- CI updates: bump node, prepare to reenable macOS (#4903)

- Fix bug in Flyout getClientRect (#4901)

- Update the registered component ids (#4898)

- Revert bubble dragger logic change and helper name change (#4897)

- Moves toolbox cursor styling out of block_dragger (#4896)

- Fixes block dragger after merge (#4895)

- Add a clone method to Coordinate (#4894)

- Block drag (#4893)

- Adding parameter to dragEnter and dragExit (#4890)

- Fix bug with updating cursor style in draggers (#4889)

- Add onDragOver and wouldDelete_ to DeleteArea (#4888)

- Add id to component interface (#4887)

- Add API to IDragTarget to prevent block move (#4886)

- Prevent unecessary add/remove class calls on cursor during drag (#4885)

- Add removeComponent to ComponentManager (#4884)

- Refactor connect logic (#4880)

- Use null-prototype objects for maps (#4879)

- Fix removal of spaces near parens inside strings (#4878)

- Fix error caused by extra teardown call (#4877)

- Fix #4830 for getting/setting unnamed fields (#4876)

- ComponentManager API extension (#4875)

- Remove row healing for block deletion #4832 (#4873)

- Fixes a check in bump into bounds (#4872)

- Use String() over toLocaleString when possible (#4870)

- Bump @blockly/block-test from 1.0.14 to 1.1.0 (#4869)

- Bump @blockly/dev-tools from 2.3.0 to 2.3.1 (#4868)

- Update chrome version (#4866)

- Code simplifications (#4865)

- Fix drag surface (#4863)

- Bump @blockly/theme-modern from 2.1.16 to 2.1.17 (#4862)

- Bump @blockly/theme-dark from 1.0.6 to 1.0.7 (#4861)

- Bump eslint from 7.26.0 to 7.27.0 (#4860)

- Bump ws from 7.2.3 to 7.4.6 (#4858)

- Rename PluginManager and related elements (#4857)

- Handle overriding components in ComponentManager (#4856)

- Add support for IAutoHideable (#4855)

- Add tests for connecting blocks (#4853)

- Adding IDragTarget support. (#4852)

- Change lastConnectionInRow to getPlaceForOrphanedOutput - Take 2 (#4851)

- Revert "Change lastConnectionInRow to getPlaceForOrphanedOutput" (#4850)

- Remove useless variable declarations in PHP. (#4849)

- Bump jsdom from 15.2.1 to 16.6.0 (#4846)

- Rename Blockly..variableDB_ to .nameDB_ and add .nameDB_.getUserNames('VARIABLE') and .nameDB_.getUserNames('PROCEDURE') (#4845)

- Adds a getter for the block dragger (#4844)

- Add scroll delta to block dragger (#4843)

- Update block dragger (#4842)

- Updates block drag surface (#4841)

- Non-functional cleanup (#4840)

- Bump webdriverio from 7.5.7 to 7.6.0 (#4839)

- Bump @blockly/dev-tools from 2.2.1 to 2.3.0 (#4838)

- Bump @blockly/block-test from 1.0.13 to 1.0.14 (#4837)

- Bump @blockly/theme-modern from 2.1.15 to 2.1.16 (#4836)

- Bump @blockly/theme-dark from 1.0.5 to 1.0.6 (#4835)

- Bump google-closure-compiler from 20210406.0.0 to 20210505.0.0 (#4834)

- Bump eslint from 7.25.0 to 7.26.0 (#4833)

- Change lastConnectionInRow to getPlaceForOrphanedOutput (#4831)

- Register block dragger (#4828)

- Bump hosted-git-info from 2.8.4 to 2.8.9 (#4819)

- Bump lodash from 4.17.19 to 4.17.21 (#4817)

- Bump concurrently from 6.0.2 to 6.1.0 (#4816)

- Bump webdriverio from 7.5.3 to 7.5.7 (#4815)

- Bump mocha from 8.3.2 to 8.4.0 (#4814)

- Bump gulp-replace from 1.1.2 to 1.1.3 (#4813)

- Add positioning helpers for trashcan and zoom controls (#4807)

- Bump yargs from 16.2.0 to 17.0.0 (#4806)

- Bump gulp-replace from 1.1.1 to 1.1.2 (#4805)

- Bump webdriverio from 7.5.1 to 7.5.3 (#4804)

- Bump eslint from 7.23.0 to 7.25.0 (#4802)

- Bump webdriverio from 7.4.6 to 7.5.1 (#4801)

- Bump @blockly/block-test from 1.0.12 to 1.0.13 (#4800)

- Bump gulp-replace from 1.0.0 to 1.1.1 (#4799)

[Licorne Magique]

Hello,

great new that release !!! Many thanks for all your work.

But I cannot access, with your link, to the backpack plugin and the scroll plugin.

Regards.

[Abby Schmiedt]

Hello!

The scroll plugin is coming soon, so the link to npm is not quite ready yet. The code can be found in the blockly samples repo if you are interested. I just tested the backpack plugin link and it looks like it is working now, so it might have just taken a few minutes to upload to npm.

Let us know if you have any other problems. 

Cheers, 

Abby

[Jonty Small]

Hi all,

I really like the backpack! (I actually saw it on saturday night and almost went straight to my pc to implement it because i thought it looked so cool, then i realised it was already midnight)

Implementing it was super easy too so great job there!

One thing that i've noticed though, is if you have a set of blocks wider than your screen it can mess with the backpack. Is there a simple way to add a horizontal scrollbar to the bar?
Perhaps it might be good to have the plugin detect if the added blocks are too wide and then you get a sidescrolling bar?

(I hope the images demonstrate what i mean, i'm happy to elaborate more if thats not clear)

Another problem that may be very specific to our project. The setup bot block in the screenshot is meant to be unique in our system. Its autoloaded, undeletable and uncopyable and you can't add it from the sidebar. Is there a way to define certain blocks as "unbackpackable" (not sure what the word here would be here). For clarification the reason we have that block is so we can force our users to have only one "chunk" and only run blocks connected to that. A really nice implementation would be that if you try to add an "unbackpackable" block it adds all its children but not itself (and others like it) but i realise that is probably asking too much

Overall though, its super slick, super clear and I really like it! I'm also really looking forward to the scroll plugin you're working on!

Best,

Jonty

[Beka Westberg]

Hi Jonty! Thank you for trying out the new plugin :D We really appreciate the feedback!

> One thing that i've noticed though, is if you have a set of blocks wider than your screen it can mess with the backpack. Is there a simple way to add a horizontal scrollbar to the bar?

Perhaps it might be good to have the plugin detect if the added blocks are too wide and then you get a sidescrolling bar?

Ah yeah I think the trashcan has that issue too :/ I can't remember if flyouts currently support horizontal scroll bars, but that's definitely something to look in to! I'll file some issues for it =) Thank you for reporting!

> Is there a way to define certain blocks as "unbackpackable"?

I think the way you would do that is by creating your own subclass that overrides the public onDrop method or maybe the addBlock method. So if it detects a someone trying to backpack your un-backpack-able block it would add all of the children instead of adding the block itself. Monica may have a different/better recommendation though hehe.

But it would be cool to have a way to define this more easily (since I think it's a common use case). If you have time, it might be worth it to put in a feature request for that =)

> I'm also really looking forward to the scroll plugin you're working on!

Same! You can see a screen recording of it here. It looks super cool :D

Thank you again for trying out the new stuff!

--Beka

[koz...@google.com]

Hey Jonty! and thanks Beka.

I'm excited to hear about people trying out the new Backpack plugin.

Re: vertical and horizontal scrollbar support. There's isn't currently a way to do easily do that. The backpack uses either VerticalFlyout or HorizontalFlyout from core which do not support both scrollbars. There is a similar issue with the Trashcan as Beka mentioned.

I think it's a reasonable feature request to ask for in the Backpack plugin to support for scrolling in both directions and setting a max width/height for these kinds of cases. It may require some changes in core.

Re:  "unbackpackable", I agree with Beka on the subclassing.

As for where to add the logic for checking and only adding children of "unbackpackable" blocks, I would add it to the addBlock method. That method is called by the context menu option for adding a block to the backpack and is also called by the onDrop method.

Thanks for the feedback!

~ Monica

[Johnny Oshika]

Congratulations to the community on another release and thanks Beka for the great release notes.