Blockly 8 -> 9 migration – custom toolbox categories visible but blocks not showing

[Ola Holowinska]

Hi everyone,

I’m currently migrating my project from Blockly 8 to Blockly 9, and I’m running into a strange issue with custom blocks not appearing in the toolbox, even though the categories themselves are visible and clickable.

What works: 

- My XML toolbox loads without errors.

- Categories appear on the left side in the UI.

-Clicking a category loads something, because if a block inside that category has an error, the console throws an exception when I click the category.

-All blocks are registered before Blockly.inject. I verified this by debugging.

-My registration code runs correctly and the blocks appear inside Blockly.Blocks.

What does NOT work

Blocks do NOT show up visually inside the toolbox UI.

My toolbox XML

<xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display:none">

  <category name="Categories" colour="#000123"></category>

  <category name="Data" colour="#000123">

    <block type="${new NumberBlock().type}"></block>

  </category>

  <category name="Logic" colour="#000123">

    <block type="${new AndBlock().type}"></block>

    <block type="${new OrBlock().type}"></block>

  </category>

  <category name="Math" colour="#000123">

    <block type="${new CompareNumberBlock().type}"></block>

    <block type="${new NumberLimitsBlock().type}"></block>

  </category>

  <category name="Text" colour="#000123">

    <block type="${new CompareTextBlock().type}"></block>

    <block type="${new TrimBlock().type}"></block>

  </category>

  <category name="Substring" colour="#000123">

    <block type="${new ContainsBlock().type}"></block>

    <block type="${new SubstringBlock().type}"></block>

    <block type="${new RemoveFirstOccurrenceBlock().type}"></block>

  </category>

</xml>

 Block registration code

static registerBlocks(blocks: MyBlock[]) {
  for (const customBlock of blocks) {
    Blockly.Blocks[customBlock.type] = {
      init: function () {
        const block = new customBlock.class();
        block.init(this);
        this.mixin({ blockInstance: block });
      }
    };
    Blockly.JavaScript[customBlock.type] = (block: any) => {
      return block.blockInstance.toJavaScriptCode(block);
    };
  }
}

I checked that blocks arę registered before toolbox and workspace creation.

I've already tested and debugged many things, including the order in which the toolbox, blocks, and workspace are created, removing custom renderers and themes, ensuring XML is correct, and registering blocks correctly. I have no idea what else could have gone wrong. I should add that I used the Blockly/Migrate tool (but corrected the changes manually the first time) and then started over with the tool, but the problem remains the same.

Does anything in Blockly 9 require additional configuration for custom blocks inside toolbox categories?

Why would categories appear but blocks remain invisible, even though they are registered and loaded?

Any ideas or debugging tips would be greatly appreciated!

Thanks in advance!

[Maribeth Moffatt]

Hello,

The syntax you're using for custom blocks is novel to me, so I suspect it may be something related to that. Have you tried a toolbox definition that uses the built in blocks, or hardcodes the block types? It looks like you're using template strings, but you haven't included the backticks in them, which could be a problem (or could be a formatting issue depending on how you copied/pasted these into your message)

What errors in the console are you getting?

Maribeth

[Ola Holowinska]

Hi,

Thanks for your reply. I’m not getting any errors in the console when clicking the categories.

After further investigation, I noticed that the flyout element always has display: none in the DOM. When I manually change it to display: block in the browser console, the blocks appear correctly in the flyout, but I’m not sure why Blockly is not updating it automatically when a category is clicked.

I have already checked:

• No other CSS is overriding the flyout’s display.

• I’m not manually setting display: none anywhere in my code.

Despite all this, the flyout never automatically switches to display: block when selecting a category. I’m still trying to understand what in Blockly 9 could cause this behavior.