BUG: How to restrict the style manger properties based upon the component
Question
Version:
0.15.9
What is the expected behavior? Whenever any component drag and drop into the builder part, that related style's properties I need to customize it. For instance Drag and drop the link component into the builder part, then I click on that, it shows the following style properties(Please check the link) https://snipboard.io/cCFUOD.jpg But I need to customize that whatever I want, like Dimension I want to show apart from all.
What is the current behavior? Showing all style manager properties
Are you able to attach screenshots, screencasts, or a live demo? Yes
I read the documentation but I didn't get any solution for this. Could u guys anyone please help me with this
Answers (3)
@dharmatv Hi there! This is not a bug, you can achieve it by defining the styleable properties for a component.
editor.DomComponents.addType('customComp', {
model: {
defaults: {
tagName: 'customComp',
stylable:['color']
}
},
view: {
tagName: 'div',
...
}
});
Demo: Drag and drop the last block and you will see only (text)color can be changed. https://jsfiddle.net/MartinPutz/o376qsy1/
Hi @MartinPutz Thanks for your reply I understand. My requirement is needed only grapesjs components should not be custom components I didn't mention sorry for that
You can use data attributes <div data-gjs-stylable="['color']"></div>
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3088
BUG: How to view style manager properties after drag and drop
Version: 0.15.9 Are you able to reproduce the bug from the demo? Yes What is the expected behavior? (In newsletter plugin)Click on the comp...
Issue #6590
BUG: Able to access/delete/drag the locked components in layermanager
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? chrome Reproducible demo link https://code...
Issue #5037
FEATURE: How to drag external text into particular index inside the textable component?
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link NA Describe...
Issue #4257
BUG: Background modification doesn't work for non-images
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v100 Reproducible demo link https:/...
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.