Grapesjs: QUESTION: Plugin Blocks Category

[juancarlospaco]

I coded a Plugin, works Ok, I read the docs,
but is there a way to have the Category collapsed by default?,
so user clicks the Plugin to display the plugin Blocks.

[Ju99ernaut]

You can close all categories with

const pn = editor.Panels;
const bm = editor.Blocks

const openBl = pn.getButton('views', 'open-blocks');
editor.on('load', () => { 
    openBl && openBl.set('active', 1);
    bm.getCategories().forEach(c => c.set('open', 0));
});

Or you can use a filter

editor.on('load', () => { 
    openBl && openBl.set('active', 1);
    bm.getCategories().filter(c => ['Cat1', 'Cat2',...].includes(c.get('id'))).forEach(c => c.set('open', 0));
});

[juancarlospaco]

Thanks, you can see results here.

I ask here to not open more Bugs:

• is there a way to style the "View Code" button the one with the </> icon?.
• in the "View Code" pop-up, is there a way to hide the CSS text editor only leaving the HTML editor?.
• Why the UI/Style is different on my grapes Vs the official Demo ?.

[Ju99ernaut]

is there a way to style the "View Code" button the one with the icon?.

Target the button with a css selector like .gjs-pn-btn.fa.fa-code

in the "View Code" pop-up, is there a way to hide the CSS text editor only leaving the HTML editor?.

.gjs-cm-editor-c {
    width: 100%;
}

.gjs-cm-editor#gjs-cm-htmlmixed {
    padding-right: 0;
    border-right: none;
}

.gjs-cm-editor#gjs-cm-css {
    display: none;
}

Why the UI/Style is different on my grapes Vs the official Demo ?.

Theming is explained here

[juancarlospaco]

Thanks.
:)