Issue #2300Opened September 30, 2019by CatalinCernea5 reactions

[QUESTIONS] How to change order of categories?

Question

I saw the changes done by @JuanTincho of adding the "Order" attibute but I was able of adding it only on new categories created. I started from the "GrapesJs-Preset-Webpage". Is there a way of changing the Order after the initial render? This is how I add a new category by adding a new block.

Code SnippetTEXT
<pre>editor.BlockManager.add('Cards', {
  label: 'Cards',
  content: '<div class="ic-cards"><span>Put your content here</span></div>',
  category:{
	label: 'MyCategory',
	order: 1,
	open: true
  },
  attributes: {
	title: 'Insert Cards',
	class: 'fa fa-cube'
  }
});</pre>

Answers (3)

CatalinCernea• October 1, 20193 reactions

but I was able of adding it only on new categories created.

you can do this on all blocks by leveraging from getAll function. more on this here: for your case it might be something like this:

const blocks = editor.BlockManager.getAll();
        blocks.map(block => {
            if(block.attributes.id === 'block-1'){
                block.attributes.category = {
                    label:"cat 1",
                    order:1
                }
            }
            else if(block.attributes.id === 'block-2'){
                block.attributes.category = {
                    label:"cat 2",
                    order:2
                }
            }
            else if (block.attributes.id === 'block-3'){
                block.attributes.category = {
                    label:"cat 3",
                    order:3
                }
            }
        })

cheers!

Thank you! I'll try it ASAP. Have a good day.

pouyamiralayi• September 30, 20192 reactions

but I was able of adding it only on new categories created.

you can do this on all blocks by leveraging from getAll function. more on this here: for your case it might be something like this:

const blocks = editor.BlockManager.getAll();
        blocks.map(block => {
            if(block.attributes.id === 'block-1'){
                block.attributes.category = {
                    label:"cat 1",
                    order:1
                }
            }
            else if(block.attributes.id === 'block-2'){
                block.attributes.category = {
                    label:"cat 2",
                    order:2
                }
            }
            else if (block.attributes.id === 'block-3'){
                block.attributes.category = {
                    label:"cat 3",
                    order:3
                }
            }
        })

cheers!

DzevadS• November 27, 20200 reactions
Code SnippetTEXT
Why am I getting an error "Uncaught TypeError: n is undefined" here?

In the post #780 it should be possible to change the order of blocks in the following way

const bm = editor.BlockManager;

["link", "map", "h-navbar", "countdown", "form", ...
].forEach(function (item) {
    bm.remove( item );
});

const bl_text = bm.get('text').set({
	label: 'Titel',
	category: "My category",
});
const bl_textbasic = bm.get('text-basic').set({
	label: 'Tekst',
	category: "My category",
});
const bl_image = bm.get('image').set({
	label: 'Afbeelding',
	category: "My category",
});
const bl_video = bm.get('video').set({
	label: 'Video',
	category: "My category",
	attributes: {class:"fab fa-youtube"},
});
const bl_quote = bm.get('quote').set({
	label: 'Quote',
	category: "My category",
});

bm.render([
	bl_text, bl_textbasic, bl_image, bl_video, bl_quote,
]);


Please help what am I doing wrong?

Related Questions and Answers

Continue research with similar issue discussions.

Issue #2039

[QUESTIONS] How can I update the styles of a class?

Hi, so I have this button, whose style changes when hovered, a new class is added: <button class="btn btnhovered">Button 1</button> <button...

3 answersUpdated June 4, 2019

Issue #3177

QUESTION/FEATURE REQUEST: Changing Selected Component Tooltip

Is there a way through the api to change the selected component tooltip or is that something that can only be done by editing the source? I...

2 answersUpdated December 31, 2020

Issue #1659

[Question] How to upload PDF and others files - GrapesJS

Hi @artf, I started using your web builder a few days ago and I found it very well done ! I was able to customize it in my own way but I ha...

2 answersUpdated December 14, 2019

Issue #1683

How to change id/class when new element drop on editor or render element with dynamic ip?

Hello @artf , Hope you are doing well. I have two questions regards dynamic blocks adding, 1) Is it possible to render the block with dynam...

3 answersUpdated December 27, 2019

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

PresetsPluginsComponentsBlocksAssetsCommandsI18nLayersStylesStoragesRTENewslettersWeb pagesSite builders