Accurate sizes: Support relative alignment widths

[joemcgill]

Summary

This is an initial concept for supporting relative alignment widths as described in #1511 (comment).

Relevant technical choices

If the layout setting ends in a px value, compare directly with the image width. If the layout setting uses any other value, use a CSS min() function in sizes.

This also improves the logic for left/right alignment values so they are constrained by wide layouts if the image width is larger than the container.

To test

1. Visit the site editor
2. Edit Styles > Layout
3. Set content width to a relative value, like 30rem
4. Add an image block with default alignment to a post
5. Inspect that the generated sizes value looks similar to sizes="(max-width: min(20rem, 1024px)) 100vw, min(20rem, 1024px)"

[joemcgill]

Thanks for fixing those indents, @mukeshpanchal27! Some times my editor's auto-formatting takes on a life of it's own 😅

I'm going to add some unit tests for this (current tests are still passing) and then I this should be ready for review as well.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: joemcgill <[email protected]>
Co-authored-by: mukeshpanchal27 <[email protected]>
Co-authored-by: westonruter <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.