Not able to use Advanced margin_padding control multiple times ?

[SatishKumarPrajapati]

Problem Description

There is no option to use advanced margin padding control to use multiple times as other controls are easy to use multiple times.

Steps To Reproduce

1. $advanced_fields['margin_padding']['part2'] = [ 'css' => [ 'main' => [ 'margin' => "%%order_class%% .bpd-st-transform-text-title .bpd-st-rest-text", 'padding' => "%%order_class%% .bpd-st-transform-text-title .bpd-st-rest-text", ], ], 'hide_text_align' => true, 'tab_slug' => 'advanced', 'toggle_slug' => 'part2', ];

[IvanChiurcci]

Use custom_margin and custom_padding controls instead, you can use them multiple times in a module.

[SatishKumarPrajapati]

Yes i can use that but if i use advanced margin_padding then its easy to use and custom_margin or custom_padding issue in render.

[xxtesaxx]

I believe the advanced field for margin/padding can only be added once and by default it is used for the whole module (the module wrapper). You can add as many fields of type "custom_margin" and use them for margins and paddings as you desire. It's quiet easy to implement it and you can even get mobile_options "for free". Sure it is a slight effort to implement the function to set the CSS in react and php but thats a one time thing and not too hard to do.

The best advice I can give you when doing this is to use separate top, right, bottm and left settings in ET_Builder_Element::set_style (or static css(props)) because if you just use "margin: %1$s %2$s..." and a value is not set, you end up with wrong values. Instead use "margin-top: %1$s; margin-right: %2$s;...".

[SatishKumarPrajapati]

yes i have used that but if advanced field for margin/padding can be use multiple times then it will be good and less code to write for css.

[xxtesaxx]

yes, absolutely. Ideally you could place the selector for the margin/padding inside the field declaration. That would be so much more convenient. Like

'field' => [
    'label' => 'My Margin',
    'type' => 'custom_margin',
    'selector' => '%%order_class%% .my_selector',
    ...
],

[SatishKumarPrajapati]

yes @xxtesaxx and it will help to work efficiently

[jamesfosker]

Use custom_margin and custom_padding controls instead, you can use them multiple times in a module.

How to do you get the value?

[jcdotnet]

@jamesfosker check the $this->props['your_padding_field']

If empty (undefined in JS) you can output '0px' else you can call the explode function (split in JS) and output the top, right, bottom and left values: $values = explode('|', $this->props['your_padding_field']); $values[0] is padding-top, $values[1] is padding-right and so on.

[xxtesaxx]

I wrote myself a php function which utilises et_builder_get_element_style_css:

`public function apply_custom_margin_padding($function_name, $slug, $type, $class, $important = true) { $slug_value = $this->props[$slug]; $slug_value_tablet = $this->props[$slug . '_tablet']; $slug_value_phone = $this->props[$slug . '_phone']; $slug_value_last_edited = $this->props[$slug . '_last_edited']; $slug_value_responsive_active = et_pb_get_responsive_status($slug_value_last_edited);

    if (isset($slug_value) && !empty($slug_value)) {
        ET_Builder_Element::set_style($function_name, array(
            'selector' => $class,
            'declaration' => et_builder_get_element_style_css($slug_value, $type, $important),
        ));
    }

    if (isset($slug_value_tablet) && !empty($slug_value_tablet) && $slug_value_responsive_active) {
        ET_Builder_Element::set_style($function_name, array(
            'selector' => $class,
            'declaration' => et_builder_get_element_style_css($slug_value_tablet, $type, $important),
            'media_query' => ET_Builder_Element::get_media_query('max_width_980'),
        ));
    }

    if (isset($slug_value_phone) && !empty($slug_value_phone) && $slug_value_responsive_active) {
        ET_Builder_Element::set_style($function_name, array(
            'selector' => $class,
            'declaration' => et_builder_get_element_style_css($slug_value_phone, $type, $important),
            'media_query' => ET_Builder_Element::get_media_query('max_width_767'),
        ));
    }
}`

In jsx I use the static css(props) function to build the css myself:

`// Apply button margin if necessary if (props.button_margin) { const button_margin = props.button_margin.split("|"); const button_margin_last_edited = props.button_margin_last_edited; const button_margin_responsive_active = button_margin_last_edited && button_margin_last_edited.startsWith("on");

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

        if (props.button_margin_tablet && button_margin_responsive_active && props.button_margin_tablet && '' !== props.button_margin_tablet) {
            const button_margin_tablet = props.button_margin_tablet.split("|");
            additionalCss.push([{
                selector: '%%order_class%%.et_pb_module .et_pb_button',
                declaration: `margin-top: ${button_margin_tablet[0]}; margin-right: ${button_margin_tablet[1]}; margin-bottom: ${button_margin_tablet[2]}; margin-left: ${button_margin_tablet[3]};`,
                device: 'tablet',
            }]);
        }

        if (props.button_margin_phone && button_margin_responsive_active && props.button_margin_phone && '' !== props.button_margin_phone) {
            const button_margin_phone = props.button_margin_phone.split("|");
            additionalCss.push([{
                selector: '%%order_class%%.et_pb_module .et_pb_button',
                declaration: `margin-top: ${button_margin_phone[0]}; margin-right: ${button_margin_phone[1]}; margin-bottom: ${button_margin_phone[2]}; margin-left: ${button_margin_phone[3]};`,
                device: 'phone',
            }]);
        }
    }`