fix(homepage-posts): placement for inline styles

[miguelpeixe]

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:

The inline styles for the Homepage Posts block are not rendered right after .entry-content as documented in the code. They are rendered alongside the first rendered HPP block. This can cause containers that leverage pseudo classes like :first-child or :last-child to not behave as expected, since the style tag can get picked up.

Before	After

This PR changes the placement for the inline CSS so it's printed inside the block container. The improved CLS implemented in the original PR (#1548) should be preserved.

How to test the changes in this Pull Request:

1. Confirm the bug by adding a 2 column block with a HPP block on each column and visiting the front-end (see image above)
2. Check out this branch and confirm there's no longer a top margin on the first block
3. Open DevTools, change to mobile viewport and apply network throttling to slow 3g (see Inline HPB styles in a style tag #1548 for further details if needed)
4. Refresh the page and confirm the slowly rendered layout doesn't shift

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?

[laurelfulford]

Thanks @miguelpeixe!! 🙌

This fixes the issue for me! I also checked through our theme and regular block styles, it looks like we don't rely on this div's position in any of our styles so adding another tag before shouldn't cause any problems unless there's a super-weird edge case out there!

[miguelpeixe]

Thanks, Laurel!

[matticbot]

🎉 This PR is included in version 2.2.1 🎉

The release is available on:

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

Your semantic-release bot 📦🚀