What form should the $query media query array have for an Elementor page builder function?
I’m building a theme with the Elementor page builder and I want to add some CSS output to certain elements. I hooked into the parse_css function.
I want to use the stylesheet::add_rules() function (code reference). This function takes three parameters:
Stylesheet::add_rules( string $selector, array|string $style_rules = null, array $query = null )
The first parameters, the
$selector and the
$style_rules are not so difficult:
$post_css->get_stylesheet()->add_rules( $element->get_unique_selector(), [ 'width' => '300px', ] );
This is an example function where the element gets a width of 300px. The difficult thing here is the media query,
$query. I know that parameter wants an array as input, but it doesn’t tell what kind of array or in which form.
I tried a lot of things. These are a few I thought logical:
$query = ['(min-width: 600px)']; $query = ['@media (min-width: 600px)']; $query = [ 'min-width' => '600px', ];
The last one has the same form as the
$style_rules parameter, but it doesn’t work.
I searched for examples, documentation, Github etc., all to no avail.
How can I change my
$query input parameter so that the code is rendered with a media query?
Many thanks if you can provide me with an example!