Defautl class on block
To achieve this, you need to add the style separated from the block and set the classes to the block. Look for example how this is done in the basic blocks plugin: https://github.com/artf/grapesjs-blocks-basic/blob/master/src/index.js#L29
Read full answer below ↓Question
I'm trying to add a custom block
and work fine, except that the styles attributes are set to a default class, for example
i want those css attributes be set to the class i'm setting in the classes attribute ('header-banner') how can i do that?
Answers (3)
To achieve this, you need to add the style separated from the block and set the classes to the block. Look for example how this is done in the basic blocks plugin: https://github.com/artf/grapesjs-blocks-basic/blob/master/src/index.js#L29
You can also do this
content: `
<div class="header-banner">...</div>
<style>
.header-banner {
...
}
</style>
`
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1182
How do I add a custom class
hi,i can add a custom id like this I thought it was model.set('attributes', { class: 'aa')}),But it doesn't work
Issue #792
Script property using function don't work with blocks
In Components & JS docs there's this example: This works perfectly. But I couldn't use a function instead of a string in script, as is said...
Issue #392
Define selected class.
Hello @artf , Is there a way to automatically select the class that is created on elements with custom styles. I'm currently trying to dyna...
Issue #417
Add Setting button to custom component.
Hello, How can I create a setting or you can say edit button for my custom component? LIke 4th option on this image:
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 →Related tutorials
In-depth guides on the same topic.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.