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!

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Preface

• There’s no WordPress-specific stuff in this answer, but I’m just trying to help since the official documentation is (as of writing) not very helpful..
• But as I said in the comments, I don’t use Elementor, which means I don’t know much about Elementor’s technical stuff. ( Even the non-technical ones, actually.. 🙂 )

The $query needs a min/max and a “device”

So the add_rules() method in the Elementor’s stylesheet class is using the add_query_hash() and hash_to_query() methods in the same class, then I checked the source and noticed that:

1. The $query array (the 3rd parameter for the add_rules() method) should have a min or max item, e.g. 'min' => 600 or 'max' => 799, or both.
2. There needs to be a “device” named the same as the min/max value in the $query array. And for registering a custom “device”, you can use the add_device() method in that class.
3. Additionally, the max value in the $query array must be within the range of the device sizes. For example in the below sample, the max is 799, so the max device size must be 800 or more.

Code I used for testing the add_rules():

Tested working, but not tried with the actual Elementor plugin.

$css = new Stylesheet;

$css->add_device( '600', 600 );
$css->add_device( '800', 800 );

// Outputs @media(min-width:600px){#foo{width:300px;}}
$css->add_rules( '#foo', [
  'width' => '300px',
], [
  'min' => 600,
] );

// Outputs @media(max-width:799px){#foo{height:400px;}}
$css->add_rules( '#foo', [
  'height' => '400px', // this is merely a test
], [
  'max' => 799,
] );

echo $css; // echoes the CSS media queries above
// It works because the class has a __toString() method.

Happy coding!

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0