Blockbase: Button block does not respect paddings defined in Global Styles

[iamtakashi]

Steps to replicate

• Add a button on a page.
• Go to Global Styles and open the layout panel for Button block
• Change the paddings
• See the button not changing its size

Result

The button stays the default style. The border-radius setting work as expected, but not the paddings. If I edit the paddings on the button individually, it works but not with Global Styles.

Expected

The padding in the button changes. I also tested with Twenty Twenty Two, and the result was expected.

[pbking]

This was on purpose. Button padding control is leveraged differently in Blockbase in order to apply the opinion to buttons that aren't button blocks (form buttons, etc). Padding is actually controled via custom properties.

A better Blockbase solution would probably be to disable the user-controlled padding customizations for Blockbase themes. (We can do that right?)

[iamtakashi]

@pbking, thanks for the info.

This was on purpose. Button padding control is leveraged differently in Blockbase in order to apply the opinion to buttons that aren't button blocks (form buttons, etc).

Twenty Twenty-Two seems to allow the padding specified in Global Styles to be also applied to a button in the comment form, for example, though? There is a difference in line-height, but both the buttons have the same custom style specified in Global Styles. What am I missing? Why can't Blockbase do the same thing as TT2 does?

[pbking]

Why can't Blockbase do the same thing as TT2 does?

Things have progressed since Blockbase was born; it was very much a bridge to cover the things that we weren't able to do otherwise. However, that did set us down a rather specific path. Blockbase is quite opinionated in implementation with the facade of openness. Additionally Blockbase allows for more options for button states (hover most specifically) that TwentyTwentyTwo doesn't cover.

I think the tradeoff (for Blockbase) was "Let's have more options and better control over what a THEME can do to opinionatedly control how buttons look at the expense of a user".

I think eventually we'll be able to take out the button "ponyfill" stuff we have in Blockbase, but probably not until we have button state style control in Gutenberg. Doing so (removing the button ponyfill CSS) may involve changing all of the children at the same time too and could be rather disruptive to themes outside of our control. Or maybe it would be a clean refactor I can't say for sure.

[iamtakashi]

@pbking, thank you for the detailed answer. Much appreciated.

Do you know any Gutenberg ticket to tackle the state style control? That seems to be something we need to raise if there isn't one yet.

[madhusudhand]

@pbking I created a small PR related to this. I guess it can be part of target GB version 6.0.
I would also need to test child themes. Can you help me understand impact areas around this?

Related issues: #5847

[pbking]

@madhusudhand I left comments on that branch #5901

[jeffikus]

@pbking after launching Pendant on wpcom this week once we resolve the headstart issues, could you take a look at this please?

[pbking]

Closing: Work merged in #6167.