Issue #3293Opened February 26, 2021by eikerd0 reactions

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)

artfMarch 21, 20210 reactions

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.

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.