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: Fix stretched images constrained by max-width #53274

Merged
merged 5 commits into from
Aug 3, 2023

Conversation

ajlende
Copy link
Contributor

@ajlende ajlende commented Aug 2, 2023

What?

  • When dragging to resize an image, set width to the width in pixels, height to auto, and aspect-ratio to the computed image aspect ratio. This should match the user's expectations that the aspect ratio of the block is fixed even when constrained by max-width.
  • Remove the <img> element width and height attributes from save as they are already added via a hook to all images on a page.
  • Add block deprecation and migration for width and height block attributes to be strings.

Why?

Fixes #52739

How?

Previously, dragging to resize would set the width and height of an image. However this caused problems in contexts where the block's max-width would constrain the image.

This approach solves the problem by saving the image's computed aspect ratio and sizing the block based on the width of the image when it is dragged to be resized.

Not every image is constrained by max-width, however. For example, image blocks grouped in a horizontal row block are not affected by max-width. In those scenarios, you may want to fix the height and allow for auto width.

Horizontal layouts are less common and there isn't a good way to know the context that the block will be rendered in from the perspective of the image block, so I can't really add a heuristic for dragging to resize the image in those scenarios. The sidebar will have to be used to set the height while leaving the width to be auto if you want a layout like that.

Rather than adding a new attribute for CSS width and height, the existing ones have been migrated to represent CSS strings instead of numbers representing px values.

The <img> element width and height attributes were removed from the save function as they are automatically added via a hook to prevent layout shifts as image load. This decouples the block attributes from the element attributes and allows for styling to be more flexible and matches the intention of setting the width and height of an image in the editor.

Testing Instructions

See #52739 for details.

  1. Insert an image into a post.
  2. Resize the image to a smaller size, but do not select a scaling option.
  3. View the site using responsive tools and observe the image scale down as expected when you reach widths smaller than max-width for your theme.

Testing Instructions for Keyboard

Screenshots or screencast

@ajlende ajlende added [Type] Bug An existing feature does not function as intended [Block] Image Affects the Image Block labels Aug 2, 2023
@ajlende ajlende self-assigned this Aug 2, 2023
@ajlende ajlende requested a review from ajitbohra as a code owner August 2, 2023 17:41
@github-actions
Copy link

github-actions bot commented Aug 2, 2023

Size Change: +623 B (0%)

Total Size: 1.44 MB

Filename Size Change
build/block-editor/index.min.js 210 kB +18 B (0%)
build/block-library/index.min.js 202 kB +186 B (0%)
build/commands/index.min.js 15.3 kB +208 B (+1%)
build/commands/style-rtl.css 849 B +14 B (+2%)
build/commands/style.css 843 B +9 B (+1%)
build/core-data/index.min.js 16.4 kB +14 B (0%)
build/edit-post/index.min.js 35.6 kB +10 B (0%)
build/edit-site/index.min.js 90.4 kB +110 B (0%)
build/editor/style-rtl.css 3.55 kB +17 B (0%)
build/editor/style.css 3.55 kB +16 B (0%)
build/plugins/index.min.js 1.79 kB +21 B (+1%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 955 B
build/annotations/index.min.js 2.69 kB
build/api-fetch/index.min.js 2.28 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 451 B
build/block-directory/index.min.js 6.99 kB
build/block-directory/style-rtl.css 1.02 kB
build/block-directory/style.css 1.02 kB
build/block-editor/content-rtl.css 4.26 kB
build/block-editor/content.css 4.25 kB
build/block-editor/default-editor-styles-rtl.css 381 B
build/block-editor/default-editor-styles.css 381 B
build/block-editor/style-rtl.css 14.8 kB
build/block-editor/style.css 14.8 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 126 B
build/block-library/blocks/audio/theme.css 126 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 584 B
build/block-library/blocks/button/editor.css 582 B
build/block-library/blocks/button/style-rtl.css 624 B
build/block-library/blocks/button/style.css 623 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 409 B
build/block-library/blocks/columns/style.css 409 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 199 B
build/block-library/blocks/comment-template/style.css 198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 647 B
build/block-library/blocks/cover/editor.css 650 B
build/block-library/blocks/cover/style-rtl.css 1.61 kB
build/block-library/blocks/cover/style.css 1.6 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 178 B
build/block-library/blocks/details/style.css 178 B
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 126 B
build/block-library/blocks/embed/theme.css 126 B
build/block-library/blocks/file/editor-rtl.css 316 B
build/block-library/blocks/file/editor.css 316 B
build/block-library/blocks/file/style-rtl.css 269 B
build/block-library/blocks/file/style.css 270 B
build/block-library/blocks/file/view-interactivity.min.js 317 B
build/block-library/blocks/file/view.min.js 375 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 B
build/block-library/blocks/freeform/editor-rtl.css 2.58 kB
build/block-library/blocks/freeform/editor.css 2.58 kB
build/block-library/blocks/gallery/editor-rtl.css 947 B
build/block-library/blocks/gallery/editor.css 952 B
build/block-library/blocks/gallery/style-rtl.css 1.53 kB
build/block-library/blocks/gallery/style.css 1.53 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 654 B
build/block-library/blocks/group/editor.css 654 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/html/editor-rtl.css 336 B
build/block-library/blocks/html/editor.css 337 B
build/block-library/blocks/image/editor-rtl.css 834 B
build/block-library/blocks/image/editor.css 833 B
build/block-library/blocks/image/style-rtl.css 1.42 kB
build/block-library/blocks/image/style.css 1.42 kB
build/block-library/blocks/image/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 B
build/block-library/blocks/image/view-interactivity.min.js 1.46 kB
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 478 B
build/block-library/blocks/latest-posts/style.css 478 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 507 B
build/block-library/blocks/media-text/style.css 505 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 712 B
build/block-library/blocks/navigation-link/editor.css 711 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 296 B
build/block-library/blocks/navigation-submenu/editor.css 295 B
build/block-library/blocks/navigation/editor-rtl.css 2.26 kB
build/block-library/blocks/navigation/editor.css 2.26 kB
build/block-library/blocks/navigation/style-rtl.css 2.23 kB
build/block-library/blocks/navigation/style.css 2.22 kB
build/block-library/blocks/navigation/view-interactivity.min.js 988 B
build/block-library/blocks/navigation/view-modal.min.js 2.85 kB
build/block-library/blocks/navigation/view.min.js 469 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 401 B
build/block-library/blocks/page-list/editor.css 401 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 174 B
build/block-library/blocks/paragraph/editor.css 174 B
build/block-library/blocks/paragraph/style-rtl.css 279 B
build/block-library/blocks/paragraph/style.css 281 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 508 B
build/block-library/blocks/post-comments-form/style.css 508 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 588 B
build/block-library/blocks/post-featured-image/editor.css 586 B
build/block-library/blocks/post-featured-image/style-rtl.css 319 B
build/block-library/blocks/post-featured-image/style.css 319 B
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B
build/block-library/blocks/post-navigation-link/style.css 153 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 314 B
build/block-library/blocks/post-template/style.css 314 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 69 B
build/block-library/blocks/post-time-to-read/style.css 69 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 125 B
build/block-library/blocks/preformatted/style.css 125 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 335 B
build/block-library/blocks/pullquote/style.css 335 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 302 B
build/block-library/blocks/query-pagination/style.css 299 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 450 B
build/block-library/blocks/query/editor.css 449 B
build/block-library/blocks/quote/style-rtl.css 222 B
build/block-library/blocks/quote/style.css 222 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 149 B
build/block-library/blocks/rss/editor.css 149 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 178 B
build/block-library/blocks/search/editor.css 178 B
build/block-library/blocks/search/style-rtl.css 587 B
build/block-library/blocks/search/style.css 584 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/search/view.min.js 631 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 234 B
build/block-library/blocks/separator/style.css 234 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 323 B
build/block-library/blocks/shortcode/editor.css 323 B
build/block-library/blocks/site-logo/editor-rtl.css 754 B
build/block-library/blocks/site-logo/editor.css 754 B
build/block-library/blocks/site-logo/style-rtl.css 203 B
build/block-library/blocks/site-logo/style.css 203 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.44 kB
build/block-library/blocks/social-links/style.css 1.43 kB
build/block-library/blocks/spacer/editor-rtl.css 348 B
build/block-library/blocks/spacer/editor.css 348 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 433 B
build/block-library/blocks/table/editor.css 433 B
build/block-library/blocks/table/style-rtl.css 645 B
build/block-library/blocks/table/style.css 644 B
build/block-library/blocks/table/theme-rtl.css 146 B
build/block-library/blocks/table/theme.css 146 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 403 B
build/block-library/blocks/template-part/editor.css 403 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/term-description/style-rtl.css 111 B
build/block-library/blocks/term-description/style.css 111 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 552 B
build/block-library/blocks/video/editor.css 555 B
build/block-library/blocks/video/style-rtl.css 185 B
build/block-library/blocks/video/style.css 185 B
build/block-library/blocks/video/theme-rtl.css 126 B
build/block-library/blocks/video/theme.css 126 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.1 kB
build/block-library/common.css 1.1 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 12.1 kB
build/block-library/editor.css 12.1 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 13.7 kB
build/block-library/style.css 13.8 kB
build/block-library/theme-rtl.css 686 B
build/block-library/theme.css 691 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 51 kB
build/components/index.min.js 243 kB
build/components/style-rtl.css 11.8 kB
build/components/style.css 11.8 kB
build/compose/index.min.js 12.1 kB
build/core-commands/index.min.js 2.44 kB
build/customize-widgets/index.min.js 12 kB
build/customize-widgets/style-rtl.css 1.46 kB
build/customize-widgets/style.css 1.45 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 8.28 kB
build/date/index.min.js 17.8 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.63 kB
build/edit-post/classic-rtl.css 544 B
build/edit-post/classic.css 545 B
build/edit-post/style-rtl.css 7.58 kB
build/edit-post/style.css 7.58 kB
build/edit-site/style-rtl.css 13.2 kB
build/edit-site/style.css 13.2 kB
build/edit-widgets/index.min.js 16.9 kB
build/edit-widgets/style-rtl.css 4.52 kB
build/edit-widgets/style.css 4.52 kB
build/editor/index.min.js 45.3 kB
build/element/index.min.js 4.8 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 7.59 kB
build/format-library/style-rtl.css 554 B
build/format-library/style.css 553 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.58 kB
build/interactivity/index.min.js 10.4 kB
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.64 kB
build/keycodes/index.min.js 1.84 kB
build/list-reusable-blocks/index.min.js 2.18 kB
build/list-reusable-blocks/style-rtl.css 836 B
build/list-reusable-blocks/style.css 836 B
build/media-utils/index.min.js 2.9 kB
build/notices/index.min.js 948 B
build/nux/index.min.js 1.99 kB
build/nux/style-rtl.css 735 B
build/nux/style.css 732 B
build/preferences-persistence/index.min.js 1.84 kB
build/preferences/index.min.js 1.24 kB
build/primitives/index.min.js 943 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 951 B
build/react-i18n/index.min.js 615 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.7 kB
build/reusable-blocks/index.min.js 2.71 kB
build/reusable-blocks/style-rtl.css 243 B
build/reusable-blocks/style.css 243 B
build/rich-text/index.min.js 11 kB
build/router/index.min.js 1.77 kB
build/server-side-render/index.min.js 1.94 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 1.83 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.57 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 958 B
build/warning/index.min.js 268 B
build/widgets/index.min.js 7.16 kB
build/widgets/style-rtl.css 1.15 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

@ajlende ajlende added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Aug 2, 2023
@scruffian
Copy link
Contributor

I found a potential bug with this approach:

If I create an image that has fixed width and height attributes like this:
Screenshot 2023-08-03 at 12 24 00
(image dimensions 700 x 100)

And then I resize the window, the height gets fixed at 100px but the width reduces, like this:
Screenshot 2023-08-03 at 12 24 07

I have added a commit which allows the whole image to rescale and keep its aspect ratio:
Screenshot 2023-08-03 at 12 24 51

I haven't updated the deprecations etc yet incase this is a bad idea.

@ajlende
Copy link
Contributor Author

ajlende commented Aug 3, 2023

Prevent image losing its aspect ratio at smaller window dimensions

Because there are situations where layouts could require both a height and max-height without aspect-ratio, I'm hesitant to update the save function to set max-height to height. I think any modifications to layout should be handled by the editor so that advanced users could modify the block to make these layouts as they wish.

We can add a new attribute without adding a block deprecation if the new attribute adds something that couldn't have existed with the old attributes. Adding max-height as a new attribute would fit those criteria.

Even if the existing interaction is unexpected for vertical layouts with both a height and width set, at least there isn't a way in the editor to accidentally stretch the image in that case (object-fit is set to cover when you modify both the width and height). So, I think we can give a little more thought to this issue and handle it in a follow-up.

Copy link
Contributor

@scruffian scruffian left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense. Let's handle it in a followup.

@scruffian scruffian enabled auto-merge (squash) August 3, 2023 15:02
@scruffian scruffian merged commit 8a29e63 into trunk Aug 3, 2023
50 of 51 checks passed
@scruffian scruffian deleted the fix/image-block-re-resize-max-width branch August 3, 2023 16:07
@github-actions github-actions bot added this to the Gutenberg 16.5 milestone Aug 3, 2023
@tellthemachines tellthemachines added Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release and removed Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta labels Aug 8, 2023
tellthemachines pushed a commit that referenced this pull request Aug 14, 2023
* Fix dragging to resize from stretching image in the frontend

* Add image block v7 deprecation

* Update deprecation comment

* Prevent image losing its aspect ratio at smaller window dimensions

* Revert "Prevent image losing its aspect ratio at smaller window dimensions"

This reverts commit 8ac9f8c.

---------

Co-authored-by: scruffian <ben@scruffian.com>
@tellthemachines
Copy link
Contributor

I just cherry-picked this PR to the update/bugfixes-6-3-1 branch to get it included in the next release: 0fb7fdf

@tellthemachines tellthemachines removed the Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release label Aug 14, 2023
tellthemachines pushed a commit that referenced this pull request Aug 31, 2023
* Fix dragging to resize from stretching image in the frontend

* Add image block v7 deprecation

* Update deprecation comment

* Prevent image losing its aspect ratio at smaller window dimensions

* Revert "Prevent image losing its aspect ratio at smaller window dimensions"

This reverts commit 8ac9f8c.

---------

Co-authored-by: scruffian <ben@scruffian.com>
tellthemachines added a commit that referenced this pull request Sep 1, 2023
* Update document title buttons radius (#53221)

* Fix: Sync status overlaps for some languages in Patterns post type page (#53243)

* Image block: Fix stretched images constrained by max-width (#53274)

* Fix dragging to resize from stretching image in the frontend

* Add image block v7 deprecation

* Update deprecation comment

* Prevent image losing its aspect ratio at smaller window dimensions

* Revert "Prevent image losing its aspect ratio at smaller window dimensions"

This reverts commit 8ac9f8c.

---------

Co-authored-by: scruffian <ben@scruffian.com>

* Image Block: Don't render `DimensionsTool` if it is not resizable (#53181)

* Fix missing Replace button in content-locked Image blocks (#53410)

* Revert "don't display BlockContextualToolbar at all in contentonly locking (#53110)"

This reverts commit 5efce0e.

* Alternative fix to hide BlockContextualToolbar when there are no controls

* fix the go to for non pages by showing it only for pages (#53408)

* Site Editor: Fix document actions label helper method (#52974)

* Site Editor: Fix document actions label helper method
* Add missing useSelect dep
* Fix e2e tests
* Move the label map at the file level to avoid recreating the object on every render

* Image: Clear aspect ratio when wide aligned (#53439)

* RichText: Remove 'Footnotes' when interactive formatting is disabled (#53474)

Introduce a new 'interactive' setting for format types

* Preserve block style variations when securing theme json (#53466)

* Preserve block style variations when securing theme json

Valid and safe block style variations were being removed by
`WP_Theme_JSON_Gutenberg::remove_insecure_properties` when securing the
theme.json. When this was a problem varied depending upon site
configuration, but out-of-the-box it was a problem for administrators on
multi-site installs.

This change adds explicit processing of variations in
`remove_insecure_properties` so that they won't get removed.

* Add another variation sanitisation test

This test checks that when removing insecure properties an
unknown/unsupported property is removed from the variation.

* Site editor: add missing i18n in `HomeTemplateDetails` (#53543)

* Site editor: add missing i18n in `HomeTemplateDetails`

* Lint fix

* Fix: Snack bar not fixed on certain pages in the Site Editor (#53207)

* Fix document title alignment in command palette button (#53224)

* Fallback to default max viewport if layout wide size is fluid. (#53551)

* Link Control: persist advanced settings toggle state to preferences if available (#52799)

* Link Control: Create a preference for whether the advanced section is open

* move the useSelect to the component that uses it

* Supply preference setter via settings

* Pass setter to Post Editor

* Provide local state fallbacks in absence of preference store settings

* Conditionalise display of settings drawer to “edit” mode only

* Extract to constant to improve comprehension

* Fix bug in preferences resolution

* Improve comments

* Add e2e scaffold

* Fix e2e test to correctly assert on feature

* Remove focused test

* Reinstate original logic to hide settings when not required

* Scaffold documentation

* Revert providing prefs via settings

* Refactor to use `core/block-editor` as preference scope

* Update docs

* Reinstate remaining original conditional

* tentative fix for the e2e test

* Try a different syntax for shiftAlt

* another attempt to fix the e2e test

---------

Co-authored-by: Dave Smith <getdavemail@gmail.com>
Co-authored-by: MaggieCabrera <maggie.cabrera@automattic.com>

* Add tests for fluid layout + typography (#53554)

* Fix support of sticky position in non-iframed post editor (#53540)

* Fix support of sticky position in non-iframed post editor

* Revert "Footnotes: Fix recursion into updating attributes when attributes is not an object (#53257)"

This reverts commit ab04074.

* Fix: indicator style when block moving mode (#53972)

* Fix post editor top toolbar with custom fields in Safari (#53688)

* Set top toolbar size dynamically (#53526)

* fix the top toolbar size in the space remaining after plugin items are pinned

* only resize above the tablet breakpoint

* fix fixed block toolbar collapse button when icon labels are shown

* Update height and scroll behavior

* move the layout effect to the affected component, fixes for fullscreen, no block selected, icon labels height

---------

Co-authored-by: jasmussen <joen@automattic.com>

* Roll back camelCase change in 96b6b1e

---------

Co-authored-by: James Koster <james@jameskoster.co.uk>
Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Co-authored-by: Alex Lende <alex+github.com@lende.xyz>
Co-authored-by: scruffian <ben@scruffian.com>
Co-authored-by: Robert Anderson <robert@noisysocks.com>
Co-authored-by: Andrei Draganescu <me@andreidraganescu.info>
Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>
Co-authored-by: Dean Sas <dean.sas@automattic.com>
Co-authored-by: Pascal Birchler <pascalb@google.com>
Co-authored-by: Dave Smith <getdavemail@gmail.com>
Co-authored-by: MaggieCabrera <maggie.cabrera@automattic.com>
Co-authored-by: Mitchell Austin <mr.fye@oneandthesame.net>
Co-authored-by: jasmussen <joen@automattic.com>
Co-authored-by: ramon <ramonjd@gmail.com>
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 [Type] Bug An existing feature does not function as intended
Projects
Development

Successfully merging this pull request may close these issues.

[Block] Image - Resized images maintain a fixed height on small screens, distorting image or adding margins
3 participants