Issue #3219💬 AnsweredOpened January 6, 2021by Abhisheknanda13444630 reactions

Add Type for block and css with class name

快速解答by artf

and make yourself a favor, stop defining entire sections in blocks, use a component-oriented approach so your blocks will be mainly like this:

Read full answer below ↓

Question

Hi @artf
I am stuck on one thing I want to add one block in which I want to add style with the class name also Here is my code -:

const section_content = `<section class="gjs-section"><div class="gjs-container"></div></section>
    <style>
      .gjs-section{
        padding: 50px;
      }
    .gjs-container{
      width: 90%;
      padding: 25px;
      margin: 0 auto;
      max-width: 1200px;
      }
      </style>`

  bm.add('section',{
    label: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 3v3h19V3m-1 5H3c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h17c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1M2 21h19v-3H2v3z"></path></svg>
    <div class="gjs-block-label">Section</div>`,
    id: 'section',
    category: selection_category,
    content: section_content,
    attributes: {
      'data-gjs-type': 'section'
    }
  });

This give me the exact thing what I wanted like HTML-code in the HTML section and style part in the style section but I want to add a new trait for the same and how can I define type in this

On the other hand when I define type and do something like this

bm.add('section',{
   label: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 3v3h19V3m-1 5H3c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h17c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1M2 21h19v-3H2v3z"></path></svg>
   <div class="gjs-block-label">Section</div>`,
   id: 'section',
   category: selection_category,
   content:{
    content:  section_content,
    type: 'section'
   },
   attributes: {
     'data-gjs-type': 'section'
   }
 });
 

and add a new trait it's giving me the div tag and inline style as shown in the screenshot. Could you please help me on this Thanks

If I will define content in component then how can I define the style with class name

<img width="413" alt="Screenshot 2021-01-06 at 11 04 24 AM" src="https://user-images.githubusercontent.com/20657737/103745089-e242b780-5024-11eb-9dff-5901a218a028.png">

Answers (2)

artfJanuary 6, 2021
content: {
 content:  section_content, // <- you should use `components`, not `content`...
 type: 'section',
}

and make yourself a favor, stop defining entire sections in blocks, use a component-oriented approach so your blocks will be mainly like this:

bm.add('custom-section', {
   label: 'Section',
   media: '<svg...>',
   content: { type: 'custom-section' },
   ...
 });
ClaudeCodeMay 17, 2026

Thanks for reporting this, @Abhisheknanda1344463.

Thanks for sharing your report about Add Type for block and css with class name. To help the team investigate and prioritize this:

Please provide:

  1. A minimal reproducible example (CodeSandbox/JSFiddle)
  2. Your GrapesJS version number
  3. Browser and OS information
  4. Any error messages from the browser console
  5. Steps to reproduce the issue

What helps most:

  • Minimal code example (not your full project)
  • Screen recording or screenshot showing the issue
  • Expected vs actual behavior clearly stated
  • GrapesJS configuration you're using

With these details, the maintainers can identify and prioritize a fix much faster. The GrapesJS team is very responsive to well-documented issues.

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 →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.