Update button styles to work with new markup

[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:

In Gutenberg 7.9, the button block was updated to remove the .wp-block-button container around each link, and add that class to the link itself instead. Unfortunately, the theme relied on that class structure to apply the button styles correctly; this PR updates the styles to work with the new button markup, as well as the old button markup.

The custom colours are not being applied in the editor, even with this fix; #893 may fix this in part but I think I'll need to circle back and do a separate PR for the buttons to fine tune after that's merged. In the meantime, please disregard!

Closes #894 and #871.

How to test the changes in this Pull Request:

1. Make sure you have the latest version of the Gutenberg plugin.
2. Set a custom colour, and a custom typeface.
3. Add button blocks to the editor with the following settings: default; custom text and background color; gradient background; outline styles with default; outline styles with custom text, and outline styles with custom text and background color.
4. View on the front-end; be disappointed:

5. Apply the PR and run npm run build.
6. Confirm the front end now looks correct:

7. Confirm the editor is at least picking up the right fonts and shapes, but not the colours:

8. Turn off the Gutenberg plugin.
9. Edit the page again; add the same types of buttons again. Your original buttons will now be throwing an error, but that can be ignored; the new buttons you're adding will use the old markup, to make sure the styles are backwards compatible. When sites are updated to 7.9+, this will no longer be needed, as the markup gets updated too, but it'll be needed to keep buttons styles working on older versions of the editor.
10. View on the front-end and confirm both sets of buttons are applying custom styles:

11. When you turn Gutenberg back on, you'll note the "old" buttons have extra outlines when using the outline style, but this will be fixed Gutenberg (Fix the button outline style for the old button markup WordPress/gutenberg#21816)

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?

[jeffersonrabb]

This was a tricky one to assess with the colors not working in the editor, but it seems to be behaving as described.

[laurelfulford]

Thanks Jeff!

This was a tricky one to assess with the colors not working in the editor

Yeah, it's a bit of a pain to test -- sorry about that! 😕 I'll be re-reviewing how the buttons preview in the editor with both this and #893 merged in, and make any further adjustments if needed there!

[laurelfulford]

Created a new issue to dig into the not-totally-there button preview in the editor:

#905

[matticbot]

🎉 This PR is included in version 1.6.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀