Blockly v12: Core Updates, Refreshed Docs & Summit Details Inside

[Blockly Team]

May 2025 Update

Blockly v12: Core Updates, Refreshed Docs & Summit Details Inside

Blockly v12.0.0 is here, and it's a big one! The team first started working on this release almost a year ago, so it's packed with new features and improvements. Our main goal with this release is to improve the accessibility of Blockly, in conjunction with our brand new keyboard-navigation plugin. Read more below!

Get it on GitHub ↗︎

v12 Release Highlights

• Revamped focus and handling selected items to be compatible with browser focus and enable keyboard navigation. This is most likely to require your attention if you have custom elements that should be keyboard navigable or if you ever set tabstops manually on Blockly components

• Added many new css classes (and changed a few pre-existing ones) to make styling of various Blockly components easier without having to use themes

• Added support for arbitrary flyout contents with custom FlyoutInflaters

• Removed the ASTNode class and some other pieces related to keyboard navigation. Check out the new experience in the keyboard-navigation experiment instead

• Added ability to register context menu items on basically any Blockly component that is selectable. Read more in our docs

• Added support for HTMLElements in FieldDropdown options. You can now create options that use both images and text, for example

Accessibility Highlights

Blockly v12 enables a new keyboard-accessible experience when coupled with our new keyboard-navigation plugin. The plugin is currently in beta in the blockly-keyboard-experimentation repo, and will be released as @blockly/keyboard-navigation v1.0.0 in a few weeks. We'll post an update on the blockly-announce group when it's released!

This also marks a major stepping stone toward screenreader-compatibility, which the team will continue working towards through Q2-Q3 of this year.

Learn more

Blockly Samples

Our plugins have also been updated to be compatible with Blockly v12. As a reminder, all plugins also get a new major version when we update their minimum required version of Blockly. Be sure to update any plugins you use at the same time you update Blockly.

Documentation updates

Over the past six months, we've reviewed and refactored the developer guides. We've added sections for design and programming considerations, rewritten complex topics like Localization and Block-code generators, added new topics like Anatomy of a block, split up overly large topics like Define blocks, and fixed many minor bugs.

Feedback

If you find any problems with this release, please open an issue. If you try out the new keyboard-navigation experience and have feedback, consider joining our blockly-accessibility@ group to discuss. As always, we welcome PR contributions as well, especially on issues marked help wanted!

Meet us at Blockly Summit 2025

Join us in-person in Seattle at the Google South Lake Union Office on June 3-4 for technical talks, product demos, research insights and more.

Apply to attend

You're receiving this email because you're subscribed to the Blockly Community Google Group. To stop receiving these emails, update your membership settings.

© 2025 Google LLC 1600 Amphitheatre Parkway, Mountain View, CA 94043

[Max Stephen Russell]

I was thinking updates come through automatically when Blockly has been installed with NPM. Is that true or not true?

Thanks.

Steve Russell

[Mark Friedman]

It's complicated ;-). It all depends on how, exactly, you have specified the Blockly dependency in your package.json file.  The "semver" language used by npm to specify dependencies allows you to specify a variety of constraints on what version(s) of a package you want to be installed (via npm install) and what happens if you ask for your package(s) to be updated (via npm update).  Here is the npm doc page that talks about it.  Here is a description provided by Google's Gemini AI (so understand that it might not be totally correct):

In npm, version dependency constraints define the acceptable range of versions for a package's dependencies, ensuring compatibility and stability. They're typically specified in the package.json file using symbols like ^ (caret), ~ (tilde), <, >, =, and ranges. These symbols indicate whether the dependency should be updated to a minor, patch, or major version, or if it should be restricted to a specific range. 

Elaboration:

• Semantic Versioning (SemVer):

  npm uses the SemVer (major.minor.patch) versioning scheme to express dependency constraints. This scheme helps understand the extent of changes in a given version. 
• Version Range Operators:

  • ^ (caret): Indicates a minor version update. For example, ^1.2.3 means the dependency should be a version greater than or equal to 1.2.3 and less than 2.0.0 (e.g., 1.2.4, 1.3.0 are allowed). 
  • ~ (tilde): Indicates a patch version update. For example, ~1.2.3 means the dependency should be a version greater than or equal to 1.2.3 and less than 1.3.0 (e.g., 1.2.4 is allowed). 
  • <, >, =, !=: Used for specifying less than, greater than, equal to, and not equal to versions, respectively. 
  • -: Specifies a range of versions (e.g., 1.0.0-1.10.10 allows versions between 1.0.0 and 1.10.10, inclusive). 
  • ||: Allows for multiple version ranges (e.g., <2.1.0 || >2.6.0 allows versions less than 2.1.0 or greater than 2.6.0). 
• Exact Version:

  You can also specify an exact version, such as 1.2.3, which means only that specific version is allowed. 
• Purpose of Constraints:

  Version constraints ensure that a project uses compatible versions of its dependencies, preventing unexpected behavior due to breaking changes in dependency versions.

-Mark

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/blockly/3adbe329-58b6-4102-b60a-99d92878f4c2n%40googlegroups.com.

[Max Stephen Russell]

Thanks for the good information, Mark.

-Steve