Improvement suggestions for advanced filters fields

[xxtesaxx]

Problem Description

I really love the Filters but I find it a bit sad that you only can have 2 at most. Also it's quiet hard to make them work properly. For example, if you want the child filters to work, you not only must create your own toggle but you also have to put a image option inside the advanced fields which contains the css selector for the child. It took me quiet some time to figure this out, as it wasn't really clear to me from the docs.

$advanced_fields['filters'] = [
        'css' => [
            'main' => '%%order_class%% .outer',
        ],
        'child_filters_target' => array(
            'tab_slug' => 'advanced',
            'toggle_slug' => 'test', //Filters in "test" toggle but CSS selector from "image" advanced field
        ),
    ];

    $advanced_fields['image'] = [
        'css' => array(
            'main' => '%%order_class%% .inner img',
        ),
    ];

If you don't use a image advanced field for the selector, it's not applied automatically so I suggest making this more flexibile, following the other advanced fields where you can have many custom filters. I can't believe it's so much different from lets say borders or box shdows to add multiple filters. Something along the lines of this would be super awesome:

// $advanced_fields['filters'] = false; //Hide Filters alltogether

// $advanced_fields['filters']['default'] = false; //Only hide default filters

$advanced_fields['filters']['default'] = [
    'css' => [
        'main' => '%%order_class%%',
        //'hue' => '%%order_class%% .hue-element',
        //'saturation' => '%%order_class%% .sturation-element',
        // one selector per setting...
        // 'important' => 'all', // "all" or array of different settings
        'important' => ['hue', 'saturation'],
    ],
    // 'use_hue'  => true, //true should be default
    // 'use_saturation' => true, //true should be default
    // one per setting...
    // 'toggle_slug' => 'margin_padding', //margin_padding should be default
    // 'tab_slug' => 'advanced', //advanced should be default
    // 'show_if => [...]
];

$advanced_fields['filters']['my_filter'] = [
    'label_prefix' => __("My Element", 'textdomain'),
    'css' => [
        'main' => '%%order_class%% .my_element',
    }
];

[xxtesaxx]

I just noticed that if you set the main element on the module filter to a different element, it works in the React component but on the frontend, the filters are still applied to the module itself rather than the element from the selector.