plugins - What form should the $query media query array have for an Elementor page builder function?

admin管理员组

文章数量:1328972

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 4 years ago.

Improve this question

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!

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 4 years ago.

Improve this question

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!

• plugins
• theme-development
• array

Share Improve this question asked Jul 13, 2020 at 10:10 ralphjsmitralphjsmit 40266 silver badges2323 bronze badges 10

• Try $query = [ 'min' => 600 ]; ? But note, I don't use Elementor, so I was just guessing (based on their code). – Sally CJ Commented Jul 13, 2020 at 10:37
• Thanks for the suggestion! I still doesn't work completely, but we're not further than first. Current output: @media(min-width:px) { .elementor-element-7a8d1c4 { width:300px; } .elementor-element-0d5248a { width:300px; } }. I tried '600', '600px' and 600 but those all give the same results. When I change it to max => 600, I get a max-width output with 767px (first breakpoint). My guess now is that it works with preregistered 'devices' and not with numbers/custom queries. – ralphjsmit Commented Jul 13, 2020 at 11:23
• Actually, I think you should try calling add_device() before the add_rules(): add_device( '600', 600 ). Then the 'min' => 600 should work. There might be a better way, though. – Sally CJ Commented Jul 13, 2020 at 13:55
• You're a real genius Sally! And that without using Elementor. It works like a charm ($post_css->get_stylesheet()->add_device( '600', 600 );). Thanks! Add it as an answer ;-) – ralphjsmit Commented Jul 13, 2020 at 14:46
• 1 Haha thank you! – ralphjsmit Commented Jul 13, 2020 at 18:03

 |  Show 5 more comments

1 Answer 1

Sorted by: Reset to default 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!

本文标签： pluginsWhat form should the query media query array have for an Elementor page builder function