Image block resizes image by clicking anywhere along the side (without dragging)

[inspiredtaste]

While editing posts since updating to WordPress 6.3 we started noticing images that were incorrectly displayed on the frontend when viewing the post. This was done without us knowing how we did it. When we logged in to fix the images we noticed that all of those images had a custom aspect ratio of 840px width added. We did not knowingly add this custom width. We were able to replicate how we added the custom aspect ratio width.

If we clicked to the right of any image while editing. The custom width was added without our knowledge. (see before and after screenshots)

This bug messed up quite a few posts and we spent a lot of time fixing all of the "broken" looking images. Is there a way to disable the custom aspect ratio feature?

Before Clicking

After Clicking

[sabernhardt]

Hi and thanks for the report!

This belongs on the ​Gutenberg GitHub repository. Would you like to open an issue there?

While the (right) side resizable box handle was trouble for you, I am more concerned about the bottom click/drag area because that can cover part of the caption.

The starting width (840 pixels in your case) apparently comes from the theme's content width. In two themes I checked, I had 620 and 655.

I think the circle should be the only clickable area, and that should be larger than 23 by 23 pixels (possibly even showing arrows inside it).

[sabernhardt]

Is there a way to disable the custom aspect ratio feature?

Instead of removing the width and height fields, you could try overriding styles in the editor.

Adding admin CSS via a plugin such as ​Simple Custom CSS and JS could be friendlier than using the enqueue_block_editor_assets action. However, admin CSS would not apply within the new iframe editor. Some plugins disable the iframe automatically, such as WooCommerce, Yoast SEO and All-in-One SEO. If you do not have or want any of those plugins, you also could go to Preferences (in the Options menu) and enable the Custom Fields panel.

Hide the handles entirely:

.components-resizable-box__container.has-show-handle .components-resizable-box__handle {
	display: none;
}

Make the handles much smaller:

.components-resizable-box__container.has-show-handle .components-resizable-box__handle {
	width: 2px;
	height: 2px;
}
.components-resizable-box__container .components-resizable-box__handle-left {
	left: -1px;
	top: 50%;
}
.components-resizable-box__container .components-resizable-box__handle-right {
	right: -1px;
	top: 50%;
}
.components-resizable-box__container .components-resizable-box__handle-bottom {
	bottom: -1px;
	left: 50%;
	right: 50%;
}

[inspiredtaste]

Thanks for the tips but I don't have any of those plugins and I don't think I should have to combat this bug with another plugin. I think this fix should be default in WordPress's next core update. I am seeing quite a few WordPress websites with images that are incorrectly sized and stretched around the web due to the aspect ratio being added so easily. This started with the last major update of WordPress.

[sabernhardt]

That was only one possible way to work around the issue until it's fixed in the editor interface.

To follow and/or join the discussion on GitHub, please visit:
​https://github.com/WordPress/gutenberg/issues/55713