Divi 3.1 Step by Step IV – Adding React rendering and Customizing the Divi Audio module

by | May 25, 2018 | Featured | 4 comments

Divi 3.1 Step by Step IV – Adding React rendering and Customizing the Divi Audio module

Hi everyone from Howidivit! Today we are going to talk about a lot of things concerning Divi and the Divi module customization. In the last Series post we have seen how to create a brand new custom module with Divi 3.1.

Now we are going to deepen the React component of our new Divi module in the first part of this post; then we will show you, in a second part, how to add new custom settings to an existing Divi module, the Audio one in our case.

So, let’s jump right in!

A QUICK LOOK AT REACT

In the last post we have seen how to create a custom Divi module perfectly working in the Divi Builder and in the rendering when published; however we just scrape the surface about the live rendering of our module in the Visual Builder.

To do that, in fact, we have to edit our .jsx file that’s handling the React component of every Divi module. JSX stands for JavaScript XML and is a javascript extension used in React applications; we don’t want to dive too more into the React topic (we will write on this argument a post in the next weeks!), we will see just an example of how to render in the visual builder some parts of our module.

All the code we are interested in goes in the ‘render()’ function of our .jsx file. So the first thing we can do is to write some variables into which we will store our settings values thanks to the ‘this.props.[here-the-setting-name]’ method:

Now that we have our values stored in ‘constants’ (or ‘variables’) we can pass to the return() statement in which we will use a <Fragment></Fragment> syntax – that is a part of a React Component in which we can render more than one html element – with our Html structure inside wrapping all our constants in curly braces:

The code above is just an example rendering only the Title of our Audio, the Artist and the Album and finally the Cover Art Image. We will use, then, Css classes (using the ‘className’ attribute) for styling our elements.

HOW TO CUSTOMIZE DIVI MODULES

Let’s give a look now at another way we have in order to add features to our Divi; we can, in fact, customize existing Divi modules. This is not a common practice and – as we will see below – can raise some problems; however has the great advantage of inheriting all the settings of a module saving us a lot of time. Essentially we can do it simply using some Divi filters:

  • et_pb_all_fields_unprocessed_$slug;
  • et_pb_module_shortcode_attributes;
  • et_module_shortcode_output;

For now we will focus on the first one and the third one. The ‘et_pb_all_fields_unprocessed_$slug’ (where $slug is the slug of the module) allows us to filter the module settings, adding essentially all the options we need; then thanks to the ‘et_module_shortcode_output’ we can render the Html output on our published posts.

LET’S WRITE OUR NEW SETTINGS

So let’s dive into the code. We can do all that we need just with a couple of functions and filters in our main plugin file. We will write our first function in which we set our custom $fields and then, at the bottom of the function we will merge these ones with the existing module $fields:

So we added several fields like the Image Width (in Content->Image), the Margin of the Audio (in Content->Audio) and a lot of styles about the color of buttons, timer and sliders, the size, color and border-radius of the handle, all wrapped in a new ‘Audio’ toggle in the Design tab. Then we simply add the proper filter:

Next we will write another function in which a) first check for the slug of the module, b) we store our field values (thanks to the $module->props[‘field_value’]) and c) we will modify our Html output:

In our case we ensure that each field has been set and then filter the output adding a <style> with the needed Css inside. Obviously as final step we have to add the proper filter:

That’s all! Now we are able to get a result like this.

However, a couple of things to note. The first is that our custom fields will appear properly in the Visual Builder but these ones don’t render in VB; then another issue in our case has risen from the add <style>s to our module: this seems to cause a display error in the VB on refreshing the page without affecting anyway our Html output in published posts.

NEXT TUESDAY POST

Ok. We added a lot of fields to our custom Audio module just using a couple of filters in our main plugin file. In the next Series post we will see how to finish our plugin, adding custom design touch to our custom module and fixing some issues if possible.

Let us know in the comments if you have experienced something similar.

Cheers!

4 Comments

  1. Stephen
    Stephen on May 27, 2018 at 3:44 pm

    Hi,

    Can you indicate which file the code above should be in. I am not 100% sure what the main plugin file is

    Reply
    • Dan Mardis
      Dan Mardis on May 28, 2018 at 11:56 am

      Hi Stephen,
      the main plugin file is that one located in the main directory of your plugin… if you have created your plugin using the Create Divi Extension tool this file will have the name of your plugin followed by .php. So in our case we have called our plugin “I Divi Advanced Audio” and our main plugin file name is ‘I-divi-advanced-audio.php’….

      You can place your functions just below the ‘[prefix]_initialize_extension’ function you will find by default in your main plugin file.

      NOTE: About the ‘idea_render_audio_settings()’ function i’ve updated a little the code in order to avoid a display issue when on the Visual Builder.. i will talk more about it in the next Series post 😉

      Reply
  2. Manoj Milani
    Manoj Milani on July 23, 2018 at 9:42 am

    I am creating a divi module. I need to know if I can render custom output that I am preparing in the render function to use in the react jsx file?

    Reply
    • Dan Mardis
      Dan Mardis on July 24, 2018 at 10:54 am

      Hi Manoj, sure you can do it. However, obviously, rendering in the Jsx file (thus in React) can be – and often is – a bit more complicated and you should look to the React syntax to avoid issues (especially when your output is going to be more than some texts and images). You can stick with the React.js official documentation and also follow along with our Divi React series posts here on Howidivit… 😉

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

SupportHost

You have Successfully Subscribed!

CodeCanyon Plugins

You have Successfully Subscribed!

Elegant Themes

You have Successfully Subscribed!

Try Divi!

You have Successfully Subscribed!

Divi Plugins

You have Successfully Subscribed!

Advanced Blurbs Plugin

You have Successfully Subscribed!

Bloom!

You have Successfully Subscribed!

Divi Cake Layouts

You have Successfully Subscribed!

Divi Cake Plugins

You have Successfully Subscribed!