[Resolved] Add custom CSS selector to the button selector

[Jaime Martinez]

Hi there,

In this case I’m using GenerateBlocks, but which scenario is also for every other plugin that adds it own button block.

In this case GenerateBlocks introduces a button block with the css selector gb-button, but it doesn’t inherits the styling from GeneratePress theme because it doens’t have a button css class on it. And copy-ing the styling and including it myself through my own style.css kind of defeats the purpose of setting it through the Customizer options. If I you change it there, you have to change it manually there.

Yes, I could manully add the button css class via the advanced part to the block, but then I (my clients) has to do this for every button block. I want to keep it simple and don’t want to repeat myself. Everything that I have to explain as an extra is an extra barrier to a headache free editing experience.

So I would like to be able to add a css selector to this part where the styling of a button it generated https://github.com/tomusborne/generatepress/blob/master/inc/css-output.php#L398
But I don’t that’s possible, or am I missing somthing?

Kind regards,

Jaime Martinez!

[Tom]

Hi Jaime,

You could tell GenerateBlocks to use the GP styles as its default:

add_filter( 'generateblocks_defaults', function( $defaults ) {
    $color_settings = wp_parse_args(
        get_option( 'generate_settings', array() ),
        generate_get_color_defaults()
    );

    $defaults['button']['backgroundColor'] = $color_settings['form_button_background_color'];
    $defaults['button']['backgroundColorHover'] = $color_settings['form_button_background_color_hover'];
    $defaults['button']['textColor'] = $color_settings['form_button_text_color'];
    $defaults['button']['textColorHover'] = $color_settings['form_button_text_color_hover'];
    $defaults['button']['paddingTop'] = '10';
    $defaults['button']['paddingRight'] = '20';
    $defaults['button']['paddingBottom'] = '10';
    $defaults['button']['paddingLeft'] = '20';

    return $defaults;
} );

That should make it so every button you add from now on uses the GP Customizer settings, and they *should* automatically update if you change them in the Customizer.

Let me know 🙂

[Jaime Martinez]

Hi Tom, Thought because it’s touching a whole different codebase I should also separate the tickets.

Will dive into to code after the weekend. I now do get the concept that al the code will be written to the external CSS.

I 200% appreciate you taking the time!

Ciao!

[Tom]

No problem! Hopefully the above accomplishes it perfectly 🙂

[SiT Team]

Hi Tom,

Thanks for this solution, this did have me stumped for a little while. Given GenerateBlocks and GP are firmly in the same family, I do think it would be intuitive to have this behaviour as default: have the button styles that GP exposes via theme customisation drive the default colour scheme on the GenerateBlocks buttons (to be optionally overridden per-button, of course).

Thanks again, and great name.

Tom

[George]

Hey Tom.
Is it possible to add border-radius settings to the code you provide here for a default GB button?

[Leo]

Hi George,

This should help:
https://github.com/tomusborne/generateblocks/blob/c2aad72f6868001c6f7fa9b606cafef511eebd1b/includes/defaults.php#L231-L243

Let me know 🙂

[George]

Whaoo, everything is in there! Page saved, thanks, Leo!

[Leo]

No problem 🙂

[Eaydman]

Hi,
This really helped me a lot. I do not know why it has taken me so long before I have seen this post!

This should be added to the Documentation, and the link that @Leo linked to Github

It’s really nice to finally be able to add some standard styles to the GenerateBlocks!

[David]

We’ll be adding default styles to GB in the future, so code shouldn’t be required.
And this topic is one of those where it crosses the support boundaries… its more a GB forum thing then it i a GP thing 🙂

Glad you found it helpful though!

[Chris]

Hey there!

Is there already a way to apply the GP style in a more convenient way to the GB button?

If not: Any chance to also apply the font settings not only the colors?

Thanks a lot 🙂

Cheers
Chris

[Leo]

Can you open a new topic for your question?

Thanks!

[Greg]

It would be nice if GenerateBlocks used the colors from GeneratePress’s color settings in the Customizer. It’s confusing now how a random color is chosen. The code Tom provided above could simply be added to GP so that those settings make sense.

[Author]

Posts