grapesjs-preset-webpage
grapesjs-preset-webpage copied to clipboard
[QUESTIONS] How to add Categories
@artf How should I add categories (the drop downs on the side) to the template. I would like to add some custom blocks to a category, however, I am not clear on how to do this and what code I should put in what categories.
Any help would be much appreciated.
Kind Regards Aiyush
@Aiyush-G you can use the property "category" when creating a custom block, example:
editor.BlockManager.add('custom_block', {
label: 'Custom Block',
category: 'Custom Category',
attributes: {
class: 'gjs-fonts gjs-f-b1',
},
content: `<div class="custom"></div>`,
});
This creates a new category which is rendered below all the existing categories. Is there a way to render this category at the top above all the existing categories?
This creates a new category which is rendered below all the existing categories. Is there a way to render this category at the top above all the existing categories?
You can set 'order' for categories, like this:
editor.BlockManager.add('custom_block', {
label: 'Custom Block',
category: {
id: 'custom-category',
label: 'Custom Category',
order: 0,
},
attributes: {
class: 'gjs-fonts gjs-f-b1',
},
content: `<div class="custom"></div>`,
});