[Resolved] Add custom CSS selector to the button selector

Home Forums Support Add custom CSS selector to the button selector

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #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!


    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() ),
        $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!



    Lead Developer
    Lead Developer

    No problem! Hopefully the above accomplishes it perfectly 🙂

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