feat: Add featured listing styles

[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 contains a first swing at the featured listing styles for the Newspack theme.

I think it made sense to tackle them in the theme rather than the plugin because the styles might differ from theme to theme, and that the styles are applied to blocks in two different plugins (Newspack Blocks, Newspack Listings), on top of the archive and search styles in the theme. Happy to discuss that further if moving them makes sense though!

See Automattic/newspack-listings#131.

How to test the changes in this Pull Request:

1. Enable Featured Listings on your test site by adding define( 'NEWSPACK_LISTINGS_FEATURED_ENABLED', true ); to your wp-config.php file.
2. Create a number of listings and mark some as 'Featured'.
3. Add the Homepage Posts block, Post Carousel Block and Curated List Listings block; make sure at least one Featured listing appears in all three.
4. Navigate to Customizer > Colors and change your primary colour.
5. View your post on the front-end and in the editor; confirm that your featured listings have a little "ribbon" icon that uses the site's primary colour:

Homepage Posts block:

Post Carousel:

Curated List (note: the featured image classes are not yet added to the curated list block in the editor; issue filed here).

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 is 99% there, but I noticed a tiny gap in the "ribbon" icon when I place a Homepage Posts in the sidebar widget and enable listing post types:

[laurelfulford]

Oh, good catch @dkoo! I used em to keep the ribbon proportionate to the text, but it looks like that resulted in a bit of a pixel rounding issue at some font sizes (I was able to recreate this in the editor, too, by scaling up the font size of the block!).

I've added a pixel of wiggle room that seems to help! I also switched how the bottom "cut in" was measured -- it was originally a pixel value but got a little disproportionate at smaller font sizes. It now uses em, too 🙂

Just let me know if anything else seems funky to you!

[dkoo]

Looking good now!

[matticbot]

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

The release is available on GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 1.63.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀