JSX file tutorial

[ghost]

I feel like the existing documentation for rendering the display in vb frontend using jsx files is not sufficient especially for developers who don't know React. We still have no guide on where to start with custom modules that are based off of existing default modules.

For example, it might be a good idea to create one for the Blog module or at the very least upload their JSX files so we can figure it out ourselves.

[atanas-dev]

Hi @jomsky ,

Being comfortable with React is required to make components with full Visual Builder support. I think the best place to learn React is the official docs - https://reactjs.org/docs/getting-started.html - they are really detailed and it shows how much effort the React team puts in. Once you are familiar with how to create React components, building modules with Visual Builder support will become much more accessible.

[Paul-S-Taylor]

It would certainly be helpful to have some examples of current modules JSX files. Even if it were for just a couple of them. Being able to cross reference a 'correct' way to do things would make the learning process much much easier. Blurb gets used everywhere - we be a good one to start with.

[themohdarif]

Divi Extension Example includes almost all details. https://github.com/elegantthemes/divi-extension-example Could you please specify at which field you're facing an issue.

[jcdotnet]

@atanas-angelov-dev I am a React developer but I can't implement the new Divi features because they have nothing to do with programming in React, but with the Divi API.

I think we don't need the JSX files of any built-in modules, but you could update the divi-extension-example as Divi is adding new features (dynamic content, etc), we all Divi developers will appreciate this sooo much.

[atanas-dev]

@jcdotnet the extension API for interacting with Dynamic Content specifically has been slightly delayed due to all of the WP5/Gutenberg commotion. Once it's live the relevant documentation explaining how to use it will be published. If you have other features in mind that you cannot find documentation on how to use, please let us know.

[jcdotnet]

Thank you @atanas-angelov-dev,

Yes I have. I cannot find how to hide the automatically added LINK group in every module content tab. I opened this related issue #166

[Paul-S-Taylor]

I want to create a wrapper to show hide any module Is there a mechanism for placing modules inside modules?

[themohdarif]

@jcdotnet link options are adding by _add_link_options_fields function defined in class-et-builder-element.php. You can overwrite this function in your module file to disable this.

protected function _add_link_options_fields() {
            return false;
}

[themohdarif]

@Paul-S-Taylor You can set up a child module inside the parent module.

[Paul-S-Taylor]

@themohdarif - thanks

[themohdarif]

@jcdotnet I would like to add here if you only want to control the link tab. You could set up 'link_options' => false, in advanced field configuration.

[jcdotnet]

Yeah, this is what I finally did for the link options. Before opening the issue I was trying with 'link' instead of 'link_options', your answer helped me to get the name of the field. Thanks again :)