Custom Divi Modules – Responsive Padding & Margin Fields

PHP

Create the custom margin field to display in the Design > Spacing toggle:

public function get_fields() {
  return array(
    'my_custom_margin' => array(
      'label'          => esc_html__('Custom Margin', 'ah-my-example'),
      'type'           => 'custom_margin',
      'tab_slug'       => 'advanced',
      'toggle_slug'    => 'margin_padding',
      'mobile_options' => true,
    ),
  );
}

Inside the render() function set up the margin/padding and responsive props:

public function render($attrs, $content = null, $render_slug) {
  $my_custom_margin                    = $this->props['my_custom_margin'];
  $my_custom_margin_tablet             = $this->props['my_custom_margin_tablet'];
  $my_custom_margin_phone              = $this->props['my_custom_margin_phone'];
  $my_custom_margin_last_edited        = $this->props['my_custom_margin' . '_last_edited'];
  $my_custom_margin_responsive_active  = et_pb_get_responsive_status($my_custom_margin_last_edited);

```
}

Render the default/desktop, tablet & mobile CSS:

public function render($attrs, $content = null, $render_slug) {
```
  // Responsive Margin Default/Desktop
  if ('' !== $my_custom_margin && '|||' !== $my_custom_margin) {
    ET_Builder_Element::set_style($render_slug, array(
      'selector'    => '%%order_class%% .my-example-container',
      'declaration' => sprintf(
        'margin-top: %1$s; margin-right: %2$s; margin-bottom: %3$s; margin-left: %4$s;',

        esc_attr(et_pb_get_spacing($my_custom_margin, 'top', '0px')),
        esc_attr(et_pb_get_spacing($my_custom_margin, 'right', '0px')),
        esc_attr(et_pb_get_spacing($my_custom_margin, 'bottom', '0px')),
        esc_attr(et_pb_get_spacing($my_custom_margin, 'left', '0px')),
      ),
    ));
  }

  // Responsive Margin Tablet
  if ('' !== $my_custom_margin_tablet && '|||' !== $my_custom_margin_tablet) {
    ET_Builder_Element::set_style($render_slug, array(
      'selector'    => '%%order_class%% .my-example-container',
      'declaration' => sprintf(
        'margin-top: %1$s; margin-right: %2$s; margin-bottom: %3$s; margin-left: %4$s;',

        esc_attr(et_pb_get_spacing($my_custom_margin_tablet, 'top', '0px')),
        esc_attr(et_pb_get_spacing($my_custom_margin_tablet, 'right', '0px')),
        esc_attr(et_pb_get_spacing($my_custom_margin_tablet, 'bottom', '0px')),
        esc_attr(et_pb_get_spacing($my_custom_margin_tablet, 'left', '0px')),
      ),
      'media_query' => ET_Builder_Element::get_media_query('max_width_980'),
    ));
  }

  // Responsive Margin Phone
  if ('' !== $my_custom_margin_phone && '|||' !== $my_custom_margin_phone) {
    ET_Builder_Element::set_style($render_slug, array(
      'selector'    => '%%order_class%% .my-example-container',
      'declaration' => sprintf(
        'margin-top: %1$s; margin-right: %2$s; margin-bottom: %3$s; margin-left: %4$s;',

        esc_attr(et_pb_get_spacing($my_custom_margin_phone, 'top', '0px')),
        esc_attr(et_pb_get_spacing($my_custom_margin_phone, 'right', '0px')),
        esc_attr(et_pb_get_spacing($my_custom_margin_phone, 'bottom', '0px')),
        esc_attr(et_pb_get_spacing($my_custom_margin_phone, 'left', '0px')),
      ),
      'media_query' => ET_Builder_Element::get_media_query('max_width_767'),
    ));
  }

  $output = sprintf(
    '<div class="my-example-container">Hello World!</div>'
  );

  return $output;
}

JSX

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

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

class MyExampleModule extends Component {

  static slug = 'ah_my_example';

  static css (props) {

    const additionalCss = [];

    //Responsive Margin Default/Desktop
    if (props.my_custom_margin) {
      const my_custom_margin = props.my_custom_margin.split("|");
      const my_custom_margin_last_edited = props.my_custom_margin_last_edited;
      const my_custom_margin_responsive_active = my_custom_margin_last_edited && my_custom_margin_last_edited.startsWith("on")

      additionalCss.push([{
        selector: '%%order_class%% .my-example-container',
        declaration: `margin-top: ${my_custom_margin[0]}; margin-right: ${my_custom_margin[1]}; margin-bottom: ${my_custom_margin[2]}; margin-left: ${my_custom_margin[3]};`,
      }]);

      //Responsive Margin Tablet
      if (props.my_custom_margin_tablet && my_custom_margin_responsive_active && '' !== props.my_custom_margin_tablet) {
        const my_custom_margin_tablet = props.my_custom_margin_tablet.split("|");

        additionalCss.push([{
          selector: '%%order_class%% .my-example-container',
          declaration: `margin-top: ${my_custom_margin_tablet[0]}; margin-right: ${my_custom_margin_tablet[1]}; margin-bottom: ${my_custom_margin_tablet[2]}; margin-left: ${my_custom_margin_tablet[3]};`,
          device: 'tablet',
        }]);
      }

      //Responsive Margin Mobile
      if (props.my_custom_margin_phone && my_custom_margin_responsive_active && '' !== props.my_custom_margin_phone) {
        const my_custom_margin_phone = props.my_custom_margin_phone.split("|");

        additionalCss.push([{
          selector: '%%order_class%% .my-example-container',
          declaration: `margin-top: ${my_custom_margin_phone[0]}; margin-right: ${my_custom_margin_phone[1]}; margin-bottom: ${my_custom_margin_phone[2]}; margin-left: ${my_custom_margin_phone[3]};`,
          device: 'phone',
        }]);
      }
    }

    return additionalCss;
  }

  render () {
    return (
      <div className="my-example-container">
        Hello World!
      </div>
    );
  }
}

export default MyExampleModule;

More info

Not able to use Advanced margin_padding control multiple times ? · Issue #125 · elegantthemes/create-divi-extension (github.com)