Skip to content

Conversation

@joemcgill
Copy link
Member

@joemcgill joemcgill commented Dec 12, 2024

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)"

@mukeshpanchal27 mukeshpanchal27 added [Type] Enhancement A suggestion for improvement of an existing feature no milestone PRs that do not have a defined milestone for release [Plugin] Enhanced Responsive Images Issues for the Enhanced Responsive Images plugin (formerly Auto Sizes) labels Dec 13, 2024
@joemcgill
Copy link
Member Author

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.

@joemcgill joemcgill added this to the auto-sizes n.e.x.t milestone Dec 13, 2024
@joemcgill joemcgill marked this pull request as ready for review December 13, 2024 16:53
@github-actions
Copy link

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.

@joemcgill joemcgill merged commit aa340dc into feature/1511-incorporate-layout-constraints-from-ancestors Dec 13, 2024
15 checks passed
@joemcgill joemcgill deleted the update/1511-support-relative-alignment-widths branch December 13, 2024 18:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

no milestone PRs that do not have a defined milestone for release [Plugin] Enhanced Responsive Images Issues for the Enhanced Responsive Images plugin (formerly Auto Sizes) [Type] Enhancement A suggestion for improvement of an existing feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants