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

Image block: Incorrect image width with aspect ratio in block editor #52219

Open
ajlende opened this issue Jul 2, 2023 · 4 comments
Open

Image block: Incorrect image width with aspect ratio in block editor #52219

ajlende opened this issue Jul 2, 2023 · 4 comments
Assignees
Labels
[Block] Image Affects the Image Block [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@ajlende
Copy link
Contributor

ajlende commented Jul 2, 2023

Description

In the post editor, if you have an image block with an image that is smaller than the width of the post container and you specify an aspect ratio without selecting a width or height dimension, the image is incorrectly scaling up to fill the width of the container.

Step-by-step reproduction instructions

Screenshots use https://github.com/WordPress/wordpress-develop/blob/62b286f9b2ebc7bb609827a09fcf5136cac5fa01/tests/phpunit/data/images/a2-small.jpg for testing.

  1. Use the following image block content or create a block includes an aspect ratio (and scale), but no width or height.
<!-- wp:image {"id":443,"aspectRatio":"3/4","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://wp.local/wp-content/uploads/2023/06/a2-small.jpg" alt="" class="wp-image-443" style="aspect-ratio:3/4;object-fit:cover"/></figure>
<!-- /wp:image -->
  1. See that the image fills the width of the editor instead of the width of the image.

Screenshots, screen recording, code snippet

image-block-aspect-ratio-width-bug

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@ajlende ajlende added [Type] Bug An existing feature does not function as intended [Block] Image Affects the Image Block labels Jul 2, 2023
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Jul 2, 2023
@draganescu
Copy link
Contributor

This does not happen if the image is picked from the media library 🤔

@Mamaduka
Copy link
Member

Was this resolved via #52286?

@ajlende
Copy link
Contributor Author

ajlende commented Jul 31, 2023

Was this resolved via #52286?

No, that PR exclusively changed the frontend, not the editor. I took a break from this last week, but I'm back on it now.

@ajlende
Copy link
Contributor Author

ajlende commented Jul 31, 2023

This one is way more frustrating than it should be. The solution should be as easy as adding fit-content for width and height for the resizable container.

The problem is that re-resizable doesn't support fit-content. It looks like the style is being overridden when they render the component. It overrides custom styles, passing in fit-content appends px resulting in fit-contentpx, undefined results in 'auto', and null crashes the component.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Image Affects the Image Block [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants