Add Type for block and css with class name
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)
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' },
...
});
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:
- A minimal reproducible example (CodeSandbox/JSFiddle)
- Your GrapesJS version number
- Browser and OS information
- Any error messages from the browser console
- 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.
Issue #3559
page.getMainComponent().view gives undefined when page is selected
Hello @artf, I want to get the HTML Element of selected page. But it returns undefined when using following code:
Issue #3309
TextNodes interfere when changing content on element
Version: 0.16.44 Hi @artf I have a custom block with a custom button component, which its content is similar to this one. <a data-gjs-type=...
Issue #3512
Child elements not draggable ,droppable highlightable. also the CSS of all child elements not pushed in style section while develop a banner component in as plugin
Hello @artf , I am trying to develop a simple banner plugin which will be include a heading , subheading and link. and every element can be...
Issue #3446
Cannot Store Data Unexpected token '-'
Please Help Me, I Want To Store gjs data to mysql but i cannot get any data from front end to back end here my code: const editor = grapesj...
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 →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.