Uncaught TypeError: Argument 1 passed to Controls_Stack::sanitize_settings() must be of the type array

[dbjpanda]

There is a function get_style_depends to define script on which a widget depends. Is there a way to define it for individual skin? I am working on a widget which has 3 skins and each skin requires different stylesheets to load in both frontend and editor.

I was trying to load it using get_current_skin_id() previously like below inside main widget class.

public function get_style_depends() {
        return [
            'ke-toc-headings',
            'ke-toc-headings' . $this->get_current_skin_id()
        ];
    }

But now it throws a fatal error in latest update of 2.6.7. I am having hard time to find the cause to the issue. Any pointers or workaround ?

Uncaught TypeError: Argument 1 passed to Elementor\Controls_Stack::sanitize_settings() must be of the type array, null given, called in /var/www/html/wp-content/plugins/elementor/includes/base/controls-stack.php on line 1022

[bainternet]

@dbjpanda

In 2.6.7 we fixed a bug where get_style_depends would not be called in the editor, So now its always loaded in the editor and in the frontend only when used.

so calling $this->get_current_skin_id() in the editor is whats casing your issue.

you should return all styles for the editor and only call $this->get_current_skin_id() for the frontend, ex:

public function get_style_depends() {
	$styles = [ 'ke-toc-headings' ];
	if (\Elementor\Plugin::$instance->editor->is_edit_mode() || \Elementor\Plugin::$instance->preview->is_preview_mode()) {
		// return all styles for editor
		$styles[] = 'ke-toc-headings-skin-1';
		$styles[] = 'ke-toc-headings-skin-2';
		$styles[] = 'ke-toc-headings-skin-3';
	} else {
		// return only the style needed in the front end
		$styles[] = 'ke-toc-headings' . $this->get_current_skin_id();
	}
	
	return $styles;
}

thanks.

[dbjpanda]

@bainternet So you mean we can't see effect of each css style separately in editor mode ? Because if we load 2 stylesheets having same classes and ids with different properties and values, then only the last stylesheet is going to work. Other will not work as the style sheet comes later takes the higher precedence.

E.g

I am rendering a block like <div class="blah"> </div> . If you load both the css in editor mode then whatever the screen is selected you will always see green color.

skin-1.css

.blah{
background-color: red;
}

skin-2.css

.blah{
background-color: green;
}