[QUESTION] - Add style sector for specific Css rule

Question

Hey @artf ,

COuld you give your help on this one? I want to disable the user to able to select the wrapper block (body) but I still want to let them style it. So I was thinking to add a custom sector that would be displayed for all blocks but, the styles applied in that sector would be applied specifically into a css rule. Is there a way to achieve that? I spend some time digging the code but I didn't figure out a way to do it

arthuralmeidap · Accepted Answer

There are several drawbacks to my approach but, since on this app we are not using the Selectors for the Style Manager, look what I did; I added a custom target property to my new sector. I started to listen the change:open for each sector and if the sector has my new custom prop I set the css rule that I want as target using editor.StyleManager.setTarget('.my-class', { targetIsClass: true }); otherwise I set the current selected block like editor.StyleManager.setTarget(editor.getSelected());

arthuralmeidap · Answer

Just an example:

The user has selected a Text Block. On the Style Manager panel, would display as it is today. The css selectors applied to it and the sections like General or Decorations to style it and besides that would have some Global section that apply the styling for a specific css rule

artf · Answer

Yeah I think it's possible, you should append a new sector with your inputs manually on editor load and on input change update the wrapper style editor.getWrapper().addStyle({ color: yourInputEl.value }) or if you need some specific CSS rule editor.CssComposer.setRule('.your-class', { color: '...' });

Add style sector for specific Css rule

Question

Answers (3)

Related Questions and Answers

How to add !important in all the generated apis

Ways to load Html content through reactjs wrapper

[QUESTION] In creating a custom block how do you create it's corresponding settings?

[QUESTION] Multiple identical classes usage

Paid Plugins That Match This Issue

Related tutorials

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Browse Plugin Categories