Plugin Blocks Category
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)
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
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));
});
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.
Issue #5046
is there any way to remove cross svg on selected default value of Float, Position and text-align
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Version 111.0.5563.147 (Official Build) (6...
Issue #3268
How to add javascript in the html without sanitization?
Hey @artf, I am taking javascript input from the user. I need to add this javascript inside the template HTML but it gets sanitized. Is the...
Issue #3115
component droped position is wrong when I changed canvas size under Absolute/Designer mode
WARNING I changed the canvas size and I drop a compent from blocks panel. The result is compent postion is wrong. By the way, the editor is...
Issue #3704
load blocks closed by default?
I am using the following bit of code to collapse all the block categories, unfortunately, this is not working live demo : https://jsfiddle....
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →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.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.