grapesjs-preset-webpage icon indicating copy to clipboard operation
grapesjs-preset-webpage copied to clipboard

[QUESTIONS] How to add Categories

Open Aiyush-G opened this issue 4 years ago • 1 comments

@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 avatar Jun 21 '20 17:06 Aiyush-G

@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>`,
});

RJCAM avatar Jul 29 '20 10:07 RJCAM

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?

sagar7993 avatar Jul 04 '23 08:07 sagar7993

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>`,
});

leo-budgetsimple avatar Oct 26 '23 21:10 leo-budgetsimple