Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/Respect Image Proportions for the Image Size Control Manual Inputs #44433

Closed

Conversation

jomurgel
Copy link
Contributor

@jomurgel jomurgel commented Sep 23, 2022

What?

Adds a Toggle to optionally constrain the proportions of the ImageSizeControl feature, default false (mimics current WP behaviors).

Why?

Closes: #21918

The classic editor, when inserting images had the option of resizing in the media selector which retrained the image ratio by default (and was actually forced). Inserting an image and changing the aspect ratio (and not cropping the image) is bad practice, and while the Handles on the image retain the aspect ratio, there have been some reports of difficulty on mobile and is generally confusing to have different behaviors between the two interfaces.

This PR adds an image ratio lock and brings the two resize features in line with one another, though provides the ability to opt-out if necessary.

How?

  • Added a toggle lock icon that locks the proportions of the image when the image width or height are modified independently of one another.
  • Defaults to true, opt-out behavior.

Testing Instructions

  1. Create a new post or page.
  2. Add an image block from any source (upload, URL, media library, etc).
  3. Confirm that the locking icon is present between the width and height icons (screenshots below).
  4. Confirm that the locking icon is closed (lock) and the tooltip reads, "Unlock image proportions".
  5. Modify the width or height in either direction and confirm that the other value is updated automatically and that the image proportions are retained.
  6. Click the locking icon and confirm that the tooltip reads, "Lock image proportions".
  7. Confirm that when unlocked the height and width of the images are set independently from one another.
  8. Confirm that if the locking icon is clicked (to locked state) the respective height or width (the value note being edited last) is updated and the image aspect ratio is reset.
  9. Confirm that the image size presets, reset, and handlebars on the image are functional as expected.
  10. Confirm that the behavior is consistent for portrait, landscape, and square images.

Screenshots or screencast

CleanShot 2022-09-23 at 17 22 00

Screen.Recording.2022-09-23.at.5.35.02.PM.mp4

@jomurgel jomurgel requested a review from ellatrix as a code owner September 23, 2022 23:42
@skorasaurus
Copy link
Member

Thanks for your work on this but this has been largely done in #51545 ; please comment if you have any questions

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add constrain proportions when modifying image size
2 participants