-
Notifications
You must be signed in to change notification settings - Fork 4.8k
Image block: Incorrect image width with aspect ratio in block editor #52219
Copy link
Copy link
Closed
Labels
[Block] ImageAffects the Image BlockAffects the Image Block[Status] In ProgressTracking issues with work in progressTracking issues with work in progress[Type] BugAn existing feature does not function as intendedAn existing feature does not function as intended
Description
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.
- 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 -->- See that the image fills the width of the editor instead of the width of the image.
Screenshots, screen recording, code snippet
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
Reactions are currently unavailable
Metadata
Metadata
Labels
[Block] ImageAffects the Image BlockAffects the Image Block[Status] In ProgressTracking issues with work in progressTracking issues with work in progress[Type] BugAn existing feature does not function as intendedAn existing feature does not function as intended
Type
Fields
Give feedbackNo fields configured for issues without a type.
