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)