WordPress/gutenberg

Since 6.3, the display ratio of images is broken when the size of the Image Block is specified.

Open

#53555 opened on Aug 11, 2023

View on GitHub
 (14 comments) (0 reactions) (0 assignees)JavaScript (9,607 stars) (3,893 forks)batch import
Backwards CompatibilityGood First Issue[Block] Image[Feature] Block Validation/Deprecation[Status] In Progress[Type] Bug

Description

Description

A specification change regarding the behavior when width and height are specified is causing the problem.

Previously, the size was only output in the width and height attributes. (e.g. width="..." height="...")

However, starting with 6.3, the style attribute suddenly overrides the numerical value in px units. (e.g. style="width: ...px;height: ...px")

This will cause images that have already been installed in the past to be displayed incorrectly.

Example

Take a 960px:640px size image file as an example.

  • If 75% is specified in v.6.2, the width and height attributes will be 720:480 respectively.
    (<img width="720" height="480" ...>))
  • In v.6.3, the width and height will be set to 720px and 480px, respectively, in the style as well as the attribute values. (<img width="720" height="480" style="width:720px;height:480px" ...>)

In most cases, <img> applies max-width:100%;height: auto;. (The core style is also like that. ) However, since v.6.3, the height is forced to be overridden by the px value, which overrides the height:auto, and the proportions are quite broken when viewed at phone sizes, etc.

Making this change suddenly after 4 years would cause a lot of problems.

Problems with the "ASPECT RATIO" setting

This is a slightly different issue, but along with the above problem, there was something else that bothered me.

In v.6.3, "ASPECT RATIO" is displayed as "Custom" when width and height are specified.

This is disconcerting.

For example, when the width is 400px and the height is 200px, the "Custom" label makes me think that aspect-ratio=400/200 would be output.

However, in reality, aspect-ratio is not outputted in any way.

Isn't the expression "None" instead of "Custom"?

Step-by-step reproduction instructions

Please specify the width and height in the Image Block.

Screenshots, screen recording, code snippet

Here is a screenshot with the TT3 theme.

↓Smartphone display in version 6.2 when 75% is specified for images

.

↓Images that had 75% specified for the image are collapsing after the update

Suggestion for improvement

  • The width and height settings as of 6.3 should only output width and height in the attribute values as before, and output aspect-ratio in the style. Then, the "ASPECT RATIO" should be indicated as "Custom".
  • The setting for setting width and height as px values in the style attribute should be prepared separately. In this case, the "ASPECT RATIO" should be expressed as "None".

Environment info

  • WordPress 6.3
  • TT3

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

Contributor guide