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.

Sign up for GitHub

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

Jump to bottom

fix: force height: auto on images to fix scaling issue in 6.3 #2174

Merged
merged 2 commits into from
Aug 11, 2023
Merged

fix: force height: auto on images to fix scaling issue in 6.3 #2174

merged 2 commits into from
Aug 11, 2023

Conversation

laurelfulford
Copy link
Contributor

All Submissions:

Changes proposed in this Pull Request:

Since 6.3 we've had some reports of existing images in stories being stretched out on mobile; I'm also able to recreate this with adding new images and resizing them using the little image 'handles'.

This is due to the height and width now being added in the style attribute on images; the width is still responsive because of the a max-width overriding it, but the inline pixel height overrides the height: auto that should be helping it scale down.

This PR adds the height: auto with !important, but only in cases where the image block doesn't have the new contain or cover scale options enabled.

See: WordPress/gutenberg#53555

How to test the changes in this Pull Request:

  1. Add an image to the editor.
  2. Use the little handles on the image to scale the image down a hair. Note that the 'Scale' option in the sidebar doesn't select either option (Cover or Contain):

image

  1. Publish and view on the front-end; scale down browser window to mobile size.
  2. Note that the image is distorted:

image

  1. Apply the PR and confirm that the image is fixed.
  2. Test the PR with the other image options, just to make sure this change doesn't affect how those options work -- for example
  • Pick a couple different aspect ratios
  • Change the image size using the fields in the right sidebar, or use the handles and manually enable Contain or Cover.

Other information:

  • Have you added an explanation of what your changes do and why you'd like us to include them?
  • Have you written new tests for your changes, as applicable?
  • Have you successfully ran tests with your changes locally?

@laurelfulford laurelfulford added the [Status] Needs Review The issue or pull request needs to be reviewed label Aug 11, 2023
@laurelfulford laurelfulford requested a review from a team as a code owner August 11, 2023 15:56
miguelpeixe
miguelpeixe approved these changes Aug 11, 2023
View reviewed changes
Copy link
Member

@miguelpeixe miguelpeixe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Working as described!

@github-actions github-actions bot added [Status] Approved The pull request has been reviewed and is ready to merge and removed [Status] Needs Review The issue or pull request needs to be reviewed labels Aug 11, 2023
@laurelfulford laurelfulford merged commit 442f1ca into release Aug 11, 2023
@laurelfulford laurelfulford deleted the hotfix/correct-image-size branch August 11, 2023 16:20
matticbot pushed a commit that referenced this pull request Aug 11, 2023
@semantic-release-bot
chore(release): 1.77.1 [skip ci]
695f23d 
## [1.77.1](v1.77.0...v1.77.1) (2023-08-11)

### Bug Fixes

* force height: auto on image blocks to fix scaling issue ([#2174](#2174)) ([442f1ca](442f1ca))
@matticbot
Copy link
Contributor

🎉 This PR is included in version 1.77.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

@gamebits
Copy link
Contributor

Here's a PR to fix this issue in core: WordPress/gutenberg#53598

A similar issue, WordPress/gutenberg#52739, will be fixed by WordPress/gutenberg#53274.

@matticbot
Copy link
Contributor

🎉 This PR is included in version 1.77.2-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

@matticbot
Copy link
Contributor

🎉 This PR is included in version 1.77.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@miguelpeixe miguelpeixe miguelpeixe approved these changes

Assignees
No one assigned
Labels
released on @alpha released [Status] Approved The pull request has been reviewed and is ready to merge
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@laurelfulford @matticbot @gamebits @miguelpeixe