Related Posts: Adjust margins due to WordPress 5.3

[nielslange]

Fixes #14020

Before:

After:

Changes proposed in this Pull Request:

• Fix margins of related posts after release of WordPress 5.3

Is this a new feature or does it add/remove features to an existing part of Jetpack?

• It's a fix of to an existing feature.

Testing instructions:

1. Go to /wp-admin/admin.php?page=jetpack#/traffic and ensure that Related posts are activated
2. Go to /wp-admin/post-new.php and create at least four test posts that belong to the same category
3. Go to / and open one of the posts

Proposed changelog entry for your changes:

• Fix margins of related posts after release of WordPress 5.3 (if it's worth mentioning this issue)

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello nielslange! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer, review, and approve D35457-code before merging this PR. Thank you!

[jetpackbot]

	Warnings
⚠️	The PR is missing at least one [Status] label. Suggestions: [Status] In Progress, [Status] Needs Review

This is an automated check which relies on PULL_REQUEST_TEMPLATE. We encourage you to follow that template as it helps Jetpack maintainers do their job. If you think 'Testing instructions' or 'Proposed changelog entry' are not needed for your PR - please explain why you think so. Thanks for cooperation 🤖

Generated by 🚫 dangerJS against c420dd9

[kraftbj]

Flyby - I activated this branch on my site at kraft.blog to make it easy to see live without needing to populate content on a test site.

[nielslange]

Flyby - I activated this branch on my site at kraft.blog to make it easy to see live without needing to populate content on a test site.

And according to https://kraft.blog/2019/10/drive-like-youre-invisible/ the fix works as expected, right?

[jeherve]

This works for me on desktop, but I'd be curious to have an opinion from someone from Design on this.

• Do we need to expand the related posts area with that negative margin, and if so, what other grid should it match on the page, especially since that grid can change depending on the post template.
• Should we hardcode the max-width in px, or use calc instead?

@MichaelArestad @joanrho Do you think you could weigh in on this since you worked on the original set of changes for Twenty Twenty?

Thank you!

[jeherve]

Feedback on the related issue:

I think we will need separate CSS on the GIF block too. I think we may need to test all our blocks. Just having a look at some potential fixes.

[scottsweb]

Because I could not push to the original branch, I have spun up a new PR here: #14066

[jeherve]

closing in favor of #14066