Browser: Any
OS: Any
First time I meet this logic. So, if it’s not a bug, can someone please explain to me.
For me, it’s really buggy because CSS rules of invalid controls override CSS rules of valid controls.
For example, I have three controls like this:
$this->controls['control_1'] = [
'label' => esc_html__('Select A Value', 'textdomain'),
'options' => [
'a' => esc_html__('A', 'textdomain'),
'b' => esc_html__('B', 'textdomain'),
],
'default' => 'a',
'type' => 'select',
'inline' => true
];
$this->controls['control_2'] = [
'label' => esc_html__('Size', 'textdomain') . ' (px)',
'type' => 'number',
'unit' => 'px',
'placeholder' => '8px',
'css' => [
[
'property' => 'width',
'selector' => 'button'
],
],
'required' => ['control_1', '=', 'a']
];
$this->controls['control_3'] = [
'label' => esc_html__('Size', 'textdomain') . ' (px)',
'type' => 'number',
'unit' => 'px',
'placeholder' => '8px',
'css' => [
[
'property' => 'border-right-width',
'selector' => 'button'
],
[
'property' => 'border-left-width',
'selector' => 'button'
]
],
'required' => ['control_1', '=', 'b']
];
Now, if we set the value of the “control_1” to “a”, save the builder. Then, change the value of the “control_1” to “b” and save the builder, the generated CSS contains both the rules of the “control_2” and the “control_3”. The logic of the required condition is OR but the result is AND?
I mean, if “control_1” is “b”, just set the “border-right-width” and “border-left-width” of the “button” element, do not set the “width”. But it doesn’t work like that.
