-
Hello, I’m working on a site where I had to change the media query breakpoints, after already almost finishing the site. I have a lot of global styles and I now need to edit tablet size to be up to 1080px.
I can change media queries with a function such as:
add_action( 'wp', function() { add_filter( 'generateblocks_media_query', function( $query ) { $query['desktop'] = '(min-width: 1081px)'; $query['tablet'] = '(max-width: 1080px)'; $query['tablet_only'] = '(max-width: 1080px) and (min-width: 768px)'; $query['mobile'] = '(max-width: 767px)'; return $query; } ); }, 20 );but this doesn’t help my global styles. If I check them, they still break at 1024. If I go to GenerateBlocks > Global Styles, I can open up individual styles and change individual media queries from:
@media (max-width:1024px) {to:
@media (max-width:1080px) {but this will take a long time to edit if I want to update 50-100 global styles. And would the query edits get overwritten if I update the global style from a page where it’s used, anyway?
Would be grateful for some input on this.
Thanks, Karl
-
Hi Karl,
Unfortunately, you will need to edit the global styles one by one.
But you should be able to edit the global style CSS directly at generateblocks > global styles.Here’s a screen record for your reference:https://app.screencast.com/zlqsKv7c6NZbT
-
Hi Ying, thanks for the reply.
I tried it under GenerateBlocks > Global Styles now, changing my media query for a style, and that creates a custom at-rule. That’s a useful function if adding custom breakpoints for specific blocks, but to me it would seem more logical for global styles to have breakpoints as variables, that can be mass updated in one place, just like generateblocks_media_query(), instead of them being hardcoded into the style CSS and having to be manually changed per instance.
Perhaps it’s something that could be considered for the future?
-
The global styles are a custom post type; each of them is a post.
I don’t think there’s a way to mass-change the content of a custom post type, unfortunately! -
My thinking was that if instead of writing a fixed value, the system would use a variable for the standard breakpoints. So if you add something to a global style, for tablet, instead of writing:
@media (max-width:1024px) {}the system would write something like this instead:
@media (max-width:var(--breakpoint-tablet) {}Then if you have a hundred global styles, ie a hundred custom posts with potentially multiple sub classes, each with their own tablet breakpoint styling, if you need to change the breakpoint you would just need to change the variable.
Perhaps I’m missing something in the logic, but that would seem to be a more flexible setup.
-
Global Styles are built by the user and build a static CSS stylesheet, so there isn’t a good or safe way to mass update them unless the user wants to run database queries (not a good idea).
If you really want to give it a try, export your global styles and import them on a local dev site, then you could try a search/replace plugin to target the existing at-rules and replace them, but it’s not something we’ve tried/tested before, not sure how it would go.
-
Hi Ying, I was away on holiday, just checking this again now.
I might leave the mass update for now, as it’s likely to break something.
It still sounds like a better setup for GenerateBlocks global styles to start using variables for breakpoints as in my example above, at least for the default system breakpoints, as these can quite easily need to be changed in the future and if having a lot of global styles, it would make updating breakpoints very easy.
-
CSS does not support variables for media query, unfortunately; otherwise, it would be a good idea.
- You must be logged in to reply to this topic.