Issue #2966Opened August 23, 2020by juancarlospaco3 reactions

QUESTION: Plugin Blocks Category

Question

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.

Answers (3)

Ju99ernautAugust 24, 20202 reactions

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

Ju99ernautAugust 24, 20201 reactions

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));
});
juancarlospacoAugust 24, 20200 reactions

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 ?.

Related Questions and Answers

Continue research with similar issue discussions.

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.