Define custom category

[MervynZhang]

Hello,I want to define custom category, just like Scratch，how should I do? Thanks.

[Nat Budin]

Hi @foreverzmy, I'm not quite sure if this is what you're asking, but I'm going to assume you want to add some custom blocks and make a category for them in your toolbox. If this isn't what you wanted, please reply and clarify.

First, you'll want to define some custom blocks. Google's official Blockly documentation has a good page about this here. In the case of react-blockly, you'll also need to import Blockly from 'blockly'; near the top of the file where you're defining the custom blocks.

Once you've done that, you should be able to reference them in the toolboxCategories prop just like the built-in blocks that come with Blockly (using the type field inside the blocks objects). For an example of a custom toolbox category configuration, see the example code here:

react-blockly/src/dev-index.jsx

Lines 23 to 40 in 11eb6af

 { 
   name: 'Text2', 
   blocks: [ 
     { type: 'text' }, 
     { 
       type: 'text_print', 
       values: { 
         TEXT: { 
           type: 'text', 
           shadow: true, 
           fields: { 
             TEXT: 'abc', 
           }, 
         }, 
       }, 
     }, 
   ], 
 }, 

[Nat Budin]

(Closing this, but if I haven't actually answered your question please feel free to reopen and clarify.)

[MervynZhang]

Thanks for your reply。
What I want is change the category dom tree，for Scratch is

And you can see the dom tree，Under the .blocklyToolboxDiv element is .scratchCategoryMenu，and in blockly is .blocklyTreeRoot。

So how to change it? Thanks.