Support » Plugin: GenerateBlocks » Default button styling in combination with GeneratePress theme

  • Resolved Jaime Martinez

    (@jmslbam)


    Hi, Jaime again 😉

    Question. Are op to add the CSS class “button” to the indiviual buttons and don’t set a default background color and text color on a button?

    1. This way most themes will probably correctly style the buttons… at least the GeneratePress theme will because that contains styling for the “a.button” class.

    2. Now I have to remove the by default selected background color and text color.

    Without this change, someone has to do 3 extra steps per added button.

    Hope you consider this front-end optimazation.

    Kinds regards,

    Jaime

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter Jaime Martinez

    (@jmslbam)

    Also, in extend of theme compatibility / inheritance. Maybe consider removing the default value on the spacing > padding setting.

    Thread Starter Jaime Martinez

    (@jmslbam)

    Sorry for the spam. I saw that the background-color hover also has a default value, what comes down to 4 extra steps / values to add a button.

    – Background color
    – Background color on hover
    – Text color
    – Padding (4 values)

    Plugin Author Tom

    (@edge22)

    Hi there,

    I thought about this quite a bit when developing.

    You can filter the default colors/padding that get added to buttons when you add them to the page, which can save you some time un-setting those options.

    Using the button class by default could cause future headaches, which it why I opted out of it. However, it could become an option.

    Another option is a toggle in the advanced panel to turn a button into a GP button, which would do all of the above for you in one click.

    George

    (@quantum_leap)

    Great idea, the toggle, Tom!

    Thread Starter Jaime Martinez

    (@jmslbam)

    Thank you for the quick reply!

    # Buttons colors/padding
    Ah yes, filtering them. Will do that. Again, with the generateblocks_default_block_styles 🙂

    Just curious as a fellow developer. What was your pro-choice to do add these defaults that deviate from a theme’s own CSS styling.

    # .button class
    Fair enough. I looked into the generateblocks_default_block_styles filter, but for the ‘button’ default array I could find the index ‘cssClasses’ just like with the ‘heading’ index.
    Or can I just add the ‘index’ myself and then it will be set?
    See: https://github.com/tomusborne/generateblocks/blob/master/includes/defaults.php#L291

    I was thinking about adding the .gb-button to the GeneratePress button selector, but I can’t seem to filter a CSS selector within GP. https://github.com/tomusborne/generatepress/blob/master/inc/css-output.php#L398

    # Toggle to GP button
    Sorry, I don’t understand this part. Does GeneratePress has similar button block?

    Have a good day!

    Plugin Author Tom

    (@edge22)

    The default button in GeneratePress is pretty vanilla, so I wanted to do something else in GenerateBlocks.

    When it comes to block defaults, it’s not a good idea to add/change defaults that add markup to the editor (like a CSS class). If you did, Gutenberg won’t recognize the block and it will show the “Invalid block” error message.

    As for the toggle, the idea would be to have a toggle/button which did these things for for you:

    1. Add the button class
    2. Remove the default colors
    3. Remove the default padding

    So this toggle would essentially just be a time-saver.

    Thread Starter Jaime Martinez

    (@jmslbam)

    # default button in GeneratePress
    I cant find a Gutenberg button block that is shipped with GeneratePress nor GP Premium. I think what you mean is that the default styling provided by GP of a default Gutenberg button is vanilla. In that case, yes I understand the need for a more advanced button. Totally agree. Especially the posibility to add an icon in front of / behind the text within the button (love that and that’s the only reason I am using this block over the default WordPress block ).

    I did a test, but the values were not set to an empty string. But that’s because they get overwritten again… https://github.com/tomusborne/generateblocks/blob/master/includes/defaults.php#L424

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

    And when even overwriting them to an empty string in “generateblocks_default_block_styles” it also doesn’t work.
    When I wrote a text ( ‘foo’ ) as value, then it was set to empty in the WordPress dashboard but on the front-end it is set to a shorthand padding: 0 0 0 40px; so that isn’t a solution either.

    This also happends if I don’t filter the defaults, remove the top, right, button value manualy and save the page. This results in padding: 0 0 0 40px; instead of only padding-left: 40px; Which again will overwrite my global theme styling.

    So even if you introduce a toggle which erases all default value, it would not work because of the shorthand issue.

    This all kind of confirms the reason why an approach to only add deviating styling when a value is entered is a proper approach. This respects the global styling of a theme and alters/extends only those properties that a set. A bit like CSS BEM method. Base styling + element devianting property.

    Base styling from theme = padding: 5px 10px;
    Deviating element styling via this plugin = padding-left: 8px;

    Also this approach doesn’t need any extra Toggle to remove default styling 😉

    As I think of it (kind of a side-track note), when developing a custom theme or using any other theme, the default WordPress gutenberg styling also interferes with a the styling from it’s currently installed theme. And for that reason I prefer to dequeue it.

    # Block defaults – cssClass
    If you advice against add default classes, then this index could be removed: https://github.com/tomusborne/generateblocks/blob/master/includes/defaults.php#L291
    It doesn’t have any effect as I tested it with the code beneath.

    add_filter( 'generateblocks_defaults', function( $defaults ){
    
        $defaults['headline']['cssClasses'] = 'jaime'; // does not work
        $defaults['headline']['fontSize = ''; // does not work, but because it's a class the styling on the h2 selector overrules this font-size....
    
        return $defaults;
    });

    Hope this test round of me shines some light on the situation.

    Kinds regards,

    Jaime!

    Plugin Author Tom

    (@edge22)

    Hi Jaime,

    Just answered you here: https://generatepress.com/forums/topic/add-custom-css-selector-to-the-button-selector/#post-1322768

    Let me know if it helps or not 🙂

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Default button styling in combination with GeneratePress theme’ is closed to new replies.