BUG: Runtime updated traits not EDIT mode.
Question
Hello @artf
I having issue with a traits. When I drag and drop the block to canvas it's traits showing fine in under settings section. but when I saved and edit the in 2nd time and selected that tag in canvas that traits is now populating in setting Section. Please Please Please HELP!.
`// Custom Heading Component blockManager.add('header', { label: 'Headings', category: 'Components', media: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.3 11.5h7.4V6.9l-.2-1.6a1 1 0 00-.5-.5c-.3-.2-.7-.3-1-.3h-.6v-.4h6.8v.4h-.6c-.4 0-.7.1-1 .3a1 1 0 00-.6.6L18 6.9v10.3c0 .8 0 1.3.2 1.6 0 .2.2.3.4.5.4.2.7.3 1.1.3h.6v.4h-6.8v-.4h.5c.7 0 1.2-.2 1.5-.6.2-.3.3-.9.3-1.8v-4.9H8.3v4.9l.1 1.6.5.5c.3.2.7.3 1 .3h.7v.4H3.7v-.4h.6c.7 0 1.1-.2 1.4-.6.2-.3.3-.9.3-1.8V6.9L6 5.3a1 1 0 00-.5-.5l-1-.3h-.7v-.4h6.9v.4H10c-.4 0-.8.1-1 .3a1 1 0 00-.6.6l-.1 1.5v4.6z"/></svg>',
activate: 1,
select: 1,
removable: true, // Can't remove it
draggable: true, // Can't move it
copyable: true, // Disable copy/past
content: {
type: 'header',
content: 'Insert your heading'
},
});
dc.addType("header", {
isComponent: function(t) {
var e = t && t.tagName;
if (e && ["H1", "H2", "H3", "H4", "H5", "H6"].indexOf(e) >= 0) return 1
},
extend: "text",
model: {
defaults: {
name: "Heading",
tagName: "h1",
traits: [
'id',
'title',
{
type: "select",
options: [{
value: "h1",
name: "One (largest)"
}, {
value: "h2",
name: "Two"
}, {
value: "h3",
name: "Three"
}, {
value: "h4",
name: "Four"
}, {
value: "h5",
name: "Five"
}, {
value: "h6",
name: "Six (smallest)"
}, , {
value: "p",
name: "paragraph"
}],
label: "Heading Or paragraph",
name: "tagName",
changeProp: 1
}
]
}
}
});
After Saving in database when in edit mode the heading not show traits
Newly added heading show the traits
Answers (3)
Are you defining your custom component in a plugin?
Are you defining your custom component in a plugin?
No. Just Add in init function
editor = grapesjs.init({ const dc = editor.DomComponents; // Custom Heading Component blockManager.add('header', { label: 'Headings', category: 'Components', media: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.3 11.5h7.4V6.9l-.2-1.6a1 1 0 00-.5-.5c-.3-.2-.7-.3-1-.3h-.6v-.4h6.8v.4h-.6c-.4 0-.7.1-1 .3a1 1 0 00-.6.6L18 6.9v10.3c0 .8 0 1.3.2 1.6 0 .2.2.3.4.5.4.2.7.3 1.1.3h.6v.4h-6.8v-.4h.5c.7 0 1.2-.2 1.5-.6.2-.3.3-.9.3-1.8v-4.9H8.3v4.9l.1 1.6.5.5c.3.2.7.3 1 .3h.7v.4H3.7v-.4h.6c.7 0 1.1-.2 1.4-.6.2-.3.3-.9.3-1.8V6.9L6 5.3a1 1 0 00-.5-.5l-1-.3h-.7v-.4h6.9v.4H10c-.4 0-.8.1-1 .3a1 1 0 00-.6.6l-.1 1.5v4.6z"/></svg>',
activate: 1,
select: 1,
removable: true, // Can't remove it
draggable: true, // Can't move it
copyable: true, // Disable copy/past
content: {
type: 'header',
content: 'Insert your heading'
},
});
dc.addType("header", {
isComponent: function(t) {
var e = t && t.tagName;
if (e && ["H1", "H2", "H3", "H4", "H5", "H6"].indexOf(e) >= 0) return 1
},
extend: "text",
model: {
defaults: {
name: "Heading",
tagName: "h1",
traits: [
'id',
'title',
{
type: "select",
options: [{
value: "h1",
name: "One (largest)"
}, {
value: "h2",
name: "Two"
}, {
value: "h3",
name: "Three"
}, {
value: "h4",
name: "Four"
}, {
value: "h5",
name: "Five"
}, {
value: "h6",
name: "Six (smallest)"
}, , {
value: "p",
name: "paragraph"
}],
label: "Heading Or paragraph",
name: "tagName",
changeProp: 1
}
]
}
}
});
});The first rule of defining new component types is to place the code inside a plugin.
From docs
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1369
[BUG] Class of a block doesn't always show in the classes section
Hello everyone, I have added many custom blocks and gave the same css class to all the images in those blocks. Let's call it for now 'image...
Issue #2850
[QUESTION] Add Dropdown to block using Traits
Hi @artf , I hope that you are well, I was wondering whether you could help me with some simple issue that I am having (I have recently sta...
Issue #2014
[BUG] - Not able to get content of a link block
Hello all, I am using grapesjs version 0.14.52. I am having the following issue: When I drop a link block inside the canvas, I can use the...
Issue #2013
[BUG] - Not able to get content of a link block
Hello all, I am using grapesjs version 0.14.52. I am having the following issue: When I drop a link block inside the canvas, I can use the...
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.