-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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
Since 6.3, the display ratio of images is broken when the size of the Image Block is specified. #53555
Comments
It seems to me that we can address this issue by setting This would affect the user specifying the image size with CSS. For example, if the user adds a class .wp-block-iamge.small-img{
width: 80px;
height: 80px;
} |
As a hasty countermeasure, I took the following approach within my theme. add_filter( 'render_block_core/image', __NAMESPACE__ . '\fix_img_v63', 10, 2 );
function fix_img_v63( $block_content, $block ) {
$attrs = $block['attrs'] ?? [];
$w = $attrs['width'] ?? '';
$h = $attrs['height'] ?? '';
if ( $w && $h ) {
$size_style = "width:{$w}px;height:{$h}px";
$ratio = "{$w}/{$h}";
$block_content = str_replace( $size_style, "aspect-ratio:{$ratio}", $block_content );
}
return $block_content;
} Note: If we want to be strict, you should extract the |
It turns out that this problem also occurs on Twenty Twenty-Two. I haven't made any changes, but the header image is overflowing. Originally, it should be displayed as shown below. From my understanding, this bug occurred in WP6.3. I think this is an issue that should be resolved in WP6.4, so I'll add it to the project board. |
We're cutting this very close to the beta 1 for 6.4. Once beta 1 happens, only bugs introduced in 6.4 can be resolved and I don't see this being fixed by then. As a result, I'm moving to 6.4.1 at the earliest. |
I'm seeing a few separate issues discussed here.
|
Hey, I just want to pitch in here as well. I’ve had so many issues with my images since the WordPress 6.2. update this summer! I've reached out to several developers and no one can fully troubleshoot the issue. And the issue is the fact that I'm missing the feature where I can select the image to be 25%-50%-75%-100% of the image size. That's it. Why did you have to remove that? Instead, now I have to manually type the width and height in pixel and then after that I have to select ‘contain’ under scale — instead of just clicking one button. (This creates a border around the image so it takes up lots of screenspace and does not look good either) This is rather annoying – but the bigger issue is that ALL of my previous 300 posts now have distorted images on mobile because this feature is gone. This is negatively impacting my SEO. I have to go through the posts 1 by 1 to then manually set the width and height in pixels and then click ‘contain’. There’s gotta be a better way? Could you please just bring back the % feature? Please :) |
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.
(
<img width="720" height="480" ...>
))(
<img width="720" height="480" style="width:720px;height:480px" ...>
)In most cases,
<img>
appliesmax-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 is200px
, the "Custom" label makes me think thataspect-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
width
andheight
in the attribute values as before, and outputaspect-ratio
in the style. Then, the "ASPECT RATIO" should be indicated as "Custom".px
values in thestyle
attribute should be prepared separately. In this case, the "ASPECT RATIO" should be expressed as "None".Environment info
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
The text was updated successfully, but these errors were encountered: