Skip to main content

blockly

blockly package

Classes

Class

Description

Block

Class for one block. Not normally called directly, workspace.newBlock() is preferred.

BlockFlyoutInflater

Class responsible for creating blocks for flyouts.

BlockNavigationPolicy

Set of rules controlling keyboard navigation from a block.

BlockSvg

Class for a block's SVG representation. Not normally called directly, workspace.newBlock() is preferred.

ButtonFlyoutInflater

Class responsible for creating buttons for flyouts.

CodeGenerator

Class for a code generator that translates the blocks into a language.

CollapsibleToolboxCategory

Class for a category in a toolbox that can be collapsed.

ComponentManager

Manager for all items registered with the workspace.

Connection

Class for a connection between blocks.

ConnectionChecker

Class for connection type checking logic.

ConnectionDB

Database of connections. Connections are stored in order of their vertical component. This way connections in an area may be looked up quickly using a binary search.

ConnectionNavigationPolicy

Set of rules controlling keyboard navigation from a connection.

ContextMenuRegistry

Class for the registry of context menu items. This is intended to be a singleton. You should not create a new instance, and only access this class from ContextMenuRegistry.registry.

DeleteArea

Abstract class for a component that can delete a block or bubble that is dropped on top of it.

DragTarget

Abstract class for a component with custom behaviour when a block or bubble is dragged over or dropped on top of it.

FieldCheckbox

Class for a checkbox field.

FieldDropdown

Class for an editable dropdown field.

FieldImage

Class for an image on a block.

FieldLabel

Class for a non-editable, non-serializable text field.

FieldLabelSerializable

Class for a non-editable, serializable text field.

FieldNavigationPolicy

Set of rules controlling keyboard navigation from a field.

FieldNumber

Class for an editable number field.

FieldTextInput

Class for an editable text field.

FieldVariable

Class for a variable's dropdown field.

FlyoutButton

Class for a button or label in the flyout.

FlyoutButtonNavigationPolicy

Set of rules controlling keyboard navigation from a flyout button.

FlyoutItem

Representation of an item displayed in a flyout.

FlyoutMetricsManager

Calculates metrics for a flyout's workspace. The metrics are mainly used to size scrollbars for the flyout.

FlyoutNavigationPolicy

Generic navigation policy that navigates between items in the flyout.

FlyoutNavigator

FlyoutSeparator

Representation of a gap between elements in a flyout.

FlyoutSeparatorNavigationPolicy

Set of rules controlling keyboard navigation from a flyout separator. This is a no-op placeholder, since flyout separators can't be navigated to.

FocusableTreeTraverser

A helper utility for IFocusableTree implementations to aid with common tree traversals.

FocusManager

A per-page singleton that manages Blockly focus across one or more IFocusableTrees, and bidirectionally synchronizes this focus with the DOM.

Callers that wish to explicitly change input focus for select Blockly components on the page should use the focus functions in this manager.

The manager is responsible for handling focus events from the DOM (which may may arise from users clicking on page elements) and ensuring that corresponding IFocusableNodes are clearly marked as actively/passively highlighted in the same way that this would be represented with calls to focusNode().

Gesture

Class for one gesture.

Grid

Class for a workspace's grid.

HorizontalFlyout

Class for a flyout.

Input

Class for an input with optional fields.

InsertionMarkerPreviewer

KeyboardNavigationController

The KeyboardNavigationController handles coordinating Blockly-wide keyboard navigation behavior, such as enabling/disabling full cursor visualization.

LabelFlyoutInflater

Class responsible for creating labels for flyouts.

LineCursor

Class for a line cursor.

Marker

Class for a marker. This is used in keyboard navigation to save a location in the Blockly AST.

MarkerManager

Class to manage the multiple markers and the cursor on a workspace.

Menu

A basic menu class.

MenuItem

Class representing an item in a menu.

MetricsManager

The manager for all workspace metrics calculations.

Names

Class for a database of entity names (variables, procedures, etc).

Navigator

Class responsible for determining where focus should move in response to keyboard navigation commands.

Options

Parse the user-specified options, using reasonable defaults where behaviour is unspecified.

RenderedConnection

Class for a connection between blocks that may be rendered on screen.

Scrollbar

Class for a pure SVG scrollbar. This technique offers a scrollbar that is guaranteed to work, but may not look or behave like the system's scrollbars.

ScrollbarPair

Class for a pair of scrollbars. Horizontal and vertical.

SeparatorFlyoutInflater

Class responsible for creating separators for flyouts.

ShortcutRegistry

Class for the registry of keyboard shortcuts. This is intended to be a singleton. You should not create a new instance, and only access this class from ShortcutRegistry.registry.

Theme

Class for a theme.

ThemeManager

Class for storing and updating a workspace's theme and UI components.

Toast

Class that allows for showing and dismissing temporary notifications.

Toolbox

Class for a Toolbox. Creates the toolbox's DOM.

ToolboxCategory

Class for a category in a toolbox.

ToolboxItem

Class for an item in the toolbox.

ToolboxSeparator

Class for a toolbox separator. This is the thin visual line that appears on the toolbox. This item is not interactable.

Trashcan

Class for a trash can.

UnattachedFieldError

Represents an error where the field is trying to access its block or information about its block before it has actually been attached to said block.

VariableMap

Class for a variable map. This contains a dictionary data structure with variable types as keys and lists of variables as values. The list of variables are the type indicated by the key.

VariableModel

Class for a variable model. Holds information for the variable including name, ID, and type.

VerticalFlyout

Class for a flyout.

Workspace

Class for a workspace. This is a data structure that contains blocks. There is no UI, and can be created headlessly.

WorkspaceAudio

Class for loading, storing, and playing audio for a workspace.

WorkspaceDragger

Class for a workspace dragger. It moves the workspace around when it is being dragged by a mouse or touch.

WorkspaceNavigationPolicy

Set of rules controlling keyboard navigation from a workspace.

WorkspaceSvg

Class for a workspace. This is an onscreen area with optional trashcan, scrollbars, bubbles, and dragging.

ZoomControls

Class for a zoom controls.

Abstract Classes

Abstract Class

Description

Field

Abstract class for an editable field.

Flyout

Class for a flyout.

Enumerations

Enumeration

Description

ConnectionType

Enum for the type of a connection or input.

Functions

Function

Description

getFocusManager()

Convenience function for FocusManager.getFocusManager.

hasBubble(obj)

Type guard that checks whether the given object is a IHasBubble.

hideChaff(opt_onlyClosePopups)

Close tooltips, context menus, dropdown selections, etc.

inject(container, opt_options)

Inject a Blockly editor into the specified container element (usually a div).

isCopyable(obj)

isDeletable(obj)

Returns whether the given object is an IDeletable.

isDraggable(obj)

Returns whether the given object is an IDraggable or not.

isIcon(obj)

Type guard that checks whether the given object is an IIcon.

isPaster(obj)

isRenderedElement(obj)

isSelectable(obj)

Checks whether the given object is an ISelectable.

isSerializable(obj)

Type guard that checks whether the given object is a ISerializable.

isVariableBackedParameterModel(param)

Returns whether the given object is a variable holder or not.

navigateBlock(current, delta)

Returns the next navigable item relative to the provided block child.

navigateStacks(current, delta)

Returns the next/previous stack relative to the given element's stack.

setLocale(locale)

Sets the locale (i.e. the localized messages/block-text/etc) to the given locale.

This is not useful/necessary when loading from a script tag, because the messages are automatically cluged into the Blockly.Msg object. But we provide it in both the script-tag and non-script-tag contexts so that the tscompiler can properly create our type definition files.

Interfaces

Interface

Description

BlocklyOptions

Blockly options.

FieldCheckboxConfig

Config options for the checkbox field.

FieldCheckboxFromJsonConfig

fromJson config options for the checkbox field.

FieldConfig

Extra configuration options for the base field.

FieldDropdownFromJsonConfig

fromJson config for the dropdown field.

FieldImageConfig

Config options for the image field.

FieldImageFromJsonConfig

fromJson config options for the image field.

FieldLabelConfig

Config options for the label field.

FieldLabelFromJsonConfig

fromJson config options for the label field.

FieldNumberConfig

Config options for the number field.

FieldNumberFromJsonConfig

fromJson config options for the number field.

FieldTextInputFromJsonConfig

fromJson config options for the text input field.

FieldVariableConfig

Config options for the variable field.

FieldVariableFromJsonConfig

fromJson config options for the variable field.

IAutoHideable

Interface for a component that can be automatically hidden.

IBoundedElement

A bounded element interface.

IBubble

A bubble interface.

ICollapsibleToolboxItem

Interface for an item in the toolbox that can be collapsed.

IComponent

The interface for a workspace component that can be registered with the ComponentManager.

IConnectionChecker

Class for connection type checking logic.

IConnectionPreviewer

Displays visual "previews" of where a block will be connected if it is dropped.

IContextMenu

ICopyable

IDeletable

The interface for an object that can be deleted.

IDeleteArea

Interface for a component that can delete a block or bubble that is dropped on top of it.

IDraggable

Represents an object that can be dragged.

IDragger

IDragStrategy

IDragTarget

Interface for a component with custom behaviour when a block or bubble is dragged over or dropped on top of it.

IFlyout

Interface for a flyout.

IFlyoutInflater

IFocusableNode

Represents anything that can have input focus.

IFocusableTree

Represents a tree of focusable elements with its own active/passive focus context.

Note that focus is handled by FocusManager, and tree implementations can have at most one IFocusableNode focused at one time. If the tree itself has focus, then the tree's focused node is considered 'active' ('passive' if another tree has focus).

Focus is shared between one or more trees, where each tree can have exactly one active or passive node (and only one active node can exist on the whole page at any given time). The idea of passive focus is to provide context to users on where their focus will be restored upon navigating back to a previously focused tree.

Note that if the tree's current focused node (passive or active) is needed, FocusableTreeTraverser.findFocusedNode can be used.

Note that if specific nodes are needed to be retrieved for this tree, either use lookUpFocusableNode or FocusableTreeTraverser.findFocusableNodeFor.

IHasBubble

IIcon

IKeyboardAccessible

An interface for an object that handles keyboard shortcuts.

ImageProperties

Definition of a human-readable image dropdown option.

IMetricsManager

Interface for a metrics manager.

IMovable

The interface for an object that is movable.

INavigationPolicy

A set of rules that specify where keyboard navigation should proceed.

IPaster

An object that can paste data into a workspace.

IPositionable

Interface for a component that is positioned on top of the workspace.

IRegistrable

The interface for a Blockly component that can be registered.

IRenderedElement

ISelectable

The interface for an object that is selectable.

Implementations are generally expected to use their implementations of onNodeFocus() and onNodeBlur() to call setSelected() with themselves and null, respectively, in order to ensure that selections are correctly updated and the selection change event is fired.

ISelectableToolboxItem

Interface for an item in the toolbox that can be selected.

ISerializable

IStyleable

Interface for an object that a style can be added to.

IToolbox

Interface for a toolbox.

IToolboxItem

Interface for an item in the toolbox.

IVariableBackedParameterModel

Interface for a parameter model that holds a variable model.

IVariableMap

Variable maps are container objects responsible for storing and managing the set of variables referenced on a workspace.

Any of these methods may define invariants about which names and types are legal, and throw if they are not met.

IVariableModel

IVariableState

Represents the state of a given variable.

ToastOptions

Display/configuration options for a toast notification.

Namespaces

Namespace

Description

Block

blockAnimations

blockRendering

browserEvents

bubbles

bumpObjects

clipboard

CollapsibleToolboxCategory

comments

common

ComponentManager

constants

ContextMenu

ContextMenuItems

ContextMenuRegistry

Css

dialog

dragging

Events

Extensions

fieldRegistry

geras

icons

ICopyable

inputs

layers

libraryBlocks

MetricsManager

Names

Options

Procedures

registry

RenderedConnection

renderManagement

serialization

ShortcutItems

ShortcutRegistry

Theme

ThemeManager

Themes

thrasos

Toast

Options for how aggressively toasts should be read out by screenreaders. Values correspond to those for aria-live.

ToolboxCategory

ToolboxSeparator

Tooltip

Touch

uiPosition

utils

Variables

VariablesDynamic

WidgetDiv

Xml

zelos

Variables

Variable

Description

Blocks

A mapping of block type names to block prototype objects.

COLLAPSE_CHARS

COLLAPSED_FIELD_NAME

COLLAPSED_INPUT_NAME

config

Object holding all the values on Blockly that we expect developers to be able to change.

defineBlocksWithJsonArray

Define blocks from an array of JSON block definitions, as might be generated by the Blockly Developer Tools.

DELETE_VARIABLE_ID

DropDownDiv

getMainWorkspace

Returns the main workspace. Returns the last used main workspace (based on focus). Try not to use this function, particularly if there are multiple Blockly instances on a page.

getSelected

Returns the currently selected copyable object.

INPUT_VALUE

JavaScript

keyboardNavigationController

Singleton instance of the keyboard navigation controller.

Msg

A dictionary of localised messages.

NEXT_STATEMENT

OPPOSITE_TYPE

OUTPUT_VALUE

PREVIOUS_STATEMENT

PROCEDURE_CATEGORY_NAME

String for use in the "custom" attribute of a category in toolbox XML. This string indicates that the category should be dynamically populated with procedure blocks.

RENAME_VARIABLE_ID

setParentContainer

Set the parent container. This is the container element that the WidgetDiv, dropDownDiv, and Tooltip are rendered into the first time Blockly.inject is called. This method is a NOP if called after the first Blockly.inject.

svgResize

Size the SVG image to completely fill its container. Call this when the view actually changes sizes (e.g. on a window resize/device orientation change). See workspace.resizeContents to resize the workspace when the contents change (e.g. when a block is added or removed). Record the height/width of the SVG image.

TOOLBOX_AT_BOTTOM

TOOLBOX_AT_LEFT

TOOLBOX_AT_RIGHT

TOOLBOX_AT_TOP

VARIABLE_CATEGORY_NAME

String for use in the "custom" attribute of a category in toolbox XML. This string indicates that the category should be dynamically populated with variable blocks.

VARIABLE_DYNAMIC_CATEGORY_NAME

String for use in the "custom" attribute of a category in toolbox XML. This string indicates that the category should be dynamically populated with variable blocks.

VERSION

Blockly core version. This constant is overridden by the build script (npm run build) to the value of the version in package.json. This is done by the Closure Compiler in the buildCompressed gulp task. For local builds, you can pass --define='Blockly.VERSION=X.Y.Z' to the compiler to override this constant.

Type Aliases

Type Alias

Description

FieldCheckboxValidator

A function that is called to validate changes to the field's value before they are set.

FieldDropdownConfig

Config options for the dropdown field.

FieldDropdownValidator

A function that is called to validate changes to the field's value before they are set.

FieldNumberValidator

A function that is called to validate changes to the field's value before they are set.

FieldTextInputConfig

Config options for the text input field.

FieldTextInputValidator

A function that is called to validate changes to the field's value before they are set.

FieldValidator

A function that is called to validate changes to the field's value before they are set.

FieldVariableValidator

A function that is called to validate changes to the field's value before they are set.

ICopyData

MenuGenerator

Either an array of menu options or a function that generates an array of menu options for FieldDropdown or its descendants.

MenuGeneratorFunction

A function that generates an array of menu options for FieldDropdown or its descendants.

MenuOption

An individual option in the dropdown menu. Can be either the string literal separator for a menu separator item, or an array for normal action menu items. In the latter case, the first element is the human-readable value (text, ImageProperties object, or HTML element), and the second element is the language-neutral value.

ReturnEphemeralFocus

Type declaration for returning focus to FocusManager upon completing an ephemeral UI flow (such as a dialog).

See FocusManager.takeEphemeralFocus for more details.