Issue #2966✓ SolvedOpened August 23, 2020by juancarlospaco3 reactions

Plugin Blocks Category

快速解答by Ju99ernaut2

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-codein 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 ?. Theming is...

Read full answer below ↓

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)

👍 Most helpfulJu99ernautAugust 24, 2020

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, 2020

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, 2020

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

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.