Grapesjs: How to change the default selected panel?

[romariolopezc]

I'm trying to use defaultCommand: 'open-blocks' but the style manager is the default selected one

Thanks!

[pouyamiralayi]

Hi @romariolopezc did you try this:

  defaultCommand: 'select-comp',

cheers!

[romariolopezc]

Hello @pouyamiralayi

I just tried it and is not working

[pouyamiralayi]

@romariolopezc are you on the latest version?

[romariolopezc]

@pouyamiralayi I have this:

    "grapesjs": "^0.15.8",
    "grapesjs-mjml": "^0.1.15",

I'm using th MJML plugin, it may have something to do?

[pouyamiralayi]

@romariolopezc please do not use defaultCommand and give this a try:

editor.on('load', () => {
        editor.runCommand('open-blocks')
})

for other panels, replace open-blocks with open-layers for layers and open-tm for traits.
the current problem is that style-manager will always be opened by default in all of above scenarios.
it seems that this is a bug, i just tried using defaultCommand: 'open-layers' and it is not working; the same goes for 'open-traits'. i also tried all the alternatives like 'OpenTraitManager' @artf

[romariolopezc]

@pouyamiralayi it doesn't behave as expected.

If I use editor.runCommand('open-blocks') on load, the components icon is not selected. Is appended to the bottom of the style manager

Here the screenshots

[pouyamiralayi]

@romariolopezc unfortunately yes:

the current problem is that style-manager will always be opened by default in all of above scenarios.

[pouyamiralayi]

i will investigate on this matter.

[naveen-15697]

@pouyamiralayi it doesn't behave as expected.

If I use editor.runCommand('open-blocks') on load, the components icon is not selected. Is appended to the bottom of the style manager

Here the screenshots

@romariolopezc ,
Instead for running the command. Try activating blocks button on load.
const blockBtn = editor.Panels.getButton('panel-id', 'block-button-name');
blockBtn.set('active', 1);

[pouyamiralayi]

thanks @naveen-15697 your solution works pretty awesome! well done.
@romariolopezc does this suit your situation? as suggested by @naveen-15697 you have to go like this:

editor.on('load', () => {
        const blockBtn = editor.Panels.getButton('views', 'open-layers');
        blockBtn.set('active', 1);
})

and the button ids for views panel are:

• open-sm
• open-tm
• open-layers
• open-blocks

cheers!

[romariolopezc]

@pouyamiralayi @naveen-15697 it works!!

I use it outside of the load, after initializing grapesjs. If I use it on load then I see a small delay when changing from the style manager to open-blocks. If its after the .init({..}) then when it renders is selected