As far as I can see, the D5 approach to breakpoints allows us only to output styles at the built-in media breakpoints, which are:
@media only screen and (max-width: 980px)
@media only screen and (max-width: 767px)
If we need to output styles at different breakpoints, there doesn’t seem to be a way to do it. For example, in one of my modules I need to output styles for desktop only, and desktop+tablet only. In D4 I could do that like this:
ET_Builder_Element::set_style($this->slug, array(
'selector' => '%%order_class%% .desktop-only-styles',
'declaration' => 'color: #aaaaaa;',
'media_query' => '@media only screen and (min-width: 981px)',
));
ET_Builder_Element::set_style($this->slug, array(
'selector' => '%%order_class%% .desktop-and-tablet-only-styles',
'declaration' => 'color: #aaaaaa;',
'media_query' => '@media only screen and (min-width: 768px)',
));
It is possible to add a similar feature to D5? For example:
<CommonStyle
selector={`${orderClass} .desktop-only-styles`}
attr={{desktop:{value:''}}}
declarationFunction={() => ‘color:#aaaaaa;'}
mediaQuery={'@media only screen and (min-width: 981px'}
/>
Related thread: https://discord.com/channels/1041765492907589683/1101395617382662204
As far as I can see, the D5 approach to breakpoints allows us only to output styles at the built-in media breakpoints, which are:
If we need to output styles at different breakpoints, there doesn’t seem to be a way to do it. For example, in one of my modules I need to output styles for desktop only, and desktop+tablet only. In D4 I could do that like this:
It is possible to add a similar feature to D5? For example:
Note: See here for a related issue: https://github.com/elegantthemes/Divi-Beta/issues/27