feat: update button block

[thomasguillot]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This PR adjusts the padding of the buttons so it's updated with the new typography scale. It also changes the font-size of the button if it's set to XS : It should use S but with slightly reduced paddings. The Desktop/Mobile Header templates have been updated accordingly.

Note: There's also a small update to the columns's margin-bottom.

How to test the changes in this Pull Request:

1. Create a page with a bunch of buttons. Play with Solid/Outline size. Play with font-sizes too. Apply the sizes to the buttons but also test this by applying the sizes to the button to make sure both cases are supported.
2. Switch to this branch
3. Refresh page
4. Check also your header.

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[laurelfulford]

This works as described! The one issue I noticed is that the outline version of the X-Small button does not have the same padding decrease as the regular version:

Also, more of a personal preference (so not a blocker), but I'm a little leery about this change because it overrides how the controls should work, but not in a not-obvious way (compared to if we could just remove the X-Small option for this specific block). It also may have wider implications for other button elements -- for example, the Checkout Block has the same font size control, should it act the same way?

The button still does visually change in size, so most pubs would probably not notice -- so take this with a grain of salt! But I'd like to avoid introducing things we'd have to override with CSS to change if at all possible! 🙂

[thomasguillot]

The one issue I noticed is that the outline version of the X-Small button does not have the same padding decrease as the regular version

Fixed in eab7933. It's not ideal because I'm using !important but we avoid tons of nesting and complications. Plus it matches the .wp-block-button property above.

Also, more of a personal preference (so not a blocker), but I'm a little leery about this change because it overrides how the controls should work, but not in a not-obvious way (compared to if we could just remove the X-Small option for this specific block)

X-Small is too small to use for content/buttons. It should only be used for secondary/tertiary text like meta or captions. That being said, relying on X-Small gives us an option to create a smaller button without the need for a custom class/style. This type of button should, for example, be used in the header ('Donate').

the Checkout Block has the same font size control, should it act the same way

All the buttons should behave the same. Does the Checkout block use a different Button block?

[laurelfulford]

X-Small is too small to use for content/buttons. It should only be used for secondary/tertiary text like meta or captions. That being said, relying on X-Small gives us an option to create a smaller button without the need for a custom class/style. This type of button should, for example, be used in the header ('Donate').

That's fair -- and it is override-able if need be. Every so often something like this will come back from a user if something doesn't work as expected, but we'll have to document the heck out of this theme so TAMs are equipped to use the options, as well as pubs -- we can make sure to cover stuff like this there, so at least we're all on the same page with how specific things work and why 🙂

All the buttons should behave the same. Does the Checkout block use a different Button block?

The markup isn't 1:1 -- the Checkout Block uses the .wp-block-button__link class, but it doesn't have the .wp-block-button wrapper class like the Button block does, so it doesn't pick up everything. I tested briefly and it seems to pick up the color/font, but not the right padding (weirdly they match in the editor, though):

I think we might need to repeat this bit in the theme.json for that block just to get the default styles consistent, and then repeat the same padding/sizing stuff in the CSS for the smaller font size. But this is something that could be done separately -- this isn't the only thing we're going to have to look at for the Newspack Blocks plugin, it'd be nice not to be fixing stuff piecemeal.

Anyway, the update looks good, the button looks consistent using the different sizes!

[thomasguillot]

The markup isn't 1:1 -- the Checkout Block uses the .wp-block-button__link class, but it doesn't have the .wp-block-button wrapper class like the Button block does, so it doesn't pick up everything. I tested briefly and it seems to pick up the color/font, but not the right padding (weirdly they match in the editor, though)

This is good to know. I will need to take a proper look at the block then!

[matticbot]

🎉 This PR is included in version 1.5.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 1.5.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀