fix: remove mark background in Newspack blocks

[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 is a long explanation for a tiny code change:

Context: The RichText fields in Gutenberg allow some minor text formatting -- bold, italic, link, highlights (text and background colours). The highlights use the mark tag.

The mark tag typically has some standard styling in HTML (bright yellow by default in most browsers; kind of a mellow-er yellow in our theme).

In most cases, Gutenberg works around that by adding style="background-color: rgba(0, 0, 0, 0)" to mark tags that don't have a background colour.

Publishers have very occasionally been using the highlight option to change the section title of the Homepage Posts block, or the button text colour in the Donate block.

The issue: In both blocks, we're sanitizing the strings on the PHP side using wp_kses_post, which is stripping out rgba() (more info here). This causes the mark tag to display the yellow background. Though most Gutenberg blocks appear not to have this issue, the occasional one that uses wp_kses_post for sanitizing text -- like the search block's button -- display the same issue.

The fix: The work around here is kind of hacky, but quick: rather than trying to get rgba() allowed in the blocks, or rewriting the sanitization, I opted to override the mark background colour when the HTML tag is used in these blocks. This was added to the blocks rather than the theme because this would be an issue with any theme (unless that theme is overriding the browser default and removing the mark background).

I'm definitely open to feedback on this approach!

Closes #1285; see 1203695565716937-as-1203423790806450

How to test the changes in this Pull Request:

1. Add a Homepage Posts block and give it a 'Section title'.
2. Highlight some of the section title and using the caret dropdown in the block toolbar, select Highlight:

3. Change the text colour.
4. Repeat steps 1-3, but change the text background instead -- this is just to confirm this still works.
5. Add a Donate block.
6. Highlight some of the Donate Now button text, and give it a text colour.
7. Highlight some of the Thank you text, and give it a text colour.
8. Repeat steps 5-7, but instead of giving each section of text a background colour.
9. Publish and view on the front-end.
10. Note the light yellow highlight behind the text colour that was changed; your background colour should be applied as expected.

11. Apply the PR and run npm run build.
12. Confirm the light yellow highlight is gone from your text colour highlights without impacting your background colour highlights.

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]

Nice, simple fix for what seems like a pretty vexing issue. 👍

[laurelfulford]

Thanks @dkoo! Yeah, I fell down a bit of a rabbit hole with this one... 😅

[matticbot]

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

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 1.63.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀