What form should the $query media query array have for an Elementor page builder function? [closed]
-
20-04-2021 - |
Domanda
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!
Soluzione
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:
The
$query
array (the 3rd parameter for theadd_rules()
method) should have amin
ormax
item, e.g.'min' => 600
or'max' => 799
, or both.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 theadd_device()
method in that class.Additionally, the
max
value in the$query
array must be within the range of the device sizes. For example in the below sample, themax
is799
, so the max device size must be800
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!