-
Hello again 🙂
How can I define global breakpoints, like “desktop” or “widescreen”? It seems the default desktop breakpoint cannot be modified, and any additional breakpoints can only be applied at the block level.
-
Hi there,
It will be a filter to globally change the default GB media query, please wait for the official release, and we will also provide a documentation on this.
But please note that the filter will NOT change the existing blocks’ media query, as GB’s CSS are generated on block level, so the filter can not change existing CSS.
-
Good to know, thanks!
-
No Problem 🙂
-
No documentation for modifying the breakpoints available yet, correct?
-
Not yet, the official version hasn’t been released.
-
Hello,
I went through the new documentation but couldn’t find anything on the available filters. Could you point me in the right direction?
-
Hi there,
The new documentation is still in its early stages, and there’s a lot more to be added, including developer resources. We will be adding it gradually over time. Your patience is greatly appreciated!
-
Could you share the custom media query filter while we wait for the docs? I’ve already delayed some changes for this project longer than I’d like.
-
Hi there,
Yes, the filter is available, but please be aware that it will only change future blocks, the existing blocks will not get the changes. So it’s recommended to be added before you start the build.
Here’s an example:
add_action( 'enqueue_block_editor_assets', function() { $overrides = [ 'largeWidth' => '@media (min-width:1200px)', //desktop 'mediumWidth' => '@media (max-width:1199px) and (min-width:499px)', //tablet 'mediumSmallWidth' => '@media (max-width:1199px)', //tablet & mobile 'mediumLargeWidth' => '@media (min-width:500px)', // tablet & desktop 'smallWidth' => '@media (max-width:499px)', //mobile ]; $script = sprintf( 'wp.hooks.addFilter( "generateblocks.styles.defaultAtRules", "my-theme/modify-default-at-rules", function( atRules ) { const overrides = %s; return atRules.map(rule => ({ ...rule, value: overrides[rule.id] || rule.value })); } );', json_encode( $overrides ) ); wp_add_inline_script( 'generateblocks-styles-builder', $script, 'before' ); -
It doesn’t seem to be working, and, I think, it’s missing the
});.
Maybe I’m just using it wrong. Should it go in functions.php?
Also, can I define custom breakpoints, or can I only override the existing ones? -
This should be the correct snippet:
add_action( 'enqueue_block_editor_assets', function() { $overrides = [ 'largeWidth' => '@media (min-width:1200px)', //desktop 'mediumWidth' => '@media (max-width:1199px) and (min-width:499px)', //tablet 'mediumSmallWidth' => '@media (max-width:1199px)', //tablet & mobile 'mediumLargeWidth' => '@media (min-width:500px)', // tablet & desktop 'smallWidth' => '@media (max-width:499px)', //mobile ]; $script = sprintf( 'wp.hooks.addFilter( "generateblocks.styles.defaultAtRules", "my-theme/modify-default-at-rules", function( atRules ) { const overrides = %s; return atRules.map(rule => ({ ...rule, value: overrides[rule.id] || rule.value })); } );', json_encode( $overrides ) ); wp_add_inline_script( 'generateblocks-styles-builder', $script, 'before' ); });At the moment, only the default breakpoints can be overridden. Custom breakpoints are not supported at this time.
-
Thanks, it works.
Unfortunately, without the ability to add custom breakpoints, it’s not exactly what I was looking for. 🙁
-
Sorry to hear that. I’ll keep this topic open, and if there are any updates regarding the custom breakpoints, I will update you here.
-
+1
It would be extremely helpful to be able to change the breakpoints, for example, to align them with Tailwind. Currently, the CSS has to be overridden with custom classes.
- You must be logged in to reply to this topic.