Developer Documentation | Elegant Themes Documentation https://www.elegantthemes.com/documentation/developers/ Just another WordPress site Wed, 13 Jul 2022 13:16:26 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.3 Settings Field Visibility https://www.elegantthemes.com/documentation/developers/divi-module/settings-field-visibility/ Thu, 19 Apr 2018 02:37:53 +0000 https://www.elegantthemes.com/documentation/?p=2524 Learn how to show or hide a setting depending on the value of other settings.

The post Settings Field Visibility appeared first on Elegant Themes Documentation.

]]>

Note: This tutorial series is intended for advanced users. At least a basic understanding of coding in PHP and JavaScript is required.

The visibility of a module setting can depend on the value of other settings by including one or both of the parameters described below in the setting definition.

Setting Visibility Parameters

  • show_if (array)
    • setting (string|string[]) — Setting value(s)
  • show_if_not (array)
    • setting (string|string[]) — Setting value(s)

Setting Visibility Examples

Only show setting_a when:

  • setting_b is on

 

Only show setting_c when:

  • setting_b is on
  • AND setting_a is not some_value

 

Only show setting_a when:

  • setting_b is one of value_1, value_3value_4
  • AND setting_c is not some_value
  • AND setting_d is not one of value_1value_4

 

The post Settings Field Visibility appeared first on Elegant Themes Documentation.

]]>
Module Settings Groups https://www.elegantthemes.com/documentation/developers/divi-module/module-settings-groups/ Thu, 19 Apr 2018 02:37:54 +0000 https://www.elegantthemes.com/documentation/?p=2529 Learn how to configure the toggle groups in the module settings modal.

The post Module Settings Groups appeared first on Elegant Themes Documentation.

]]>

Note: This tutorial series is intended for advanced users. At least a basic understanding of coding in PHP and JavaScript is required.

When editing modules inside the Divi Builder, their settings appear in collapsable groups . You can assign a setting to a specific group using the toggle_slug parameter in the setting definition. You can use one of the builder’s predefined settings groups or you can use a custom group.

Predefined Settings Groups

The following groups are predefined and can be used by simply including one of their slugs as the toggle_slug parameter in a setting definition.

Display Name Slug
Admin Label admin_label
Alignment alignment
Animation animation
Arrows Color arrows_color
Attributes attributes
Audio audio
Background background
Bar Counter bar
Body Text body
Border border
Box Shadow box_shadow
Bullet bullet
Button One button_one
Button Two button_two
Button button
CSS ID & Classes classes
Caption Text caption
Categories categories
Circle circle
Color color
Conditional Logic conditional_logic
Content Text content
Controls Colors colors
Controls controls
Currency & Frequency Text currency_frequency
Custom CSS custom_css
Dividers dividers
Dropdown Menu dropdown
Elements elements
Email Account provider
Email email
Exceptions exceptions
Excluded Item excluded
Featured Image featured_image
Field Options field_options
Field Text form_field
Fields fields
Filter Criteria Text filter
Filters filters
Icon icon
Image & Icon icon_settings
Image & Video image_video
Images images
Image image
Input Text input
Label Text label
Layout layout
Links links
Link link
Map child_filters
Map map
Menu Text menu
Meta Text meta
Module Text module
Navigation navigation
Number Text number
Numbers Text numbers
Overlay overlay
Pagination Text pagination
Percentage Text percent
Play Icon play_icon
Player Pause player_pause
Portfolio Title Text portfolio_header
Price Text price
Redirect redirect
Result Message Text result_message
Rotation rotation
Sale Badge badge
Scroll Down Icon scroll_down
Search Field field
Sizing width
Spacing margin_padding
State state
Styles styles
Subhead Text subhead
Subheader Text subheader
Success Action success_action
Tab Text tab
Text main_content
Text text
Title Text header
Title Text title
Toggle Text toggle
Visibility visibility

Custom Settings Groups

Settings can be assigned to a custom group in the same way that you would assign them to predefined groups. However, you must also define all custom groups in the get_settings_modal_toggles() method of your module’s PHP class.

Settings Group Definition

  • tab_slug (array)
    • toggles (array) — All settings group definitions for the tab
      • toggle_slug (array) — Settings group definition
        • priority (int) — Groups are sorted based on this number (from lowest to highest)
        • sub_toggles (array) — Sub groups for this group (optional)
          • sub_toggle_slug (array) — Sub group definition
            • icon (string) — The slug of a predefined icon (optional)
            • icon_svg (string) — Raw SVG icon (optional)
            • name (string) — Display Name (only shown when no icon is defined)
        • tabbed_subtoggles (bool) — Whether or not to display sub groups as tabs
        • title (string) — Display name (localized)

Custom Settings Groups Example

The post Module Settings Groups appeared first on Elegant Themes Documentation.

]]>
How To Create a Custom Field For a Divi Builder Module https://www.elegantthemes.com/documentation/developers/how-to-create-a-custom-field-for-a-divi-builder-module/ Sun, 10 Jan 2021 00:27:22 +0000 https://www.elegantthemes.com/documentation/?p=3131 Note: This tutorial series is intended for advanced users. At least a basic understanding of coding in PHP and JavaScript is required. Custom Fields for Divi Module Settings Creating a custom field for a Divi module is similar to creating a custom Divi module in the Divi Builder. Both methods require some Javascript, HTML, & […]

The post How To Create a Custom Field For a Divi Builder Module appeared first on Elegant Themes Documentation.

]]>

Note: This tutorial series is intended for advanced users. At least a basic understanding of coding in PHP and JavaScript is required.

Custom Fields for Divi Module Settings

Creating a custom field for a Divi module is similar to creating a custom Divi module in the Divi Builder. Both methods require some Javascript, HTML, & CSS code. However, to create a custom field for a module, there is no need for any PHP because you don’t need to write a PHP class to render the HTML output on the frontend. The main component needed is a ReactJS component class that handles rendering the field inside of the Divi Builder. Then you can define the custom field on your module definition.

In this tutorial, you’ll learn how to create custom fields for a Divi Builder module that will be fully functional in the builder.

Getting Started

Keep in mind. Custom Divi Builder fields must be implemented within a theme, child-theme, or Divi Extension. In this tutorial, we’re going to create a custom field for a custom module in a Divi Extension.

Also, this tutorial is a continuation of previous tutorials that have a specific setup already in place.

If you haven’t already done so, go ahead and do the following before you start this tutorial:

  1. Create a Divi Extension
  2. Create a Custom Module.

Once done, you are ready to continue.

Run Yarn

Before we can test our custom field later on in the Divi Builder we’ll need to compile the JSX code into regular JavaScript. To do that, we need to run yarn. To do this, simply run the following command inside your plugin’s directory:

yarn start

IMPORTANT: Be sure that yarn start is running in the root folder of your plugin. Furthermore, you should keep yarn start running as you develop so that the files continue to compile successfully.

Upgrading Divi Scripts

Custom Divi Builder Fields is a new feature and only available on divi-scripts version 1.0.2 above. So, if you want to add custom field on your existing extension, please upgrade your divi-scripts to version 1.0.2. You can do this by changing divi-scripts version on your package.json located at at the root of your extension directory.

custom fields for divi builder modules

Then run yarn install to update. You can also find a custom field example on this documentation here.

Update Field Directory and File Names

We’ll get to update the code in our files in a bit. But before we can do that, we need to change the default directory and file names for our new custom field.

Look inside your extension’s directory and locate the example custom field located at /includes/fields/Input/Input.jsx.

custom fields for divi builder modules

We’ll use this as a starting point to create a custom input field.

First, rename the Input directory to SimpleInput.

Inside the directory (now named SimpleInput), rename the file Input.jsx to SimpleInput.jsx.

The path to the file should now be includes/fields/SimpleInput/SimpleInput.jsx

how to create a custom field for a Divi Builder Module

Update the Field File

Open the SimpleInput.jsx file and edit it as follows:

Update the React Component Class

For our custom field to be available and fully functional inside the Divi Builder we must create a React Component class that handles the rendering of our custom field based on its props.

By default, the component class is named Input. Change the name of the class Input to SimpleInput.

Then change the name Input to SimpleInput at the bottom of the file to reflect the new name of our component class in order to be exported for use.

Also make sure to update the slug, input id, and input className to reflect the name of the new field.

(NOTE: Depending on the prefix id you chose when setting up your Divi Extension, you may see different names for the static slug, input id, input class, etc. This example has the prefix simp which was chosen when creating the Divi Extension.)

custom fields for divi builder modules

Here is an example of what the code should look like after the change has been made:

// External Dependencies
import React, { Component } from 'react';

// Internal Dependencies
import './style.css';

class SimpleInput extends Component {

  static slug = 'simp_simple_input';

  /**
   * Handle input value change.
   *
   * @param {object} event
   */
  _onChange = (event) => {
    this.props._onChange(this.props.name, event.target.value);
  }

  render() {
    return(
      <input
        id={`simp-simple-input-${this.props.name}`}
        name={this.props.name}
        value={this.props.value}
        type='text'
        className='simp-simple-input'
        onChange={this._onChange}
        placeholder='Your text here ...'
      />
    );
  }
}

export default SimpleInput;

The _onChange() prop is a method handler to save or remove the field setting’s value. It passes 2 parameters.

custom fields for divi builder modules

The first parameter is the field setting’s name. You can use name prop here because it’s already supplied with the correct field name based on the current active tab mode. For example: when you are editing the Title option in Tablet tab mode, the field’s name generated is title_tablet. The second parameter is the field setting value that you want to save.

The field setting type is actually a third parameter that is automatically defined with the current field type prop. So we don’t have to include that parameter with the other 2.

Update the index.js file for the Custom Field

Next, let’s update the import and export statements in the index.js file located at /includes/fields/index.js. To do this, open to edit the index.js file.

Replace all instances of the name for the class and directory (which is Input by default) to the new name SimpleInput.

custom fields for divi builder modules

Here is an example of the final code:

import SimpleInput from './SimpleInput/SimpleInput';

export default [SimpleInput];

Custom Field CSS Styles

Styles for our custom field can be defined using the style.css file in its directory located at /includes/fields/SimpleInput/style.css.

how to create a custom field for a Divi Builder Module

Our custom field is only a basic input element that comes with default builder styling. For now, let’s change the default class selector to .simp-simple-input (rendered in SimpleInput.jsx) throughout the style.css file:

input.simp-simple-input {
  background: #f1f5f9;
  max-height: 30px;
  border: 0;
  border-radius: 3px;
  padding: 7px 10px;
  box-sizing: border-box;
  transition: background 200ms ease;
  color: #4C5866;
  font-family: 'Open Sans', Helvetica, Roboto, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
  display: block;
  width: 100%;
}

input.simp-simple-input:focus {
  background: #e6ecf2;
}

input.simp-simple-input::-webkit-input-placeholder {
  color: #98a7b8;
}

input.simp-simple-input:-moz-placeholder {
  color: #98a7b8;
}

input.simp-simple-input::-moz-placeholder {
  color: #98a7b8;
}

input.simp-simple-input:-ms-input-placeholder {
  color: #98a7b8;
}

input.simp-simple-input[readonly] {
  background: #ffffff !important;
  border: 1px solid #eaedf0 !important;
  cursor: not-allowed;
}

Field Definition

To use our custom field, we need to define it on the module definition of our intended module. For this example, let’s add it to the Simple Header module we created in the previous tutorial.

Open the SimpleHeader.php file located at /includes/modules/SimpleHeader/SimpleHeader.php.

Then add the code to define the custom field. Don’t forget to use simp_simple_input as the field type.

custom fields for divi builder modules

The final code will look like this:


class SIMP_SimpleHeader extends ET_Builder_Module {

	public $slug       = 'simp_simple_header';
	public $vb_support = 'on';

	public function init() {
		$this->name = esc_html__( 'Simple Header', 'simp-simple-extension' );
	}

	public function get_fields() {
		return array(
			'heading'     => array(
				'label'           => esc_html__( 'Heading', 'simp-simple-extension' ),
				'type'            => 'text',
				'option_category' => 'basic_option',
				'description'     => esc_html__( 'Input your desired heading here.', 'simp-simple-extension' ),
				'toggle_slug'     => 'main_content',
			),
			'content'     => array(
				'label'           => esc_html__( 'Content', 'simp-simple-extension' ),
				'type'            => 'tiny_mce',
				'option_category' => 'basic_option',
				'description'     => esc_html__( 'Content entered here will appear below the heading text.', 'simp-simple-extension' ),
				'toggle_slug'     => 'main_content',
			),
			'field'       => array(
				'label'           => esc_html__( 'Custom Field', 'simp-simple-extension' ),
				'type'            => 'simp_simple_input',
				'option_category' => 'basic_option',
				'description'     => esc_html__( 'Text entered here will appear inside the module.', 'simp-simple-extension' ),
				'toggle_slug'     => 'main_content',
			),
		);
	}

	public function render( $unprocessed_props, $content = null, $render_slug ) {
		return sprintf(
			'<h1 class="simp-simple-header-heading">%1$s</h1>
			<div>%2$s</div>',
			esc_html( $this->props['heading'] ),
			$this->props['content']
		);
	}
}

new SIMP_SimpleHeader;

The properties that were added to the field are only the required properties you need to define. But you can add more properties to use on the custom field if you want. For instance, you can add both responsive and hover options for your custom field as well.

Divi Builder and Frontend Output

Our field definition is ready. We just need to update the render() method so that it will display the custom field value. Let’s start with the render() method on the module PHP class.

Open the SimpleHeader.php file and update the render() method as follows:

how to create a custom field for a Divi Builder Module

The final code should look like this:


class SIMP_SimpleHeader extends ET_Builder_Module {

	public $slug       = 'simp_simple_header';
	public $vb_support = 'on';

	public function init() {
		$this->name = esc_html__( 'Simple Header', 'simp-simple-extension' );
	}

	public function get_fields() {
		return array(
			'heading'     => array(
				'label'           => esc_html__( 'Heading', 'simp-simple-extension' ),
				'type'            => 'text',
				'option_category' => 'basic_option',
				'description'     => esc_html__( 'Input your desired heading here.', 'simp-simple-extension' ),
				'toggle_slug'     => 'main_content',
			),
			'content'     => array(
				'label'           => esc_html__( 'Content', 'simp-simple-extension' ),
				'type'            => 'tiny_mce',
				'option_category' => 'basic_option',
				'description'     => esc_html__( 'Content entered here will appear below the heading text.', 'simp-simple-extension' ),
				'toggle_slug'     => 'main_content',
			),
			'field'       => array(
				'label'           => esc_html__( 'Custom Field', 'simp-simple-extension' ),
				'type'            => 'simp_simple_input',
				'option_category' => 'basic_option',
				'description'     => esc_html__( 'Text entered here will appear inside the module.', 'simp-simple-extension' ),
				'toggle_slug'     => 'main_content',
			),
		);
	}

	public function render( $unprocessed_props, $content = null, $render_slug ) {
		return sprintf(
			'<h1 class="simp-simple-header-heading">%1$s</h1>
			<div>%2$s</div>
			<p>%3$s</p>',
			esc_html( $this->props['heading'] ),
			$this->props['content'],
			$this->props['field']
		);
	}
}

new SIMP_SimpleHeader;

Now, let’s edit the render() method of the React component and make it produce the same output that we defined in our PHP render() method.

Open the SimpleHeader.jsx file and update the render() method as follows:

how to create a custom field for a Divi Builder Module

The final code should look like this:

// External Dependencies
import React, { Component, Fragment } from 'react';

// Internal Dependencies
import './style.css';


class SimpleHeader extends Component {

  static slug = 'simp_simple_header';

  render() {
    return (
      <Fragment>
        <h1 className="simp-simple-header-heading">{this.props.heading}</h1>
        <div>
          {this.props.content()}
        </div>
        <p>
          {this.props.field}
        </p>
      </Fragment>
    );
  }
}

export default SimpleHeader;

Here you can see how the output of the render() method of the php file corresponds to the output of the render() method of the php file which now includes the new field wrapped in a p tag.

how to create a custom field for a Divi Builder Module

Add Selectors if Needed

Wrapping the new field output with a p tag makes sense here because we are interested in simple text output. This also is a good opportunity to add your own custom selectors (CSS ID, CSS Class) to the p tag for your own needs. Just make sure you add the same selectors to the output of the render() method of the PHP file and the JSX file.

Testing Your Custom Fields

If you already have yarn start running as we suggested in the first step, you can now launch the Divi Builder and check out your Simple Input field!

If not, before we can test our custom field in the Divi Builder we need to compile the JSX code into regular JavaScript. To do that, simply run the following command inside your plugin’s directory:

yarn start

As a reminder, you should keep yarn start running as you continue to edit your files so that the files continue to compile successfully.

To test out the custom field, go to your Divi site and open the settings of the custom Simple Header Module. The new Custom Field will be under the content tab.

custom fields for divi builder modules

Wrapping up

When you are finished development, remember to stop yarn start from running in your terminal (hitting ctrl + c within the terminal usually does the trick).

The post How To Create a Custom Field For a Divi Builder Module appeared first on Elegant Themes Documentation.

]]>
Divi Template Hooks https://www.elegantthemes.com/documentation/developers/hooks/divi-template-hooks/ Thu, 19 Apr 2018 02:37:58 +0000 https://www.elegantthemes.com/documentation/?p=2548 Learn about the hooks that are available in Divi's template files.

The post Divi Template Hooks appeared first on Elegant Themes Documentation.

]]>
 footer.php

et_after_main_content

Fires after the main content, before the footer is output.

Type: Action
Since: 3.1


header.php

et_head_meta

Fires in the head, before wp_head() is called. This action can be used to insert elements into the beginning of the head before any styles or scripts.

Type: Action
Since: 1.0

et_html_top_header

Filters the HTML output for the top header.

Type: Filter
Since: 3.1

Param Type Description
$top_header string HTML output for the top header

et_html_slide_header

Filters the HTML output for the slide header.

Type: Filter
Since: 3.1

Param Type Description
$slide_header string HTML output for the slide header

et_html_logo_container

Filters the HTML output for the logo container.

Type: Filter
Since: 3.1

Param Type Description
$logo_container string HTML output for the logo container

et_header_top

Fires at the end of the et-top-navigation element, just before its closing tag.

Type: Action
Since: 1.0

et_html_main_header

Filters the HTML output for the main header.

Type: Filter
Since: 3.1

Param Type Description
$main_header string HTML output for the main header

et_before_main_content

Fires after the header, before the main content is output.

Type: Action
Since: 3.1


index.php

et_pb_index_blog_image_width

Filters the width used to retrieve featured images via wp_get_attachment_image_src().

Type: Filter
Since: 1.0

Param Type Description
$width string Width value as a string

et_pb_index_blog_image_height

Filters the height used to retrieve featured images via wp_get_attachment_image_src().

Type: Filter
Since: 1.0

Param Type Description
$height string Height value as a string

page.php

et_pb_index_blog_image_width

See index.php above for definition.

et_pb_index_blog_image_height

See index.php above for definition.


single.php

et_before_content

Fires right before the_content() is called.

Type: Action
Since: 1.0

et_pb_index_blog_image_width

See index.php above for definition.

et_pb_index_blog_image_height

See index.php above for definition.


single-project.php

et_pb_portfolio_single_image_width

Filters the width used to retrieve featured images via wp_get_attachment_image_src().

Type: Filter
Since: 1.0

Param Type Description
$width string Width value as a string

et_pb_portfolio_single_image_height

Filters the height used to retrieve featured images via wp_get_attachment_image_src().

Type: Filter
Since: 1.0

Param Type Description
$height string Height value as a string

The post Divi Template Hooks appeared first on Elegant Themes Documentation.

]]>
Divi Module Hooks https://www.elegantthemes.com/documentation/developers/divi-module-hooks/ Thu, 11 Nov 2021 19:34:59 +0000 https://www.elegantthemes.com/documentation/?p=3692 Learn about the hooks that are available in Divi’s module files.

The post Divi Module Hooks appeared first on Elegant Themes Documentation.

]]>
Contact Form

et_pb_contact_form_submit

Fires after contact form is submitted. This action can be used to trigger follow up actions after the contact form is submitted. Use $et_contact_error variable to check whether there is an error on the form entry submit process or not.

Type: Action
Since: 4.13.1

Param Type Description
$processed_fields_values array Processed fields values
$et_contact_error array Whether there is an error on the form entry submit process or not
$contact_form_info array Additional contact form info

The post Divi Module Hooks appeared first on Elegant Themes Documentation.

]]>
Divi Builder PHP Hooks https://www.elegantthemes.com/documentation/developers/divi-builder-php-hooks/ Thu, 11 Nov 2021 20:10:24 +0000 https://www.elegantthemes.com/documentation/?p=3699 Learn about the PHP hooks that are available in Divi Builder features.

The post Divi Builder PHP Hooks appeared first on Elegant Themes Documentation.

]]>
Conditional Display

et_module_process_display_conditions

Filters every rendered module output for processing “Display Conditions” option group.

Type: Filter
Since: 4.13.1

Param Type Description
$output string HTML output of the rendered module.
$render_method string The render method used to render the module.
$this ET_Builder_Element The current instance of ET_Builder_Element.

et_is_display_conditions_option_visible

Filters “Display Conditions” option visibility to determine whether to add its field to the Visual Builder or not. Useful for displaying/hiding the option on the Visual Builder.

Type: Filter
Since: 4.13.1

Param Type Description
$default_status boolean True to make the option visible on VB, False to make it hidden.

et_is_display_conditions_functionality_enabled

Filters “Display Conditions” functionality to determine whether to enable or disable the functionality or not. Useful for disabling/enabling “Display Condition” feature site-wide.

Type: Filter
Since: 4.13.1

Param Type Description
$default_status boolean True to enable the functionality, False to disable it.

The post Divi Builder PHP Hooks appeared first on Elegant Themes Documentation.

]]>
Divi Builder Javascript Hooks https://www.elegantthemes.com/documentation/developers/divi-builder-javascript-hooks/ Wed, 13 Jul 2022 02:53:17 +0000 https://www.elegantthemes.com/documentation/?p=10116 Learn about the Javascript hooks that are available in Divi Builder features.

The post Divi Builder Javascript Hooks appeared first on Elegant Themes Documentation.

]]>
Layout

{module_type}.css.selector

Filters module selector on the rendered layout. This filter is fired before selector processing. Third-party extensions may use this filter to modify module CSS selector such as removing builder selector prefix, append child element class, etc.

Type: Filter
Since: 4.0.0

Param Type Description
selector string Module selector.
type string Module slug.

Examples:

/**
 * Filters Hello World module selector after builder content is loaded.
 */
document.addEventListener('ETDOMContentLoaded', function() {
    // Module type: smpl_hello_world.
    wp.hooks.addFilter('smpl.hello.world.css.selector', 'smpl-setting-update', function(selector){
        // Processing Hello World module selector here ...
        return selector;
    });
});

 

{module_type}.processed.css.selector

Filters processed module selector on the rendered layout. This filter is fired after selector processing. Third-party extensions may use this filter to modify module CSS selector such as removing builder selector prefix, append child element class, etc.

Type: Filter
Since: 4.17.6

Param Type Description
selector string Processed module selector.
type string Module slug.

Examples:

/**
 * Filters Hello World module selector after builder content is loaded.
 */
document.addEventListener('ETDOMContentLoaded', function() {
    // Module type: smpl_hello_world.
    wp.hooks.addFilter('smpl.hello.world.processed.css.selector', 'smpl-setting-update', function(selector){
        // Processing Hello World module selector here ...
        return selector;
    });
});

The post Divi Builder Javascript Hooks appeared first on Elegant Themes Documentation.

]]>
Divi Builder JavaScript API https://www.elegantthemes.com/documentation/developers/code-reference/divi-builder-javascript-api/ Thu, 19 Apr 2018 02:37:56 +0000 https://www.elegantthemes.com/documentation/?p=2533 The builder's JavaScript API definition.

The post Divi Builder JavaScript API appeared first on Elegant Themes Documentation.

]]>
window : Window

Global window object.

Kind: global typedef
Emits: event:et_builder_api_ready

ETBuilderModule : React.Component | object

Custom module for the Divi Builder.

Kind: global typedef

Static Properties (Required)

Name Type Description
slug string The module’s slug as defined in it’s PHP class

 

Methods (Required)

Name Type Description
render function

API

Divi Builder API object passed to registered callbacks of the event:et_builder_api_ready event.

Kind: global constant

 

API.Modules

Manage custom modules.

Kind: static property of API
Since: 3.1

Modules.register(modules)

Register one or more custom modules.

Kind: static method of Modules
Since: 3.1

Param Type Description
modules Array.<ETBuilderModule> Modules to register.

 

API.Utils

Useful functions

Kind: static property of API
Since: 3.1

 

Utils._()

Lodash – A modern JavaScript utility library delivering modularity, performance & extras.

Kind: static method of Utils
Link: https://github.com/lodash/lodash
License: MIT
Copyright: JS Foundation and other contributors https://js.foundation/

Utils.classnames() ⇒ string

Generates className value based on the args provided. Takes any number of args which can be a string or an object. The argument foo is short for { foo: true }. If the value associated with a given key is falsy, the key won’t be included in the output.

Kind: static method of Utils
Link: https://github.com/JedWatson/classnames
License: MIT
Copyright: 2017 Jed Watson

Type
string | Object.<string, boolean>

Examples:

classNames('foo', 'bar');                 // => 'foo bar'
classNames('foo', { bar: true });         // => 'foo bar'
classNames({ 'foo-bar': true });          // => 'foo-bar'
classNames({ 'foo-bar': false });         // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true });     // => 'foo bar'

 

Utils.decodeOptionListValue(encoded_value) ⇒ object

Decode string value of option_list module setting field type.

Kind: static method of Utils
Since: 3.1

Param Type Description
encoded_value string Value to be decoded

 

Utils.fontnameToClass(font_name) ⇒ string

Returns CSS class for a google font.

Kind: static method of Utils
Since??:

Param Type Description
font_name string Font name for which to return a CSS class

 

Utils.linkRel(saved_value) ⇒ string

Generate link rel HTML attribute value based on a value saved in a module’s settings.

Kind: static method of Utils
Since: 3.1

Param Type Description
saved_value string Value saved in module settings

 

Utils.maybeLoadFont(font_name)

Loads a Google Font if it hasn’t already been loaded.

Kind: static method of Utils
Since: 3.1

Param Type Description
font_name string The name of the font to load

 

Utils.processFontIcon(icon, is_down_icon) ⇒ string

Generates HTML for a saved font-based icon value.

Kind: static method of Utils
Since: 3.1

Param Type Description
icon string The saved icon value
is_down_icon boolean Whether or not the icon is one of the down arrow icons

 

Utils.setElementFont(font_data, use_important, default_values) ⇒ string

Generates font related CSS style properties from font data saved in a module’s settings.

Kind: static method of Utils
Since: 3.1

Param Type Description
font_data string Font data saved in module settings
use_important boolean Whether or not to use !important
default_values object Mapping of default values for the font settings

 

Utils.hasValue(value) ⇒ boolean

Check whether given value can be printed or not (string). Originally a simpler way to check against empty string, but later several checks were added as well to avoid unnecessary repetition. A value considered empty if:

  • – is an empty string
  • – is undefined
  • – is false
  • – is NaN

Kind: static method of Utils
Since: 4.14.9

Param Type Description
value mixed Value to check.

 

Utils.generateStyles(moduleArgs) ⇒ array

Use the `Responsive.generateResponsiveCSS` with addition to generate sticky state styles if module enable it.

Kind: static method of Utils
Since: 4.17.5

Param Type Description
moduleArgs object Module arguments.

Examples:

/**
 * Module arguments.
 *
 * @typedef moduleArgs
 * @type {Object}
 * @property {string} address: ''
 * @property {Object} attrs: {}
 * @property {string} name: ''
 * @property {string} defaultValue: ''
 * @property {string} type: ''
 * @property {boolean} forceReturn: false
 * @property {string} selector: '%%order_class%%'
 * @property {string} cssProperty: ''
 * @property {boolean} important: false
 * @property {boolean} hover: true
 * @property {boolean} sticky: true
 * @property {boolean} responsive: true
 * @property {null|boolean} isStickyModule: null
 * @property {string} stickyPseudoSelectorLocation: 'order_class'
 */

/**
 * Hello World module inline styling.
 *
 * @param {Object} props Module attribute names and values.
 * @param {Object} moduleInfo Module info.
 *
 * @return array
 */
static css(props, moduleInfo) {
  const additionalCSS = [];
  const {
    generateStyles,
  } = window.ET_Builder.API.Utils;

  /**
   * Box colors arguments.
   *
   * @var {moduleArgs}
   */
  const boxColorsArgs = {
    attrs: props,
    name: 'box_color',
    selector: '%%order_class%% .smpl-hello-world-box-area',
    cssProperty: 'background-color',
  };
  const boxColors     = generateStyles(boxColorsArgs);

  /**
   * boxColors output:
   * 
   * [
   *    {
   *       selector: '%%order_class%% .smpl-hello-world-box-area',
   *       declaration: 'background-color: red;',
   *       device: 'desktop', // desktop, tablet, phone
   *    }
   * ]
   */
  additionalCSS.push(boxColors);

  return additionalCSS;
}

 

API.isRegistered(slug) ⇒ boolean

Whether or not a component is registered.

Kind: static method of API
Since: 3.1

Param Type Description
slug string The component’s slug

 

API.registerModules(modules)

Convenience wrapper for register

Kind: static method of API
Since: 3.1

Param Type Description
modules Array.<ETBuilderModule> Modules to register.

The post Divi Builder JavaScript API appeared first on Elegant Themes Documentation.

]]>
Defining Module Settings https://www.elegantthemes.com/documentation/developers/divi-module/defining-module-settings/ Thu, 19 Apr 2018 02:37:50 +0000 https://www.elegantthemes.com/documentation/?p=2512 Learn how to define module settings using the field types provided by Divi.

The post Defining Module Settings appeared first on Elegant Themes Documentation.

]]>

Note: This tutorial series is intended for advanced users. At least a basic understanding of coding in PHP and JavaScript is required.

Module settings are defined in the get_fields() method of the module’s PHP class. A setting definition is simply an associative array of parameters.

Required Parameters

  • type (string) — The field type used to render the setting in the module settings modal

Optional Parameters

  • default (string) — Default value
  • description (string) — Description (localized)
  • id (string) — CSS id for the setting’s field
  • label (string) — Display name (localized)
  • option_category (string) — Option category slug (for the Divi Role Editor)
  • show_if (array) — Only show the setting when certain settings have certain values
  • show_if_not (array) — Only show the setting when certain settings do not have certain values
  • tab_slug (string) — Modal tab slug
  • toggle_slug (string) — Modal tab settings group toggle slug

Field Types

The Divi Builder has a comprehensive selection of field types for module settings. Below you’ll find a list of available field types, each with a screenshot and a list of any additional parameters that must be included in the setting definition. The value to use for the type parameter of the setting definition is in parenthesis next to each field type name.

Text (text)

Select (select)

Select Field Parameters

  • options (array) — Option slugs mapped to their display names (localized)

Checkboxes (multiple_checkboxes)

Checkboxes Field Parameters

  • options (array) — Option slugs mapped to their display names (localized)

Toggle Button (yes_no_button)


Toggle Button Field Parameters

  • options (array)
    • off (string) — Display name for the “off” state (localized)
    • on (string) — Display name for the “on” state (localized)

Range Slider (range)

Range Slider Field Parameters

  • range_settings (array)
    • min (string) — Minimum value
    • max (string) — Maximum value
    • step (string) — Minimum distance between values when using the slider
  • validate_unit (bool) — Whether or not to validate unit

The post Defining Module Settings appeared first on Elegant Themes Documentation.

]]>
Defining Custom CSS Fields For Modules https://www.elegantthemes.com/documentation/developers/divi-module/defining-custom-css-fields-for-modules/ Thu, 19 Apr 2018 02:37:52 +0000 https://www.elegantthemes.com/documentation/?p=2521 Learn how to define custom CSS fields for modules.

The post Defining Custom CSS Fields For Modules appeared first on Elegant Themes Documentation.

]]>

Note: This tutorial series is intended for advanced users. At least a basic understanding of coding in PHP and JavaScript is required.

Custom CSS fields appear in the Advanced tab of the module settings modal and allow users to set custom CSS properties for predefined target elements within the module’s HTML output. The fields are automatically generated based on the configuration defined in the module’s get_custom_css_fields_config() method.

Custom CSS Fields Configuration

  • element_one (array)
    • label (string) — Display name for the target element (localized)
    • selector (string) — CSS selector for the target element
    • no_space_before_selector (bool) — Don’t put a space before selector
  • element_two (array)
    • label (string) — Display name for the target element (localized)
    • selector (string) — CSS selector for the target element
    • no_space_before_selector (bool) — Don’t put a space before selector

Custom CSS Fields Configuration Example

The post Defining Custom CSS Fields For Modules appeared first on Elegant Themes Documentation.

]]>