Add --wp--style--block-gap default for the button block

[laurelfulford]

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:

Blocks now use the --wp--style--block-gap CSS variable to set the space between different block elements. Since the Newspack theme doesn't have a theme.json, it doesn't set its own values for these variables, but it does use the WordPress fallbacks, which look like they're often measured in ems.

For the buttons block specifically, this em value is affected when you change the font size of the individual buttons -- decreasing the font size can decrease the gap to the point where there is no longer space for the buttons to sit side by side. This PR adds a gap value fallback that no longer is affected by changing the button block font size, but without affecting other blocks that use the value that don't have this same issue (like the Columns block).

So far I haven't run into this issue for other blocks -- possibly because where the font styles are applied -- but it seems like something we'll want to fix on a case by case basis if there are others, just to make sure we don't add a spacing default that works in some cases, but not others!

Closes #1736

How to test the changes in this Pull Request:

1. Add a Buttons block to the editor, and add at least two buttons.
2. Make each button 50% of the available space; note how they site side by side on the front-end and in the editor:

4. Decrease the font size of the first button to 15px.
5. Note that the buttons now stack:

6. Apply the PR and run npm run build.
7. Confirm that the buttons now sit side-by-side as expected on the front-end and in the editor:

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?

[dkoo]

This fixes the issue of the gap. I tested with various combinations of font sizes and didn't see any problems with stacking.

Perhaps not totally related to this, but I notice that the discrepancy between editor font sizes (e.g. "normal" is 16px in the editor but 20px on the front-end) persists even if you set the font size as a pixel value. In other words, if you set the font size to 15px in the editor, it shows up as 15px on the front-end, but set it to 16px and it renders as 20px. A bit disconcerting but perhaps already a known bug?

[laurelfulford]

Thanks @dkoo!

A bit disconcerting but perhaps already a known bug?

Unfortunately yes -- and a very annoying bug! 😞 There's a brief issue reported in this repo and a more in-depth one on the Newsletters side, since that's a contributor: Automattic/newspack-newsletters#755 The TL;DR: is that Gutenberg is picking up the font sizes set by Newsletters, and while dequeuing the FSE Global Styles is helping somewhat, things are still getting garbled where the font slug names overlap.

[dkoo]

Ah yes, I remember that Newsletters issue now. Thanks for explaining!

[matticbot]

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

The release is available on GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 1.57.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀