How to use CSS controls in editor mode ?

SatishKumarPrajapati commented 6 years ago

Hi

I am a developer and working on creating a custom widget based on the API documentation you have released recently.

I really love the way you guys have added the ability to create custom widgets. I have partially succeeded in this.

What I have done so far:

Created a divi extension using the command line.
Added my own widget in it. (it is displaying fine in the widget list. )
Added some controls like text and tinymce and they are working fine in visual builder as well as on frontend. And have also added the jsx file.
Now I have added some CSS control like text color, font etc. They are working fine on the frontend.
From here my issue starts, it is not reflecting when I am in editor mode. I am sure that some additional step is required to make CSS controls work in visual editor but sample Hello World example doesn't include any css control so I am not getting any clue regarding this. Can you give me some idea about this or update your Hello World example to show how to use CSS controls in a widget?

lots0logs commented 6 years ago

Hi, here's an example of how to add inline css styles to your react component on-the-fly:

https://github.com/elegantthemes/divi-extension-example/blob/8837a49901b81c410fdad56f067c0523250d0e8e/includes/modules/CustomCtaAllOptions/CustomCtaAllOptions.jsx#L9-L53

SatishKumarPrajapati commented 6 years ago

Thank you very much

BoDonkey commented 6 years ago

I was looking at the example you posted and trying to use it in my own extension. Can you explain a little more of what is going on behind the scene? So, you have a static function returning an array, but where is that function being called from, or do we have to add a call to the function somewhere else in our extension?

lots0logs commented 6 years ago

When the props have changed (ie. the user adjusted a module setting) your component's render method is called with the new props. The css static method is called by the builder automatically just before your component's render method is called. Let me know if you have any further questions :smiley:

elegantthemes / create-divi-extension

How to use CSS controls in editor mode ? #30