Donate Block: improve donate block appearance for WP 5.8

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

This PR cleans up some small issues in the Donate Block when placed in the widget block spaces in WordPress 5.8, specifically making sure it's still picking up the custom colours, and reducing the padding a bit when it's in narrower spaces.

See #1372

How to test the changes in this Pull Request:

1. Start on a test site running the latest WordPress 5.8 RC; you can do this using the Beta Tester plugin.
2. Enable the slide-out sidebar, and set those widgets to also appear in the mobile menu.
3. Set up your site to use custom colours and fonts; set the footer to use a darker custom footer colour - this will help us test contrast, and that the block is picking up the custom colours when appropriate.
4. Add the Donate widget to every widget space: sidebar, footer, slide-out sidebar, above copyright, and above and below the content area.
5. View on the front end; note that the block is not always picking up the custom colours, and in some cases there's a bit more padding than needed:

Sidebar - spacing:

Slide-out Sidebar - spacing and colour:

Slide-out Sidebar widgets in the mobile area - spacing and colour:

Footer and Above Copyright - colour; weird 'thank you' spacing:

6. Apply the PR and run npm run build.
7. Confirm that the above issues are resolved:

Sidebar:

Slide-out Sidebar:

Slide-out Sidebar widgets in the mobile area:

Footer and Above Copyright:

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?

[adekbadek]

More of a general remark, but I find it a bit weird that there are block styles in the theme. Why are these not in newspack-blocks?

[laurelfulford]

That's a good question! I opted to put these styles in the theme instead of the plugin because they require the theme, if that makes sense. If it was a more general style that was always applied to the Donate block I agree it should go in the plugin. In this case, the block needs to be in certain areas of the theme (the sidebar, the mobile menu) for the styles to be applied, and with any other theme, these styles wouldn't be used. It's kind of similar to the custom colour/typography styles living in the theme instead of the plugin - even though those styles are applied to the block, it's only in the context of this theme, and wouldn't be useful otherwise.

Let me know if this doesn't make sense as an approach!

[adekbadek]

Ah, that makes sense, thanks for the clarification!

[laurelfulford]

Thanks Adam! I'm going to go ahead and merge this but I'm open to discussing the location of these styles further if my logic doesn't make sense :)

[matticbot]

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

The release is available on GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 1.39.3 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀