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: Reflect media deletion in the editor #41220

Closed

Conversation

ramonjd
Copy link
Member

@ramonjd ramonjd commented May 23, 2022

What?

Another take at #35973 and #40982, which were reverted due to issues reported in #41161

Revert PR: #41221

This time, if the image block was not replaced with an embed, and it's not an external image, and it's been deleted from the database, we trigger a custom placeholder.

Screen Shot 2022-06-23 at 1 24 53 pm

This gives the user the opportunity to:

  1. Replace the image via the media upload flow.
  2. Clear the image, which will display the default block placeholder.
  3. Leave the image in case it's caused by a temporary network outage.

Original issues:

Why?

The previous attempt was clearing the image automatically and did not take into account images external or otherwise that might be temporarily unavailable.

See the issue: #41161

props @eriktorsner

How?

Testing the suggestion, or my understanding of it, in #41161 (comment) from @danielbachhuber

Testing Instructions

For images that have been deleted

  1. Insert a single Image Block and select an image from your media library. Or upload a new image. All good. Add a caption as well.
  2. Open the Media Modal by clicking Replace
  3. Delete the image you inserted.
  4. Close the modal
  5. The temporary replace/clear placeholder should show.
  6. Now refresh the page. Don't save. Just refresh.
  7. The Image Block placeholder should still show.
  8. Try replacing the image and saving the page.
  9. Repeat steps and select "Clear". You should see the default placeholder.

Screen Shot 2022-06-23 at 1 29 15 pm

For images that haven't been deleted

  1. Add an Image block and select an image from your media library
  2. In the code view change the url of the image, and then switch back to the editor view
  3. Check that the image placeholder does not show. This is because the editor has the original image URL and tests whether it's available.

Screen Shot 2022-06-23 at 1 28 55 pm

For external images

  1. Add an Image block and insert an image via external URL
  2. In the code view change the url of the image, and then switch back to the editor view
  3. Check that the image placeholder does not show

cc @danielbachhuber whose idea I half-implemented 😄

@ramonjd ramonjd self-assigned this May 23, 2022
@ramonjd ramonjd added [Type] Enhancement A suggestion for improvement. [Block] Image Affects the Image Block labels May 23, 2022
@ramonjd ramonjd requested a review from glendaviesnz May 23, 2022 04:37
@github-actions
Copy link

github-actions bot commented May 23, 2022

Size Change: +7.21 kB (+1%)

Total Size: 1.25 MB

Filename Size Change
build/block-editor/index.min.js 153 kB +598 B (0%)
build/block-editor/style-rtl.css 14.6 kB +69 B (0%)
build/block-editor/style.css 14.6 kB +76 B (+1%)
build/block-library/blocks/button/style-rtl.css 543 B +29 B (+6%) 🔍
build/block-library/blocks/button/style.css 543 B +29 B (+6%) 🔍
build/block-library/blocks/comment-template/style-rtl.css 187 B +60 B (+47%) 🚨
build/block-library/blocks/comment-template/style.css 185 B +58 B (+46%) 🚨
build/block-library/blocks/file/style-rtl.css 253 B +29 B (+13%) ⚠️
build/block-library/blocks/file/style.css 254 B +29 B (+13%) ⚠️
build/block-library/blocks/image/editor-rtl.css 758 B +20 B (+3%)
build/block-library/blocks/image/editor.css 756 B +19 B (+3%)
build/block-library/blocks/navigation-submenu/view.min.js 423 B +21 B (+5%) 🔍
build/block-library/blocks/navigation/style-rtl.css 1.96 kB +24 B (+1%)
build/block-library/blocks/navigation/style.css 1.95 kB +22 B (+1%)
build/block-library/blocks/navigation/view.min.js 443 B +20 B (+5%) 🔍
build/block-library/blocks/post-comments/style-rtl.css 632 B +4 B (+1%)
build/block-library/blocks/post-comments/style.css 630 B +2 B (0%)
build/block-library/blocks/post-template/style-rtl.css 282 B -41 B (-13%) 👏
build/block-library/blocks/post-template/style.css 282 B -41 B (-13%) 👏
build/block-library/blocks/query/editor-rtl.css 365 B -4 B (-1%)
build/block-library/blocks/query/editor.css 364 B -5 B (-1%)
build/block-library/blocks/search/style-rtl.css 385 B +6 B (+2%)
build/block-library/blocks/search/style.css 386 B +6 B (+2%)
build/block-library/blocks/search/theme-rtl.css 114 B +50 B (+78%) 🆘
build/block-library/blocks/search/theme.css 114 B +50 B (+78%) 🆘
build/block-library/editor-rtl.css 10.2 kB +20 B (0%)
build/block-library/editor.css 10.2 kB +20 B (0%)
build/block-library/index.min.js 184 kB +320 B (0%)
build/block-library/style-rtl.css 11.5 kB +79 B (+1%)
build/block-library/style.css 11.5 kB +78 B (+1%)
build/block-library/theme-rtl.css 695 B +18 B (+3%)
build/block-library/theme.css 700 B +18 B (+3%)
build/blocks/index.min.js 47 kB -39 B (0%)
build/components/index.min.js 230 kB +2.16 kB (+1%)
build/components/style-rtl.css 14 kB +25 B (0%)
build/components/style.css 14 kB +26 B (0%)
build/core-data/index.min.js 14.7 kB -32 B (0%)
build/customize-widgets/index.min.js 11.2 kB +17 B (0%)
build/dom/index.min.js 4.66 kB +1 B (0%)
build/edit-navigation/index.min.js 16 kB -9 B (0%)
build/edit-navigation/style-rtl.css 4.02 kB -9 B (0%)
build/edit-navigation/style.css 4.03 kB -9 B (0%)
build/edit-post/index.min.js 30.5 kB +75 B (0%)
build/edit-post/style-rtl.css 6.97 kB -108 B (-2%)
build/edit-post/style.css 6.97 kB -106 B (-1%)
build/edit-site/index.min.js 53.1 kB +2.39 kB (+5%) 🔍
build/edit-site/style-rtl.css 8.23 kB +90 B (+1%)
build/edit-site/style.css 8.22 kB +93 B (+1%)
build/edit-widgets/index.min.js 16.5 kB +36 B (0%)
build/edit-widgets/style-rtl.css 4.35 kB -37 B (-1%)
build/edit-widgets/style.css 4.35 kB -36 B (-1%)
build/editor/index.min.js 39.4 kB +770 B (+2%)
build/editor/style-rtl.css 3.65 kB +24 B (+1%)
build/editor/style.css 3.65 kB +25 B (+1%)
build/element/index.min.js 4.27 kB +3 B (0%)
build/format-library/index.min.js 6.75 kB +130 B (+2%)
build/keyboard-shortcuts/index.min.js 1.78 kB -11 B (-1%)
build/list-reusable-blocks/index.min.js 1.74 kB -1 B (0%)
build/media-utils/index.min.js 2.93 kB +21 B (+1%)
build/notices/index.min.js 953 B +8 B (+1%)
build/redux-routine/index.min.js 2.68 kB -2 B (0%)
build/rich-text/index.min.js 11.1 kB +13 B (0%)
build/shortcode/index.min.js 1.53 kB +11 B (+1%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 982 B
build/annotations/index.min.js 2.76 kB
build/api-fetch/index.min.js 2.26 kB
build/autop/index.min.js 2.14 kB
build/blob/index.min.js 475 B
build/block-directory/index.min.js 6.58 kB
build/block-directory/style-rtl.css 990 B
build/block-directory/style.css 991 B
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 B
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 65 B
build/block-library/blocks/archives/style.css 65 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 103 B
build/block-library/blocks/audio/style.css 103 B
build/block-library/blocks/audio/theme-rtl.css 110 B
build/block-library/blocks/audio/theme.css 110 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 59 B
build/block-library/blocks/avatar/style.css 59 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 441 B
build/block-library/blocks/button/editor.css 441 B
build/block-library/blocks/buttons/editor-rtl.css 292 B
build/block-library/blocks/buttons/editor.css 292 B
build/block-library/blocks/buttons/style-rtl.css 275 B
build/block-library/blocks/buttons/style.css 275 B
build/block-library/blocks/calendar/style-rtl.css 207 B
build/block-library/blocks/calendar/style.css 207 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 79 B
build/block-library/blocks/categories/style.css 79 B
build/block-library/blocks/code/style-rtl.css 103 B
build/block-library/blocks/code/style.css 103 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 406 B
build/block-library/blocks/columns/style.css 406 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/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 95 B
build/block-library/blocks/comments/editor.css 95 B
build/block-library/blocks/cover/editor-rtl.css 615 B
build/block-library/blocks/cover/editor.css 616 B
build/block-library/blocks/cover/style-rtl.css 1.55 kB
build/block-library/blocks/cover/style.css 1.55 kB
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 110 B
build/block-library/blocks/embed/theme.css 110 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/view.min.js 346 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 948 B
build/block-library/blocks/gallery/editor.css 950 B
build/block-library/blocks/gallery/style-rtl.css 1.5 kB
build/block-library/blocks/gallery/style.css 1.49 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 333 B
build/block-library/blocks/group/editor.css 333 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 327 B
build/block-library/blocks/html/editor.css 329 B
build/block-library/blocks/image/style-rtl.css 524 B
build/block-library/blocks/image/style.css 530 B
build/block-library/blocks/image/theme-rtl.css 110 B
build/block-library/blocks/image/theme.css 110 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 199 B
build/block-library/blocks/latest-posts/editor.css 198 B
build/block-library/blocks/latest-posts/style-rtl.css 463 B
build/block-library/blocks/latest-posts/style.css 462 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 493 B
build/block-library/blocks/media-text/style.css 490 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 705 B
build/block-library/blocks/navigation-link/editor.css 703 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.03 kB
build/block-library/blocks/navigation/editor.css 2.04 kB
build/block-library/blocks/navigation/view-modal.min.js 2.78 kB
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 363 B
build/block-library/blocks/page-list/editor.css 363 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 157 B
build/block-library/blocks/paragraph/editor.css 157 B
build/block-library/blocks/paragraph/style-rtl.css 260 B
build/block-library/blocks/paragraph/style.css 260 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 495 B
build/block-library/blocks/post-comments-form/style.css 495 B
build/block-library/blocks/post-comments/editor-rtl.css 77 B
build/block-library/blocks/post-comments/editor.css 77 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 605 B
build/block-library/blocks/post-featured-image/editor.css 605 B
build/block-library/blocks/post-featured-image/style-rtl.css 153 B
build/block-library/blocks/post-featured-image/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-terms/style-rtl.css 73 B
build/block-library/blocks/post-terms/style.css 73 B
build/block-library/blocks/post-title/style-rtl.css 80 B
build/block-library/blocks/post-title/style.css 80 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 198 B
build/block-library/blocks/pullquote/editor.css 198 B
build/block-library/blocks/pullquote/style-rtl.css 370 B
build/block-library/blocks/pullquote/style.css 370 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 234 B
build/block-library/blocks/query-pagination/style.css 231 B
build/block-library/blocks/quote/style-rtl.css 213 B
build/block-library/blocks/quote/style.css 213 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 202 B
build/block-library/blocks/rss/editor.css 204 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 165 B
build/block-library/blocks/search/editor.css 165 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 233 B
build/block-library/blocks/separator/style.css 233 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 464 B
build/block-library/blocks/shortcode/editor.css 464 B
build/block-library/blocks/site-logo/editor-rtl.css 708 B
build/block-library/blocks/site-logo/editor.css 708 B
build/block-library/blocks/site-logo/style-rtl.css 192 B
build/block-library/blocks/site-logo/style.css 192 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 84 B
build/block-library/blocks/site-title/editor.css 84 B
build/block-library/blocks/social-link/editor-rtl.css 177 B
build/block-library/blocks/social-link/editor.css 177 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.37 kB
build/block-library/blocks/social-links/style.css 1.36 kB
build/block-library/blocks/spacer/editor-rtl.css 322 B
build/block-library/blocks/spacer/editor.css 322 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 494 B
build/block-library/blocks/table/editor.css 494 B
build/block-library/blocks/table/style-rtl.css 611 B
build/block-library/blocks/table/style.css 609 B
build/block-library/blocks/table/theme-rtl.css 175 B
build/block-library/blocks/table/theme.css 175 B
build/block-library/blocks/tag-cloud/style-rtl.css 226 B
build/block-library/blocks/tag-cloud/style.css 227 B
build/block-library/blocks/template-part/editor-rtl.css 149 B
build/block-library/blocks/template-part/editor.css 149 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/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 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 561 B
build/block-library/blocks/video/editor.css 563 B
build/block-library/blocks/video/style-rtl.css 159 B
build/block-library/blocks/video/style.css 159 B
build/block-library/blocks/video/theme-rtl.css 110 B
build/block-library/blocks/video/theme.css 110 B
build/block-library/common-rtl.css 987 B
build/block-library/common.css 984 B
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-serialization-default-parser/index.min.js 1.11 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/compose/index.min.js 11.7 kB
build/customize-widgets/style-rtl.css 1.4 kB
build/customize-widgets/style.css 1.4 kB
build/data-controls/index.min.js 653 B
build/data/index.min.js 7.95 kB
build/date/index.min.js 32 kB
build/deprecated/index.min.js 507 B
build/dom-ready/index.min.js 324 B
build/edit-post/classic-rtl.css 546 B
build/edit-post/classic.css 547 B
build/escape-html/index.min.js 537 B
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.64 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.77 kB
build/is-shallow-equal/index.min.js 527 B
build/keycodes/index.min.js 1.38 kB
build/list-reusable-blocks/style-rtl.css 835 B
build/list-reusable-blocks/style.css 835 B
build/nux/index.min.js 2.05 kB
build/nux/style-rtl.css 732 B
build/nux/style.css 728 B
build/plugins/index.min.js 1.94 kB
build/preferences-persistence/index.min.js 2.22 kB
build/preferences/index.min.js 1.3 kB
build/primitives/index.min.js 933 B
build/priority-queue/index.min.js 612 B
build/react-i18n/index.min.js 696 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/reusable-blocks/index.min.js 2.22 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/server-side-render/index.min.js 1.61 kB
build/token-list/index.min.js 644 B
build/url/index.min.js 3.61 kB
build/vendors/react-dom.min.js 38.5 kB
build/vendors/react.min.js 4.34 kB
build/viewport/index.min.js 1.08 kB
build/warning/index.min.js 268 B
build/widgets/index.min.js 7.19 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

url: undefined,
id: undefined,
if ( id && ! isReplaced && ! isExternalImage( id, url ) ) {
isMediaFileDeleted( id ).then( ( isFileDeleted ) => {
Copy link
Member Author

Choose a reason for hiding this comment

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

I'm wondering if this will solve the reported issue in #41161 at all... if the image triggers the error handler, it could be due to a network error in which case the fetch request would fail.

🤔

Copy link
Contributor

Choose a reason for hiding this comment

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

Is this a situation we could mock within some unit tests for the image block?

@ramonjd ramonjd force-pushed the try/check-media-load-before-clearing-attributes branch from cfa08c3 to c54e532 Compare June 3, 2022 04:57
@ramonjd
Copy link
Member Author

ramonjd commented Jun 3, 2022

Still pretty rough, but what do you think about the custom placeholder idea @glendaviesnz ?

It's an extra step for the user, but at least they get to decide whether to clear it.

ramonjd added 3 commits June 23, 2022 12:16
…eleted from the attachments.

If the image block was not replaced with an embed,  and it's not an external image, and it's been deleted from the database, clear the attributes and trigger the placeholder.
@ramonjd ramonjd force-pushed the try/check-media-load-before-clearing-attributes branch from c54e532 to f4ffb07 Compare June 23, 2022 03:24
@ramonjd ramonjd marked this pull request as ready for review June 23, 2022 03:31
Copy link
Contributor

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

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

Thanks for tackling this issue @ramonjd 👍

Most tests were successful but I did encounter one problem while testing "images that have been deleted".

After deleting an image but without refreshing the editor, when I attempt to replace the image for the first time, I get the image error placeholder again along with a new 404 in the dev tools console. If I attempt to replace the image a second time it works.

Screen.Recording.2022-07-11.at.4.26.23.pm.mp4

If after deleting the image, I refresh the editor as per test instructions then the initial attempt to replace the image succeeds.

Other than the issue mentioned above, I left a few other minor suggestions via inline comments.

*/
export function isMediaDestroyed( id ) {
const attachment = window?.wp?.media?.attachment( id ) || {};
return attachment.destroyed;
Copy link
Contributor

Choose a reason for hiding this comment

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

Should we force the return here to be boolean matching the JSDoc return type?

Suggested change
return attachment.destroyed;
return !! attachment.destroyed;

packages/block-library/src/image/edit.js Outdated Show resolved Hide resolved
packages/block-library/src/image/edit.js Outdated Show resolved Hide resolved
packages/block-library/src/image/edit.js Outdated Show resolved Hide resolved
url: undefined,
id: undefined,
if ( id && ! isReplaced && ! isExternalImage( id, url ) ) {
isMediaFileDeleted( id ).then( ( isFileDeleted ) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

Is this a situation we could mock within some unit tests for the image block?

@ramonjd
Copy link
Member Author

ramonjd commented Jul 11, 2022

@aaronrobertshaw I appreciate the review

After deleting an image but without refreshing the editor, when I attempt to replace the image for the first time, I get the image error placeholder again along with a new 404 in the dev tools console. If I attempt to replace the image a second time it works.

Will take a look at this. The whole enterprise is a bit fiddly and am wondering if it's a house of cards. I'll try to stabilize it.

@ramonjd
Copy link
Member Author

ramonjd commented Jul 12, 2022

I think I'll have to revisit this PR, and probably the UX.

There's a bit of race going on between the time we check for a newly-selected image and when the onError callback for the image is fired. After selecting the image the onError is fired, but the image edit component's attributes take a while to update. So even wrapping things in useCallback won't suffice.

There's an elegant way around this, but I don't know it yet 🤣

So I might put this PR on the back burner. I don't think there's a huge demand for it yet.

Thanks again for the review.

@ramonjd
Copy link
Member Author

ramonjd commented Oct 14, 2022

Closing this one for another time and place.

@ramonjd ramonjd closed this Oct 14, 2022
@ramonjd ramonjd deleted the try/check-media-load-before-clearing-attributes branch October 14, 2022 02:48
@priethor priethor removed the [Status] In Progress Tracking issues with work in progress label Jan 11, 2023
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] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants