Skip to content

Accurate sizes: Support relative alignment widths#1737

Merged
joemcgill merged 4 commits intofeature/1511-incorporate-layout-constraints-from-ancestorsfrom
update/1511-support-relative-alignment-widths
Dec 13, 2024
Merged

Accurate sizes: Support relative alignment widths#1737
joemcgill merged 4 commits intofeature/1511-incorporate-layout-constraints-from-ancestorsfrom
update/1511-support-relative-alignment-widths

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.

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.

3 participants