Using Global Styles by default

As of right now, it’s not possible to have a Global Style set to a block by default when you insert it.

However, we can use a filter to do this quite easily.

add_filter( 'generateblocks_defaults', function( $defaults ) {
    $defaults['container']['useGlobalStyle'] = true;
    $defaults['container']['globalStyleId'] = 'your-global-style-id';

    return $defaults;
} );

In the above example, we’re targeting the Container block. You can target any of our blocks by replacing container with their name:

  • container
  • buttonContainer
  • button
  • headline
  • gridContainer

One issue you may run into is the default local styling of a block getting in the way of the Global Style. We handle this by removing that default styling when you select a Global Style in the editor, which obviously won’t happen if you have it turned on by default. So you’ll need to remove those default styles like this:

add_filter( 'generateblocks_defaults', function( $defaults ) {
    $defaults['container']['paddingTop'] = '';
    $defaults['container']['paddingRight'] = '';
    $defaults['container']['paddingBottom'] = '';
    $defaults['container']['paddingLeft'] = '';

    return $defaults;
} );

add_filter( 'generateblocks_default_block_styles', function( $styles ) {
    $styles['button']['backgroundColor'] = '';
    $styles['button']['textColor'] = '';
    $styles['button']['backgroundColorHover'] = '';
    $styles['button']['textColorHover'] = '';
    $styles['button']['paddingTop'] = '';
    $styles['button']['paddingRight'] = '';
    $styles['button']['paddingBottom'] = '';
    $styles['button']['paddingLeft'] = '';

    return $styles;
} );
1 Like

Thanks for your suggestions.

How can we use a filter for changing the default $container_width?

Hi Tom,

Thanks for adding this code snippet! I need to have a global style for my buttons. So, this would be super helpful…if I could get it to work. :slight_smile:

However, when I added the filter to my child theme functions file it gave me this error: “Your PHP code changes were rolled back due to an error on line 22 of file wp-content/themes/generatepress_child/functions.php. Please fix and try saving again.
syntax error, unexpected ‘=>’ (T_DOUBLE_ARROW)”

I literally just copied and pasted your code. So then, to fix that error, I removed the arrows and added = sign instead to the button filter code you have posted there. That fixed the PHP error and the padding was definitely removed from the buttons…but not the backgroundColor, textColor, backgroundColorHover or textColorHover. And my styles were not applied. And I am not a PHP expert ( I know enough to get into trouble). I’m strictly on the HTML, CSS side…so help! Please! :slight_smile:

In my child theme style sheet I added a custom class called “.sda-buttons” with all my styles.

Then I added it in the child theme functions file. The following is what is currently in my child theme functions file:

add_filter( ‘generateblocks_defaults’, function( $defaults ) {
$defaults[‘button’][‘useGlobalStyle’] = true;
$defaults[‘button’][‘globalStyleId’] = ‘sda-buttons’;

return $defaults;

} );
add_filter( ‘generateblocks_default_block_styles’, function( $styles ) {
$styles[‘button’][‘backgroundColor’] = ‘’;
$styles[‘button’][‘textColor’] = ‘’;
$styles[‘button’][‘backgroundColorHover’] = ‘’;
$styles[‘button’][‘textColorHover’] = ‘’;
$styles[‘button’][‘paddingTop’] = ‘’;
$styles[‘button’][‘paddingRight’] = ‘’;
$styles[‘button’][‘paddingBottom’] = ‘’;
$styles[‘button’][‘paddingLeft’] = ‘’;

return $styles;

} );

But that is not applying my styles or clearing the default colors (only the default padding).

On a side note: I do have a question about the default button styles. Is there a reason they weren’t added to the css class “gb-button”? From what I can see, if the default styles were added to “gb-button” then anyone who wants to override those styles globally would just have to change that under “gb-button.” And then in the GB Button customizer, if someone wanted to style an individual button they could do it there. As the styles in that section get applied to a very specific individual button css class. So, that should override the “gb-button” class as it’s more specific. It certainly does right now.

Don’t know if there’s a technical reason with the blocks why you can’t do that (again, not a php expert). But to me, having the default styles applied on the “gb-button” class would make it easy to change the style globally with css…without needing to reset anything with a filter.

Just a thought. In the meantime, would super appreciate some help with getting this to work. I just really need to be able to apply my global css styling to the buttons.

Cheers! :slight_smile:

Sorry about the error - fixed now!

The button colors and padding values are actually statically added to the editor right now - so if you want to remove them from existing blocks, you need to manually go and remove those values from the buttons.

Basically, when you add a Button block, it sets those values locally for the button and keeps them until you manually change them.

Global styles don’t quite work like that. The ID you give them is appended to the normal button class. So if your ID is sda-buttons, the CSS would be: .gb-button-sda-buttons

Hi Tom,

Thanks for the reply and for fixing the code! I somehow missed this the other day. But thank you for clarifying the issue with the global styles.

Have a great night!