v12.0.0

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!

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 @blockly/keyboard-navigation plugin 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 Improvements

Blockly v12 enables a new keyboard-accessible experience when coupled with our new keyboard-navigation plugin.

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 about our accessibility roadmap

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.

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!

What's Changed

Breaking changes 🛠

• feat!: Add support for preserving block comment locations. by @gonfunko in https://github.com/google/blockly/pull/8231
• fix!: rename the blockly icon CSS classes to use camelCase (#8329) by @ga-fleury in https://github.com/google/blockly/pull/8335
• fix!: Make IPathObject styling methods optional by @shashwatpathak98 in https://github.com/google/blockly/pull/8332
• fix!: Rename blocklyTreeRow and blocklyToolboxCategory CSS classes by @Abhinav-Chdhary in https://github.com/google/blockly/pull/8357
• fix!: renamed blocklyTreeIcon Css class to blocklyToolboxCategoryIcon #8347 by @krishchvn in https://github.com/google/blockly/pull/8367
• fix!: Replace Closure UI CSS classes with Blockly CSS classes by @Arun-cn in https://github.com/google/blockly/pull/8339
• fix!: rename blocklyToolboxContents to blocklyToolboxCategoryGroup by @ruthwikchikoti in https://github.com/google/blockly/pull/8384
• refactor!: Use IVariableMap instead of VariableMap by @gonfunko in https://github.com/google/blockly/pull/8401
• fix!: Rename editing CSS class to blocklyEditing (#8287) by @ga-fleury in https://github.com/google/blockly/pull/8301
• fix!: use :focus pseudo class instead of blocklyFocused by @Skye967 in https://github.com/google/blockly/pull/8360
• fix!: Redundant blockly non selectable #8328 by @dakshkanaujia in https://github.com/google/blockly/pull/8433
• fix!: Rename blocklyTreeIconOpen to blocklyToolboxCategoryIconOpen by @UtkershBasnet in https://github.com/google/blockly/pull/8440
• fix!: Renamed the blocklyTreeSelected CSS class to blocklyToolboxSelected by @omwagh28 in https://github.com/google/blockly/pull/8459
• fix!: deleted styles without associated classes from css.ts, issue #8285 by @aishwaryavenkatesan in https://github.com/google/blockly/pull/8465
• feat!: change blocklyEditableText to blocklyEditableField and blocklyNonEditableText to blocklyNonEditableField by @Adityajaiswal03 in https://github.com/google/blockly/pull/8475
• fix!: Remove the blocklyMenuItemHighlight CSS class and use the hover by @Arun-cn in https://github.com/google/blockly/pull/8536
• refactor!: Update flyouts to use inflaters. by @gonfunko in https://github.com/google/blockly/pull/8601
• refactor!: Remove the InsertionMarkerManager. by @gonfunko in https://github.com/google/blockly/pull/8649
• refactor!: Improve ability to use CSS to style Blockly. by @gonfunko in https://github.com/google/blockly/pull/8647
• feat!: Use CSS to specify field cursors. by @gonfunko in https://github.com/google/blockly/pull/8648
• refactor!: Use one map for toolbox contents. by @gonfunko in https://github.com/google/blockly/pull/8654
• refactor!: Add setSelectedItem() to IToolbox. by @gonfunko in https://github.com/google/blockly/pull/8650
• refactor!: Use JSON instead of XML for defining dynamic toolbox categories. by @gonfunko in https://github.com/google/blockly/pull/8658
• fix!: Don't add padding around zero-width fields. by @gonfunko in https://github.com/google/blockly/pull/8738
• fix: Fixes #8764 by moving the event grouping calls up to dragger.ts by @RoboErikG in https://github.com/google/blockly/pull/8781
• feat!: Added support for separators in menus. by @gonfunko in https://github.com/google/blockly/pull/8767
• refactor!: Remove old cursor and tab support. by @gonfunko in https://github.com/google/blockly/pull/8803
• fix!: Tighten and correct typings on ASTNode by @gonfunko in https://github.com/google/blockly/pull/8835
• refactor!: Backport LineCursor to core. by @gonfunko in https://github.com/google/blockly/pull/8834
• fix!: change css class for disabled block pattern by @maribethb in https://github.com/google/blockly/pull/8864
• feat!: deprecate scopeType and include focusedNode in context menu options by @maribethb in https://github.com/google/blockly/pull/8882
• refactor!: Finish refactor of WorkspaceSvg VariableMap methods by @cpcallen in https://github.com/google/blockly/pull/8946
• feat!: add scope to keyboard shortcuts and use it by @maribethb in https://github.com/google/blockly/pull/8917
• fix!: Remove alt+key commands by @RoboErikG in https://github.com/google/blockly/pull/8961
• refactor!: Use navigation rulesets instead of ASTNode to control keyboard navigation. by @gonfunko in https://github.com/google/blockly/pull/8992
• fix!: remove MarkerSvg and uses by @rachel-fenichel in https://github.com/google/blockly/pull/8991
• fix!: delete marker move event and tests by @rachel-fenichel in https://github.com/google/blockly/pull/9013
• fix!: delete ASTNode and references by @rachel-fenichel in https://github.com/google/blockly/pull/9014
• fix!: delete IASTNodeLocation and friends by @rachel-fenichel in https://github.com/google/blockly/pull/9015
• feat!: Make everything ISelectable focusable by @BenHenning in https://github.com/google/blockly/pull/9004
• fix!: remove deprecated setEnabled and backwards event filtering by @maribethb in https://github.com/google/blockly/pull/9039
• fix!: deepMerge for arrays, shortcut keycodes returned as array by @maribethb in https://github.com/google/blockly/pull/9047

New features ✨

• feat: Add blocklyField to field's SVG Group by @nullHawk in https://github.com/google/blockly/pull/8334
• feat: Add a blocklyFieldText CSS class to fields' text elements (#8291) by @ga-fleury in https://github.com/google/blockly/pull/8302
• feat: Add a blocklyVariableField CSS class to variable fields by @shashwatpathak98 in https://github.com/google/blockly/pull/8359
• feat: add the IVariableMap and IVariableModel interfaces. by @gonfunko in https://github.com/google/blockly/pull/8369
• feat: Add a blocklyTextBubble CSS class to the text bubble #8331 by @Nirmalkumar6112 in https://github.com/google/blockly/pull/8333
• feat: Add a blocklyShadow class by @devesh-2002 in https://github.com/google/blockly/pull/8336
• feat: Added blocklyTrashcanFlyout CSS class by @ChaitanyaYeole02 in https://github.com/google/blockly/pull/8372
• feat: Add css classes from json block definitions by @ishon19 in https://github.com/google/blockly/pull/8377
• feat: Add blocklyToolboxFlyout CSS class to the flyout by @nullHawk in https://github.com/google/blockly/pull/8386
• feat: Add a blocklyCollapsed CSS class to collapsed blocks' root SVG (#8264) by @ga-fleury in https://github.com/google/blockly/pull/8308
• feat: Add a blocklyBlock CSS class to the block's root SVG by @ChaitanyaYeole02 in https://github.com/google/blockly/pull/8397
• feat: add blocklyMiniWorkspaceBubble css class by @ishon19 in https://github.com/google/blockly/pull/8390
• feat: Add a blocklyNotEditable CSS class to the block's root SVG by @dianaPrahoveanu-SL in https://github.com/google/blockly/pull/8391
• feat: Add a VarTypeChange event. by @gonfunko in https://github.com/google/blockly/pull/8402
• feat: added blocklyNotDetetable class to block_svg by @Shreshthaaa in https://github.com/google/blockly/pull/8406
• feat: add the block's type as a CSS class to the block's root SVG by @CodeMaverick2 in https://github.com/google/blockly/pull/8428
• feat: add blocklyLabelField css class to label field by @surajguduru in https://github.com/google/blockly/pull/8423
• feat: Add a blocklyNumberField CSS class to number fields by @Apocalypse96 in https://github.com/google/blockly/pull/8414
• feat: add a method for subclasses of FieldVariable to get the default type. by @gonfunko in https://github.com/google/blockly/pull/8453
• feat: added block's style as a CSS class to block's root SVG by @Shreshthaaa in https://github.com/google/blockly/pull/8436
• feat: implement WorkspaceSvg class manipulation by @UCYT5040 in https://github.com/google/blockly/pull/8473
• feat: added blocklyHighlighted CSS class to highlighted block's root… by @Shreshthaaa in https://github.com/google/blockly/pull/8407
• feat: Add the IFlyoutInflater interface. by @gonfunko in https://github.com/google/blockly/pull/8581
• feat: Add inflaters for flyout labels and buttons. by @gonfunko in https://github.com/google/blockly/pull/8593
• feat: Add support for inflating flyout separators. by @gonfunko in https://github.com/google/blockly/pull/8592
• feat: Add a BlockFlyoutInflater class. by @gonfunko in https://github.com/google/blockly/pull/8591
• feat: Allow specifying the placeholder text of workspace comments. by @gonfunko in https://github.com/google/blockly/pull/8608
• feat: Allow specifying the default size of comments. by @gonfunko in https://github.com/google/blockly/pull/8618
• feat: Allow customizing GRID_UNIT for the Zelos renderer. by @gonfunko in https://github.com/google/blockly/pull/8636
• feat: Warn if a variable category is loaded without variable blocks. by @gonfunko in https://github.com/google/blockly/pull/8704
• feat: Add a generator for all fields on a block. by @gonfunko in https://github.com/google/blockly/pull/8667
• feat: Add support for toggling readonly mode. by @gonfunko in https://github.com/google/blockly/pull/8750
• feat: Add interfaces for focus management by @BenHenning in https://github.com/google/blockly/pull/8774
• feat: Add a method for creating flyout options by @RoboErikG in https://github.com/google/blockly/pull/8829
• feat: make getNextNode and getPreviousNode public by @rachel-fenichel in https://github.com/google/blockly/pull/8859
• feat: Introduce FocusManager implementation by @BenHenning in https://github.com/google/blockly/pull/8814
• feat: add shouldHealStack method by @rachel-fenichel in https://github.com/google/blockly/pull/8872
• feat: add getSearchRadius to BlockDragStrategy by @rachel-fenichel in https://github.com/google/blockly/pull/8871
• feat: make block and workspace implement IContextMenu by @maribethb in https://github.com/google/blockly/pull/8876
• feat: add getFirstNode and getLastNode to cursor with tests by @rachel-fenichel in https://github.com/google/blockly/pull/8878
• feat: support menuOpenEvent, menuSelectEvent, location for context menu items by @maribethb in https://github.com/google/blockly/pull/8877
• feat: add loopback in cursor navigation, and add tests by @rachel-fenichel in https://github.com/google/blockly/pull/8883
• feat: menuOpenEvent, menuSelectEvent, and location for context menu items by @maribethb in https://github.com/google/blockly/pull/8891
• feat: Add support for retrieving blocks' drag strategies. by @gonfunko in https://github.com/google/blockly/pull/8893
• feat: Allow for HTML elements in dropdown field menus. by @gonfunko in https://github.com/google/blockly/pull/8889
• feat: show context menu for connections by @maribethb in https://github.com/google/blockly/pull/8895
• Feature: Add a dropdown options setter by @RoboErikG in https://github.com/google/blockly/pull/8833
• feat: Add support for displaying toast-style notifications. by @gonfunko in https://github.com/google/blockly/pull/8896
• feat!: Introduce new focus tree/node functions. by @BenHenning in https://github.com/google/blockly/pull/8909
• feat: Make WorkspaceSvg and BlockSvg focusable by @BenHenning in https://github.com/google/blockly/pull/8916
• feat: Make toolbox and flyout focusable by @BenHenning in https://github.com/google/blockly/pull/8920
• feat: Make WorkspaceSvg and BlockSvg focusable (roll forward) by @BenHenning in https://github.com/google/blockly/pull/8938
• feat: Make toolbox and flyout focusable (roll forward) by @BenHenning in https://github.com/google/blockly/pull/8939
• feat: Make fields focusable by @BenHenning in https://github.com/google/blockly/pull/8923
• feat: Make connections focusable by @BenHenning in https://github.com/google/blockly/pull/8928
• feat: Update line cursor to use focus manager by @BenHenning in https://github.com/google/blockly/pull/8941
• feat(WorkspaceSvg): Add support for tracking keyboard moves by @cpcallen in https://github.com/google/blockly/pull/8959
• feat(WorkspaceSvg): Ignore gestures when keyboard move in progress by @cpcallen in https://github.com/google/blockly/pull/8963
• feat: Allow conditioned ephemeral access for drop-down & widget divs by @BenHenning in https://github.com/google/blockly/pull/9051
• Added blocklyImageField CSS class to image fields by @vexora-0 in https://github.com/google/blockly/pull/8439

Bug fixes 🐛

• fix: Remove references to getFastTextWidth (#8277) by @ga-fleury in https://github.com/google/blockly/pull/8307
• fix: improve prompting when deleting variables by @gonfunko in https://github.com/google/blockly/pull/8529
• fix: display the correct variable reference count when deleting a variable. by @gonfunko in https://github.com/google/blockly/pull/8549
• fix: improve flyout performance by @gonfunko in https://github.com/google/blockly/pull/8571
• fix: size text with computed styles even when hidden by @gonfunko in https://github.com/google/blockly/pull/8572
• fix: include potential variables in variable dropdowns in the flyout by @gonfunko in https://github.com/google/blockly/pull/8574
• fix: Fix bug that prevented dismissing the widgetdiv in a mutator workspace. by @gonfunko in https://github.com/google/blockly/pull/8600
• fix: Fix bug that caused fields in the flyout to use the main workspace's scale. by @gonfunko in https://github.com/google/blockly/pull/8607
• fix: Correctly calculate the bounds of hat blocks. by @gonfunko in https://github.com/google/blockly/pull/8616
• fix: Take the flyout into account when positioning the workspace after a toolbox change. by @gonfunko in https://github.com/google/blockly/pull/8617
• fix: Fix exception when disposing of a workspace with a variable block obscuring a shadow block. by @gonfunko in https://github.com/google/blockly/pull/8619
• fix: improve typings and export additional types by @gonfunko in https://github.com/google/blockly/pull/8631
• fix: Create CSS vars for SVG patterns. by @johnnesky in https://github.com/google/blockly/pull/8671
• fix: Fix unsafe cast in Input.setVisible(). by @gonfunko in https://github.com/google/blockly/pull/8695
• fix: Don't create intermediate variables when renaming a procedure argument. by @gonfunko in https://github.com/google/blockly/pull/8723
• fix: Fix bug that prevented keyboard navigation in flyouts. by @gonfunko in https://github.com/google/blockly/pull/8687
• fix: Fix bug that caused blocks dragged from non-primary flyouts to be misplaced. by @gonfunko in https://github.com/google/blockly/pull/8753
• fix: Disallow and ignore x and y attributes for blocks in toolbox definitions. by @gonfunko in https://github.com/google/blockly/pull/8785
• fix: Allow the marker's current node to be null. by @gonfunko in https://github.com/google/blockly/pull/8802
• fix: fix bug that modalInputs option is not working in toolbox area by @zhiyan in https://github.com/google/blockly/pull/8817
• fix: check potential variables for flyout variable fields by @maribethb in https://github.com/google/blockly/pull/8873
• fix: update dependencies so adv compilation works by @maribethb in https://github.com/google/blockly/pull/8890
• fix: Don't visit invisible inputs with the cursor. by @gonfunko in https://github.com/google/blockly/pull/8892
• fix: Fix keyboard-driven menu scrolling. by @gonfunko in https://github.com/google/blockly/pull/8881
• fix: Fix bug that allowed some invisible fields/inputs to be navigated to. by @gonfunko in https://github.com/google/blockly/pull/8899
• fix: Fix bug that caused flyout items under the mouse to be selected without movement. by @gonfunko in https://github.com/google/blockly/pull/8900
• fix: Recreate the dropdowndiv when clearing it. by @gonfunko in https://github.com/google/blockly/pull/8903
• fix: Add some missing message strings. by @gonfunko in https://github.com/google/blockly/pull/8908
• Fix: Remove the collapsed block warning when expanding a block by @RoboErikG in https://github.com/google/blockly/pull/8854
• fix: LineCursor can loop forward, but not back by @microbit-grace in https://github.com/google/blockly/pull/8926
• fix: Support RTL in WorkspaceSvg.scrollIntoBounds by @RoboErikG in https://github.com/google/blockly/pull/8936
• fix: Fix bug in BlockSvg.prototype.setParent by @cpcallen in https://github.com/google/blockly/pull/8934
• fix: remove black outline on focused items by @rachel-fenichel in https://github.com/google/blockly/pull/8951
• fix: Fix conventional auto labeling by @BenHenning in https://github.com/google/blockly/pull/8956
• fix: Address remaining invisible input positions by @microbit-robert in https://github.com/google/blockly/pull/8948
• fix: Ensure flyout remains open after creating a variable with mouse by @BenHenning in https://github.com/google/blockly/pull/8982
• fix: Synchronize gestures and focus by @BenHenning in https://github.com/google/blockly/pull/8981
• fix: focus for autohideable flyouts by @maribethb in https://github.com/google/blockly/pull/8990
• fix: Replace explicit calls to refreshToolboxSelection with a workspace listener by @RoboErikG in https://github.com/google/blockly/pull/8980
• fix: Add private to variableChangeCallback by @RoboErikG in https://github.com/google/blockly/pull/8995
• fix: use copyable interface for cut action, add tests by @maribethb in https://github.com/google/blockly/pull/8993
• fix: Improve missing node resiliency by @BenHenning in https://github.com/google/blockly/pull/8997
• fix: Don't fire events for changes to potential variables by @RoboErikG in https://github.com/google/blockly/pull/9025
• fix: Improve robustness of IFocusableNode uses by @BenHenning in https://github.com/google/blockly/pull/9031
• fix: don't visit connections with the cursor. by @gonfunko in https://github.com/google/blockly/pull/9030
• fix: Fix regressions in Field. by @gonfunko in https://github.com/google/blockly/pull/9011
• fix: Ensure selection stays when dragging blocks, comments, and bubbles by @BenHenning in https://github.com/google/blockly/pull/9034
• fix: Ensure BlockSvg is uniquely focusable on the page by @BenHenning in https://github.com/google/blockly/pull/9045
• fix: Ensure cursor syncs with more than just focused blocks by @BenHenning in https://github.com/google/blockly/pull/9032
• fix: Reenable support for tabbing between fields. by @gonfunko in https://github.com/google/blockly/pull/9049
• fix: fieldDropdown.getText works in node by @maribethb in https://github.com/google/blockly/pull/9048
• fix: Fix bug when referencing HTMLElement in non-browser environments. by @gonfunko in https://github.com/google/blockly/pull/9050
• fix: Remove un-typesafe cast. by @gonfunko in https://github.com/google/blockly/pull/9052
• fix: Make clickable but non-editable fields navigable. by @gonfunko in https://github.com/google/blockly/pull/9054

Cleanup ♻️

• refactor: field_checkbox dom.addClass params by @ishon19 in https://github.com/google/blockly/pull/8309
• refactor: Add addClass and removeClass methods to blockSvg by @ishon19 in https://github.com/google/blockly/pull/8337
• refactor: make VariableModel implement IVariableModel. by @gonfunko in https://github.com/google/blockly/pull/8381
• refactor: update the variable interfaces. by @gonfunko in https://github.com/google/blockly/pull/8388
• refactor: make VariableMap implement IVariableMap. by @gonfunko in https://github.com/google/blockly/pull/8395
• refactor: Use IVariableModel instead of VariableModel. by @gonfunko in https://github.com/google/blockly/pull/8400
• refactor: clean up VariableModel. by @gonfunko in https://github.com/google/blockly/pull/8416
• refactor: deprecate and clean up variable-related methods. by @gonfunko in https://github.com/google/blockly/pull/8415
• refactor: use getters for flyout width and height. by @gonfunko in https://github.com/google/blockly/pull/8564
• refactor: remove redundant flyout positioning. by @gonfunko in https://github.com/google/blockly/pull/8573
• refactor: Reenable workspace resizing after reflowing flyouts. by @gonfunko in https://github.com/google/blockly/pull/8683
• refactor: Convert renderer typecheck methods to typeguards. by @gonfunko in https://github.com/google/blockly/pull/8656
• refactor: make CommentView more amenable to subclassing. by @gonfunko in https://github.com/google/blockly/pull/8783
• refactor: Make INavigable extend IFocusableNode. by @gonfunko in https://github.com/google/blockly/pull/9033
• refactor: Remove INavigable in favor of IFocusableNode. by @gonfunko in https://github.com/google/blockly/pull/9037

Reverted changes ⎌

• Revert "fix!: Remove the blocklyMenuItemHighlight CSS class and use the hover" by @gonfunko in https://github.com/google/blockly/pull/8800
• Fix: Revert focus prs by @RoboErikG in https://github.com/google/blockly/pull/8933

New Contributors

• @ishon19 made their first contribution in https://github.com/google/blockly/pull/8309
• @ga-fleury made their first contribution in https://github.com/google/blockly/pull/8335
• @nullHawk made their first contribution in https://github.com/google/blockly/pull/8334
• @shashwatpathak98 made their first contribution in https://github.com/google/blockly/pull/8332
• @Abhinav-Chdhary made their first contribution in https://github.com/google/blockly/pull/8357
• @Nirmalkumar6112 made their first contribution in https://github.com/google/blockly/pull/8333
• @devesh-2002 made their first contribution in https://github.com/google/blockly/pull/8336
• @krishchvn made their first contribution in https://github.com/google/blockly/pull/8367
• @Arun-cn made their first contribution in https://github.com/google/blockly/pull/8339
• @ChaitanyaYeole02 made their first contribution in https://github.com/google/blockly/pull/8372
• @ruthwikchikoti made their first contribution in https://github.com/google/blockly/pull/8384
• @dianaPrahoveanu-SL made their first contribution in https://github.com/google/blockly/pull/8391
• @Skye967 made their first contribution in https://github.com/google/blockly/pull/8360
• @vexora-0 made their first contribution in https://github.com/google/blockly/pull/8439
• @dakshkanaujia made their first contribution in https://github.com/google/blockly/pull/8433
• @Shreshthaaa made their first contribution in https://github.com/google/blockly/pull/8406
• @CodeMaverick2 made their first contribution in https://github.com/google/blockly/pull/8428
• @surajguduru made their first contribution in https://github.com/google/blockly/pull/8423
• @UtkershBasnet made their first contribution in https://github.com/google/blockly/pull/8440
• @Apocalypse96 made their first contribution in https://github.com/google/blockly/pull/8414
• @omwagh28 made their first contribution in https://github.com/google/blockly/pull/8459
• @aishwaryavenkatesan made their first contribution in https://github.com/google/blockly/pull/8465
• @Adityajaiswal03 made their first contribution in https://github.com/google/blockly/pull/8475
• @zhiyan made their first contribution in https://github.com/google/blockly/pull/8817
• @microbit-grace made their first contribution in https://github.com/google/blockly/pull/8926
• @microbit-robert made their first contribution in https://github.com/google/blockly/pull/8948

Full Changelog: https://github.com/google/blockly/compare/blockly-v11.2.2...blockly-v12.0.0