How to properly add custom blocks under 'Symbols' tab in GrapesJS Studio SDK?

[Aditya-devloper]

Hi, I'm using @grapesjs/studio-sdk/react and trying to add custom components like Header, Footer, etc., inside the 'Symbols' tab (not the 'Regular' tab).

I set the category like this:
function App() {
const onEditorReady = (editor) => {
// Log available categories to debug
console.log("Available categories:", editor.BlockManager.getCategories());

const custom_components = [
  {
    id: "header",
    label: "Header",
    category: "symbols", // Directly use "symbols" as category (matches i18n.types)
    content: Header,
  },
  {
    id: "footer",
    label: "Footer",
    category: "symbols",
    content: Footer,
  },
  {
    id: "card",
    label: "Card",
    category: "symbols",
    content: Card,
  },
];

custom_components.forEach((block) => {
  editor.BlockManager.add(block.id, block);
  console.log(`Added block: ${block.id} to category: ${block.category}`);
});

};

return (
<>

<StudioEditor
options={{
onReady: onEditorReady,
i18n: {
locales: {
en: {
blockManager: {
notFound: "No blocks found",
blocks: "Blocks",
add: "Add more blocks",
search: "Search...",
types: {
regular: "Regular",
symbols: "Components",
},
},
},
},
},
project: {
type: "web",
default: {
pages: [
{ name: "Home", component: "

Home page

" },
{ name: "About", component: "

About page

" },
{ name: "Contact", component: "

Contact page

" },
],
},
},
}}
/>

</>
);
}

But still, all my custom blocks are showing under the 'Regular' tab instead of 'Symbols'.

❓How can I properly add blocks/components so they show under the 'Symbols' tab?

I'm using the onEditorReady function to add blocks through editor.BlockManager.add(...).

Please guide 🙏