Skip to main content

Customizing context menus

3. Add a context menu item​

In this section you will create a very basic Blockly.ContextMenuRegistry.RegistryItem, then register it to display when you open a context menu on the workspace, a block, or a comment.

The RegistryItem​

A context menu consists of one or more menu options that a user can select. Blockly stores information about menu option as items in a registry. You can think of the registry items as templates for constructing menu options. When the user opens a context menu, Blockly retrieves all of the registry items that apply to the current context and uses them to construct a list of menu options.

Each item in the registry has several properties:

  • displayText: The text to show in the menu. Either a string, or HTML, or a function that returns either of the former.
  • preconditionFn: Function that returns one of 'enabled', 'disabled', or 'hidden' to determine whether and how the menu option should be rendered.
  • callback: A function called when the menu option is selected.
  • id: A unique string id for the item.
  • weight: A number that determines the sort order of the option. Options with higher weights appear later in the context menu.

We will discuss these in detail in later sections of the codelab.

Make a RegistryItem​

Add a function to src/index.js named registerHelloWorldItem. Create a new registry item in your function:

function registerHelloWorldItem() {
  const helloWorldItem = {
    displayText: 'Hello World',
    preconditionFn: function (scope) {
      return 'enabled';
    },
    callback: function (scope) {},
    id: 'hello_world',
    weight: 100,
  };
}

Call your function in src/index.js, before the UI element setup and Blockly.inject call:

registerHelloWorldItem();

// Set up UI elements and inject Blockly
const codeDiv = document.getElementById('generatedCode').firstChild;
// ...
const ws = Blockly.inject(blocklyDiv, {toolbox});

Register it​

Next, register your item with Blockly:

function registerHelloWorldItem() {
  const helloWorldItem = {
    // ...
  };
  Blockly.ContextMenuRegistry.registry.register(helloWorldItem);
}
note

You will never need to make a new ContextMenuRegistry. Always use the singleton Blockly.ContextMenuRegistry.registry.

Enable comment context menus​

This codelab demonstrates context menus on workspaces, blocks, and comments. Blockly registers the workspace and block options by default, but the comment options (including the Add Comment option you'll use to create comments while testing) must be registered separately. Add this call to src/index.js, before the Blockly.inject call:

Blockly.ContextMenuItems.registerCommentOptions();

Test it​

Refresh the running page (or run npm start) and open a context menu on the workspace (right-click with a mouse, or press Ctrl+Enter (Windows) or Command+Enter (Mac) if you are navigating Blockly with the keyboard). You should see a new option labeled "Hello World" at the bottom of the context menu.

A context menu. The last option says "Hello World".

Next, drag a block onto the workspace and open a context menu on the block. You'll see "Hello World" at the bottom of the block's context menu. Finally, open a context menu on the workspace and create a comment, then open a context menu on the comment's header. "Hello World" should be at the bottom of the context menu.