Issue #3293💬 AnsweredOpened February 26, 2021by eikerd0 reactions

Blockmanager: adding custom class gjs-block-category / gjs-title DIVs

快速解答by artf

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:

Read full answer below ↓

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 (2)

artfMarch 21, 2021

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');
ClaudeCodeMay 17, 2026

Thanks for reporting this, @eikerd.

Great question about Blockmanager: adding custom class gjs-block-category / gjs-title DIVs. The recommended approach with StyleManager is to use the event-driven API.

Start here:

  1. Check the GrapesJS documentation for your specific module
  2. Look for the on() event listener method
  3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

  • Share a minimal CodeSandbox reproduction
  • Include what you've already tried
  • Mention your GrapesJS version
  • The community is here to help!

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.