Blockmanager: adding custom class gjs-block-category / gjs-title DIVs
Question
I have a list of categories, and I want to mark some with a different style depending on if they are required or not.
<div class="gjs-block-categories">
<div class="gjs-block-category gjs-open" style="order: 1;">
<div class="gjs-title">
<i class="gjs-caret-icon fa fa-caret-down"></i>
Logo
</div>
<div class="gjs-blocks-c" style="">
so ideally i could add a class to the div with class 'gjs-title' so that it says 'gjs-title required-field'
this.editor.BlockManager.getCategories();
returns an array of all my block-categories, but my question is how do I go about selecting one in order to use .addClass() ?
if I go by the 'id', and I put
this.editor.BlockManager.get('logos').addClass('required-field')
this doesnt seem to work. What is the best way to select the gis-block-category DIVs to be able to .addClass() or is there a better approach, thanks!
Answers (1)
Hi @eikerd by checking the code, at the moment, I don't see any other way of customizing block category DOMs if not doing something on your own with the DOM (once blocks are rendered). I'll probably add the view to the category model in the next release, so you could do something like this:
const blockCat = editor.Blocks.getCategories().filter(c => c.get('id') == 'ID-CAT')[0].view;
blockCat.el.addClass('add-class');
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2378
[QUESTION] Modifying global CSS in style manager
We want to achieve the following:Mark our block HTML elements with some classes like:Add some styles that define CSS classes like:Using Gra...
Issue #442
Is it possible to include an external stylesheet in the grapesjs canvas?
We want to create some custom components whose style changes according to an external theme css (there can be different themes), and we wan...
Issue #2389
Angular with Grapesjs
Hi I want to integrate Grapesjs into my angular application. Suppose I have a custom dropdown component (containing .ts, .html and .scss fi...
Issue #2716
issue in adding custom font in grapejs
@artf i have followed the method below and successfully added the font in list but not all of the fonts are showing correct behavior, I wan...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.