[QUESTION] (Possibly a bug) How to apply traits to components used for GrapesJs initialization
Question
I am using
this.gjs.DomComponents.addType('some-name', {
isComponent: (el: HTMLElement) => {
let isCmp = false;
if (el.attributes) {
isCmp = el.attributes['some-attribute'] !== undefined;
}
return isCmp;
},
model: {
defaults: {
traits: [
{
type: 'select', // Type of the trait
label: 'Trait label', // The label you will see in Settings
name: 'some-attribute', // The name of the attribute/property to use on component
options: myItems.map(x => ({ id: x.id, name: x.name }))
}
],
// As by default, traits are binded to attributes, so to define
// their initial value we can use attributes
attributes: { 'some-attribute': '' },
},
},
});
This works but only for blocks which are added/drag-dropped to the editor manually after it is initialized. If we supply components when we call grapesjs.init({..., components: [..]}), the components defined in components do not have the traits. How can we apply traits to initially loaded components too, not only to these added later manually ?
Answers (3)
currently there is a problem on storing custom types unless they are defined inside a plugin.
Not a problem 😬, you just need to load custom types before the content and using plugins is the only way
I can't add all possible such elements as plugins
This is how it can be reproduced:
- Go to https://jsfiddle.net/nwsy6mv1/3/
- Open blocks and place "1 Column" block
- Click inside the column and go to "Settings"
- You will see the drop-down trait with label "Trait label"
- At this time the grapesjs components are saved in the local storage because it is configured as
storageManager: { type: 'local' } - Refresh the browser so grapesjs will load components from the local storage
- Click on the column and go to "Settings"
What happens: The settings panel now contains only the default traits but not the one specified in the code. Now if you add manually another "1 Column" block and click on its settings - you will see the trait. If you keep refreshing, every trait specified will not be available for "initially loaded" components - it will be available only for these manually dragged-dropped into the grapesjs editor.
An animated gif:

Hi @varadero please define your custom type as a plugin. cheers!
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2614
[QUESTION] Recursive view update of custom component
Hi, I have defined a custom type like: I want to keep the customTag in my model and show the content (HTML) in the view. However, in the co...
Issue #2103
[QUESTION] Custom Component dragging issue
This is how I've created a custom component: This is my custom block: The thing is that I have wrapped the image tag inside <a> tag when it...
Issue #3225
How to Update Style from checkbox Trait?
Hi @artf I am trying to update the style using the checkbox trait but it's not calling the function. Here is the code I really appreciate a...
Issue #2697
[QUESTION] Problem with custom component type and table cell
Hello! I'm trying to add custom component type: And also I'm adding new block: But when I drop this block on the canvas the <td> tag doesn'...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.