[Resolved] Add custom CSS selector to the button selector

Home Forums Support [Resolved] Add custom CSS selector to the button selector

Home Forums Support Add custom CSS selector to the button selector

  • This topic has 12 replies, 8 voices, and was last updated 7 months ago by Leo.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1322367
    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!

    https://jaimemartinez.nl

    #1322768
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #1323071
    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!

    https://jaimemartinez.nl

    #1323936
    Tom
    Lead Developer
    Lead Developer

    No problem! Hopefully the above accomplishes it perfectly πŸ™‚

    #1576177
    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

    #1665904
    George

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

    #1666031
    Leo
    Staff
    Customer Support
    #1666050
    George

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

    #1666063
    Leo
    Staff
    Customer Support
    #1917592
    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!

    #1917628
    David
    Staff
    Customer Support

    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!

    #2073670
    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

    #2073675
    Leo
    Staff
    Customer Support

    Can you open a new topic for your question?

    Thanks!

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.