Add custom tab in all builder elements

gbozzetti commented 4 years ago

Hello Divi community,

I've tried to dig a bit on this argument but I've only found partial information and not well documented (pity Divi lacks of good and complete documentation for developers).

Is there a way to add a custom tab to all the builder elements (sections, rows, modules etc.) and then, of course, make the content of that specific element interact with the options a user selected from the custom tab?

What should I use? filters? class (maybe extend the ET_Builder_Element)?

Thank you in advance for your support!

lanresmith commented 4 years ago

Hi @gbozzetti ! To add a custom tab to a (custom) module, you need to override the get_settings_modal_tabs method in your module's PHP class. Please note that in order to make a custom tab available, you have to supply a minimum of one custom toggle for the custom tab and a minimum of one custom field for the custom toggle. Here is an example code to display one custom tab which has one custom toggle which has one custom field:

      public function get_settings_modal_tabs() {
        return array(
            'another_tab' => array(
                'name' => 'Another Tab',
            ),
        );
    }

    public function get_settings_modal_toggles() {
        return array(
            'another_tab' => array(
                'toggles' => array(
                    'another_toggle' => __( 'Another Toggle', 'smpl-sample-extension' ),
                ),
            ),
        );
    }

    public function get_fields() {
        return array(
            'another_field' => array(
                'label'           => __( 'Another Field', 'smpl-sample-extension' ),
                'type'            => 'text',
                'option_category' => 'basic_option',
                'description'     => __( 'Another text field.', 'smpl-sample-extension' ),
                'toggle_slug'     => 'another_toggle',
                'tab_slug'        => 'another_tab',
            ),
        );
    }

IvanChiurcci commented 3 years ago

@lanresmith Is this the recommended way of adding a custom tab to the module settings modal? It has at least two issues:

1) The custom tab does not get rendered if the settings modal is opened by double clicking the module.

When I have the settings modal of a different element open and then double click my module to open it's settings, the custom tab is not added, only the Content, Design and Advanced tabs are present.

However, it is added when double clicking the module whithout having the settings modal of a different element opened.

2) Font settings CSS is not generated in the Builder if you place the font settings under the custom tab. But it works fine on frontend.

Didn't test further because these two issues already make adding a custom tab this way useless, unfortunately. Is there any other more reliable way of adding a custom tab? Thanks.

lanresmith commented 3 years ago

@IvanChiurcci yes, that's the recommended way to add a custom tab. Thanks a lot for pointing out the issues. Please do let us know if you discover more issues.

Marek-Klein commented 2 months ago

Did you figure out how to add this tab to all modules?

elegantthemes / create-divi-extension

Add custom tab in all builder elements #380