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
FlyoutInflater
s - 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
HTMLElement
s inFieldDropdown
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. 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 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 #8231
- fix!: rename the blockly icon CSS classes to use camelCase (#8329) by @ga-fleury in #8335
- fix!: Make
IPathObject
styling methods optional by @shashwatpathak98 in #8332 - fix!: Rename
blocklyTreeRow
andblocklyToolboxCategory
CSS classes by @Abhinav-Chdhary in #8357 - fix!: renamed blocklyTreeIcon Css class to blocklyToolboxCategoryIcon #8347 by @krishchvn in #8367
- fix!: Replace Closure UI CSS classes with Blockly CSS classes by @Arun-cn in #8339
- fix!: rename
blocklyToolboxContents
toblocklyToolboxCategoryGroup
by @ruthwikchikoti in #8384 - refactor!: Use IVariableMap instead of VariableMap by @gonfunko in #8401
- fix!: Rename editing CSS class to blocklyEditing (#8287) by @ga-fleury in #8301
- fix!: use
:focus
pseudo class instead ofblocklyFocused
by @Skye967 in #8360 - fix!: Redundant blockly non selectable #8328 by @dakshkanaujia in #8433
- fix!: Rename blocklyTreeIconOpen to
blocklyToolboxCategoryIconOpen
by @UtkershBasnet in #8440 - fix!: Renamed the blocklyTreeSelected CSS class to blocklyToolboxSelected by @omwagh28 in #8459
- fix!: deleted styles without associated classes from css.ts, issue #8285 by @aishwaryavenkatesan in #8465
- feat!: change blocklyEditableText to blocklyEditableField and blocklyNonEditableText to blocklyNonEditableField by @Adityajaiswal03 in #8475
- fix!: Remove the blocklyMenuItemHighlight CSS class and use the hover by @Arun-cn in #8536
- refactor!: Update flyouts to use inflaters. by @gonfunko in #8601
- refactor!: Remove the InsertionMarkerManager. by @gonfunko in #8649
- refactor!: Improve ability to use CSS to style Blockly. by @gonfunko in #8647
- feat!: Use CSS to specify field cursors. by @gonfunko in #8648
- refactor!: Use one map for toolbox contents. by @gonfunko in #8654
- refactor!: Add setSelectedItem() to IToolbox. by @gonfunko in #8650
- refactor!: Use JSON instead of XML for defining dynamic toolbox categories. by @gonfunko in #8658
- fix!: Don't add padding around zero-width fields. by @gonfunko in #8738
- fix: Fixes #8764 by moving the event grouping calls up to dragger.ts by @RoboErikG in #8781
- feat!: Added support for separators in menus. by @gonfunko in #8767
- refactor!: Remove old cursor and tab support. by @gonfunko in #8803
- fix!: Tighten and correct typings on ASTNode by @gonfunko in #8835
- refactor!: Backport LineCursor to core. by @gonfunko in #8834
- fix!: change css class for disabled block pattern by @maribethb in #8864
- feat!: deprecate scopeType and include focusedNode in context menu options by @maribethb in #8882
- refactor!: Finish refactor of
WorkspaceSvg
VariableMap
methods by @cpcallen in #8946 - feat!: add scope to keyboard shortcuts and use it by @maribethb in #8917
- fix!: Remove alt+key commands by @RoboErikG in #8961
- refactor!: Use navigation rulesets instead of ASTNode to control keyboard navigation. by @gonfunko in #8992
- fix!: remove MarkerSvg and uses by @rachel-fenichel in #8991
- fix!: delete marker move event and tests by @rachel-fenichel in #9013
- fix!: delete ASTNode and references by @rachel-fenichel in #9014
- fix!: delete IASTNodeLocation and friends by @rachel-fenichel in #9015
- feat!: Make everything ISelectable focusable by @BenHenning in #9004
- fix!: remove deprecated setEnabled and backwards event filtering by @maribethb in #9039
- fix!: deepMerge for arrays, shortcut keycodes returned as array by @maribethb in #9047
New features ✨
- feat: Add blocklyField to field's SVG Group by @nullHawk in #8334
- feat: Add a blocklyFieldText CSS class to fields' text elements (#8291) by @ga-fleury in #8302
- feat: Add a
blocklyVariableField
CSS class to variable fields by @shashwatpathak98 in #8359 - feat: add the IVariableMap and IVariableModel interfaces. by @gonfunko in #8369
- feat: Add a blocklyTextBubble CSS class to the text bubble #8331 by @Nirmalkumar6112 in #8333
- feat: Add a blocklyShadow class by @devesh-2002 in #8336
- feat: Added blocklyTrashcanFlyout CSS class by @ChaitanyaYeole02 in #8372
- feat: Add css classes from json block definitions by @ishon19 in #8377
- feat: Add blocklyToolboxFlyout CSS class to the flyout by @nullHawk in #8386
- feat: Add a blocklyCollapsed CSS class to collapsed blocks' root SVG (#8264) by @ga-fleury in #8308
- feat: Add a blocklyBlock CSS class to the block's root SVG by @ChaitanyaYeole02 in #8397
- feat: add
blocklyMiniWorkspaceBubble
css class by @ishon19 in #8390 - feat: Add a blocklyNotEditable CSS class to the block's root SVG by @dianaPrahoveanu-SL in #8391
- feat: Add a VarTypeChange event. by @gonfunko in #8402
- feat: added
blocklyNotDetetable
class to block_svg by @Shreshthaaa in #8406 - feat: add the block's type as a CSS class to the block's root SVG by @CodeMaverick2 in #8428
- feat: add
blocklyLabelField
css class to label field by @surajguduru in #8423 - feat: Add a blocklyNumberField CSS class to number fields by @Apocalypse96 in #8414
- feat: add a method for subclasses of FieldVariable to get the default type. by @gonfunko in #8453
- feat: added block's style as a CSS class to block's root SVG by @Shreshthaaa in #8436
- feat: implement
WorkspaceSvg
class manipulation by @UCYT5040 in #8473 - feat: added
blocklyHighlighted
CSS class to highlighted block's root… by @Shreshthaaa in #8407 - feat: Add the IFlyoutInflater interface. by @gonfunko in #8581
- feat: Add inflaters for flyout labels and buttons. by @gonfunko in #8593
- feat: Add support for inflating flyout separators. by @gonfunko in #8592
- feat: Add a BlockFlyoutInflater class. by @gonfunko in #8591
- feat: Allow specifying the placeholder text of workspace comments. by @gonfunko in #8608
- feat: Allow specifying the default size of comments. by @gonfunko in #8618
- feat: Allow customizing GRID_UNIT for the Zelos renderer. by @gonfunko in #8636
- feat: Warn if a variable category is loaded without variable blocks. by @gonfunko in #8704
- feat: Add a generator for all fields on a block. by @gonfunko in #8667
- feat: Add support for toggling readonly mode. by @gonfunko in #8750
- feat: Add interfaces for focus management by @BenHenning in #8774
- feat: Add a method for creating flyout options by @RoboErikG in #8829
- feat: make getNextNode and getPreviousNode public by @rachel-fenichel in #8859
- feat: Introduce FocusManager implementation by @BenHenning in #8814
- feat: add shouldHealStack method by @rachel-fenichel in #8872
- feat: add getSearchRadius to BlockDragStrategy by @rachel-fenichel in #8871
- feat: make block and workspace implement IContextMenu by @maribethb in #8876
- feat: add getFirstNode and getLastNode to cursor with tests by @rachel-fenichel in #8878
- feat: support menuOpenEvent, menuSelectEvent, location for context menu items by @maribethb in #8877
- feat: add loopback in cursor navigation, and add tests by @rachel-fenichel in #8883
- feat: menuOpenEvent, menuSelectEvent, and location for context menu items by @maribethb in #8891
- feat: Add support for retrieving blocks' drag strategies. by @gonfunko in #8893
- feat: Allow for HTML elements in dropdown field menus. by @gonfunko in #8889
- feat: show context menu for connections by @maribethb in #8895
- Feature: Add a dropdown options setter by @RoboErikG in #8833
- feat: Add support for displaying toast-style notifications. by @gonfunko in #8896
- feat!: Introduce new focus tree/node functions. by @BenHenning in #8909
- feat: Make WorkspaceSvg and BlockSvg focusable by @BenHenning in #8916
- feat: Make toolbox and flyout focusable by @BenHenning in #8920
- feat: Make WorkspaceSvg and BlockSvg focusable (roll forward) by @BenHenning in #8938
- feat: Make toolbox and flyout focusable (roll forward) by @BenHenning in #8939
- feat: Make fields focusable by @BenHenning in #8923
- feat: Make connections focusable by @BenHenning in #8928
- feat: Update line cursor to use focus manager by @BenHenning in #8941
- feat(WorkspaceSvg): Add support for tracking keyboard moves by @cpcallen in #8959
- feat(WorkspaceSvg): Ignore gestures when keyboard move in progress by @cpcallen in #8963
- feat: Allow conditioned ephemeral access for drop-down & widget divs by @BenHenning in #9051
- Added blocklyImageField CSS class to image fields by @vexora-0 in #8439
Bug fixes 🐛
- fix: Remove references to getFastTextWidth (#8277) by @ga-fleury in #8307
- fix: improve prompting when deleting variables by @gonfunko in #8529
- fix: display the correct variable reference count when deleting a variable. by @gonfunko in #8549
- fix: improve flyout performance by @gonfunko in #8571
- fix: size text with computed styles even when hidden by @gonfunko in #8572
- fix: include potential variables in variable dropdowns in the flyout by @gonfunko in #8574
- fix: Fix bug that prevented dismissing the widgetdiv in a mutator workspace. by @gonfunko in #8600
- fix: Fix bug that caused fields in the flyout to use the main workspace's scale. by @gonfunko in #8607
- fix: Correctly calculate the bounds of hat blocks. by @gonfunko in #8616
- fix: Take the flyout into account when positioning the workspace after a toolbox change. by @gonfunko in #8617
- fix: Fix exception when disposing of a workspace with a variable block obscuring a shadow block. by @gonfunko in #8619
- fix: improve typings and export additional types by @gonfunko in #8631
- fix: Create CSS vars for SVG patterns. by @johnnesky in #8671
- fix: Fix unsafe cast in Input.setVisible(). by @gonfunko in #8695
- fix: Don't create intermediate variables when renaming a procedure argument. by @gonfunko in #8723
- fix: Fix bug that prevented keyboard navigation in flyouts. by @gonfunko in #8687
- fix: Fix bug that caused blocks dragged from non-primary flyouts to be misplaced. by @gonfunko in #8753
- fix: Disallow and ignore x and y attributes for blocks in toolbox definitions. by @gonfunko in #8785
- fix: Allow the marker's current node to be null. by @gonfunko in #8802
- fix: fix bug that modalInputs option is not working in toolbox area by @zhiyan in #8817
- fix: check potential variables for flyout variable fields by @maribethb in #8873
- fix: update dependencies so adv compilation works by @maribethb in #8890
- fix: Don't visit invisible inputs with the cursor. by @gonfunko in #8892
- fix: Fix keyboard-driven menu scrolling. by @gonfunko in #8881
- fix: Fix bug that allowed some invisible fields/inputs to be navigated to. by @gonfunko in #8899
- fix: Fix bug that caused flyout items under the mouse to be selected without movement. by @gonfunko in #8900
- fix: Recreate the dropdowndiv when clearing it. by @gonfunko in #8903
- fix: Add some missing message strings. by @gonfunko in #8908
- Fix: Remove the collapsed block warning when expanding a block by @RoboErikG in #8854
- fix: LineCursor can loop forward, but not back by @microbit-grace in #8926
- fix: Support RTL in WorkspaceSvg.scrollIntoBounds by @RoboErikG in #8936
- fix: Fix bug in
BlockSvg.prototype.setParent
by @cpcallen in #8934 - fix: remove black outline on focused items by @rachel-fenichel in #8951
- fix: Fix conventional auto labeling by @BenHenning in #8956
- fix: Address remaining invisible input positions by @microbit-robert in #8948
- fix: Ensure flyout remains open after creating a variable with mouse by @BenHenning in #8982
- fix: Synchronize gestures and focus by @BenHenning in #8981
- fix: focus for autohideable flyouts by @maribethb in #8990
- fix: Replace explicit calls to refreshToolboxSelection with a workspace listener by @RoboErikG in #8980
- fix: Add private to variableChangeCallback by @RoboErikG in #8995
- fix: use copyable interface for cut action, add tests by @maribethb in #8993
- fix: Improve missing node resiliency by @BenHenning in #8997
- fix: Don't fire events for changes to potential variables by @RoboErikG in #9025
- fix: Improve robustness of
IFocusableNode
uses by @BenHenning in #9031 - fix: don't visit connections with the cursor. by @gonfunko in #9030
- fix: Fix regressions in
Field
. by @gonfunko in #9011 - fix: Ensure selection stays when dragging blocks, comments, and bubbles by @BenHenning in #9034
- fix: Ensure BlockSvg is uniquely focusable on the page by @BenHenning in #9045
- fix: Ensure cursor syncs with more than just focused blocks by @BenHenning in #9032
- fix: Reenable support for tabbing between fields. by @gonfunko in #9049
- fix: fieldDropdown.getText works in node by @maribethb in #9048
- fix: Fix bug when referencing HTMLElement in non-browser environments. by @gonfunko in #9050
- fix: Remove un-typesafe cast. by @gonfunko in #9052
- fix: Make clickable but non-editable fields navigable. by @gonfunko in #9054
Cleanup ♻️
- refactor: field_checkbox
dom.addClass
params by @ishon19 in #8309 - refactor: Add
addClass
andremoveClass
methods to blockSvg by @ishon19 in #8337 - refactor: make VariableModel implement IVariableModel. by @gonfunko in #8381
- refactor: update the variable interfaces. by @gonfunko in #8388
- refactor: make VariableMap implement IVariableMap. by @gonfunko in #8395
- refactor: Use IVariableModel instead of VariableModel. by @gonfunko in #8400
- refactor: clean up VariableModel. by @gonfunko in #8416
- refactor: deprecate and clean up variable-related methods. by @gonfunko in #8415
- refactor: use getters for flyout width and height. by @gonfunko in #8564
- refactor: remove redundant flyout positioning. by @gonfunko in #8573
- refactor: Reenable workspace resizing after reflowing flyouts. by @gonfunko in #8683
- refactor: Convert renderer typecheck methods to typeguards. by @gonfunko in #8656
- refactor: make CommentView more amenable to subclassing. by @gonfunko in #8783
- refactor: Make INavigable extend IFocusableNode. by @gonfunko in #9033
- refactor: Remove INavigable in favor of IFocusableNode. by @gonfunko in #9037
Reverted changes ⎌
- Revert "fix!: Remove the blocklyMenuItemHighlight CSS class and use the hover" by @gonfunko in #8800
- Fix: Revert focus prs by @RoboErikG in #8933
New Contributors
- @ishon19 made their first contribution in #8309
- @ga-fleury made their first contribution in #8335
- @nullHawk made their first contribution in #8334
- @shashwatpathak98 made their first contribution in #8332
- @Abhinav-Chdhary made their first contribution in #8357
- @Nirmalkumar6112 made their first contribution in #8333
- @devesh-2002 made their first contribution in #8336
- @krishchvn made their first contribution in #8367
- @Arun-cn made their first contribution in #8339
- @ChaitanyaYeole02 made their first contribution in #8372
- @ruthwikchikoti made their first contribution in #8384
- @dianaPrahoveanu-SL made their first contribution in #8391
- @Skye967 made their first contribution in #8360
- @vexora-0 made their first contribution in #8439
- @dakshkanaujia made their first contribution in #8433
- @Shreshthaaa made their first contribution in #8406
- @CodeMaverick2 made their first contribution in #8428
- @surajguduru made their first contribution in #8423
- @UtkershBasnet made their first contribution in #8440
- @Apocalypse96 made their first contribution in #8414
- @omwagh28 made their first contribution in #8459
- @aishwaryavenkatesan made their first contribution in #8465
- @Adityajaiswal03 made their first contribution in #8475
- @zhiyan made their first contribution in #8817
- @microbit-grace made their first contribution in #8926
- @microbit-robert made their first contribution in #8948
Full Changelog: blockly-v11.2.2...blockly-v12.0.0