Customizing context menus

6. Precondition: Blockly state

Disabling your context menu options half of the time is not useful, but you may want to show or hide an option based on what the user is doing. For example, let's show a Help option in the context menu if the user doesn't have any blocks on the workspace. Add this code in index.js:

function registerHelpItem() {
  const helpItem = {
    displayText: 'Help! There are no blocks',
    preconditionFn: function (scope) {
      if (!(scope.focusedNode instanceof Blockly.WorkspaceSvg)) return 'hidden';
      if (!scope.focusedNode.getTopBlocks().length) {
        return 'enabled';
      }
      return 'hidden';
    },
    callback: function (scope) {},
    id: 'help_no_blocks',
    weight: 100,
  };
  Blockly.ContextMenuRegistry.registry.register(helpItem);
}

Don't forget to call registerHelpItem from your start function.

Test it

• Reload your page and open a context menu on the workspace. You should see an option labeled "Help! There are no blocks".
• Add a block to the workspace and open a context menu on the workspace again. The Help option should be gone.