[wp-trac] [WordPress Trac] #34981: Usage of `image_size_names_choose` breaks JS attachment model attributes

[WordPress Trac]

#34981: Usage of `image_size_names_choose` breaks JS attachment model attributes
-------------------------------------------------+-------------------------
 Reporter:  dnaber-de                            |       Owner:  (none)
     Type:  defect (bug)                         |      Status:  assigned
 Priority:  normal                               |   Milestone:  Future
                                                 |  Release
Component:  Media                                |     Version:  4.3.1
 Severity:  normal                               |  Resolution:
 Keywords:  has-patch needs-unit-tests has-      |     Focuses:
  test-info                                      |
-------------------------------------------------+-------------------------
Changes (by SirLouen):

 * keywords:  has-patch needs-testing => has-patch needs-unit-tests has-
     test-info


Comment:

 == Test Report
 === Description
 ✅ This report validates that the indicated patch works as expected.

 I've had a good time trying to understand this issue with almost
 everything broken in the report.

 The conclusion for a layman tester is:
 1. The hook `image_size_names_choose` is only meant to limit certain sizes
 in the editor, but not JS-wide(*)
 2. After using the hook, the images that have been restricted can't be
 used JS-wide
 3. A patch aims to "unlock" all the images JS-wide, as it's supposed to
 be.
 (*) When I say "JS-wide" I mean in places like the JavaScript generated
 grids of Media Galleries.

 Patch tested: https://github.com/WordPress/wordpress-
 develop/pull/9119.diff

 === Setup Instructions

 1. Add the code like a plugin, both the PHP and the JS, put both in the
 same file, as any other regular plugin
 2. Be wary that the provided JS is not working any more (at least not for
 me). Here is a modified working version of the JS:

 {{{
 ( function( $, wp ) {
     $( function()  {
                 var attachments = wp.media.query( { order: 'DESC',
 orderby: 'date', type: 'image', posts_per_page: 1 } );
                 attachments.more().then( function() {
             var image = attachments.first();
             console.log( 'Sizes:', image.get( 'sizes' ) );
                 } );
      } );
 } )(
     jQuery,
     window.wp = window.wp || {}
 );
 }}}

 3. Enable the plugin
 4. After enabling the plugin, add a couple of big images (say >2Mb
 images), 10 or so would be ok. You can basically upload the same over and
 over again.

 === Expected Results Before the Patch

 1. Adding the hook provided, we are limiting uploads to large and full.
 2. In the media grid, check the HTML code of any of the thumbnails. You
 will notice that all the thumbnails are picking the large image, which
 according to the reporter, it may cause performance issues (although large
 files are around 250kb and they are paginated), so I'm not sure how much
 of a performance issue this may provoke, but ultimate is something wrong.
 I wondered if maybe there were not paginated in the past, and it tried to
 load like 1K large images?
 3. If you add an image in a Post, you will see that only Large and Full
 are the only two sizes enabled to use (this is expected because we are
 using the hook).
 4. If you added my JS code, you will see something like this before the
 patch in the Browser Console:

 {{{
 {
     "large": {
         "height": 438,
         "width": 660,
         "url": "http://localhost:8889/wp-
 content/uploads/2025/06/repeat_10-2-1024x680.jpg",
         "orientation": "landscape"
     },
     "full": {
         "url": "http://localhost:8889/wp-
 content/uploads/2025/06/repeat_10-2-scaled.jpg",
         "height": 1700,
         "width": 2560,
         "orientation": "landscape"
     }
 }
 }}}

 5. 🐞 All the image sizes are missing!!

 === Expected Results After the patch

 - ✅ Issue is solved after the patch

 This is what you might see in the JS Browser console if everything went
 well

 {{{
 {
     "medium": {
         "height": 199,
         "width": 300,
         "url": "http://localhost:8889/wp-
 content/uploads/2025/06/repeat_10-2-300x199.jpg",
         "orientation": "landscape"
     },
     "large": {
         "height": 438,
         "width": 660,
         "url": "http://localhost:8889/wp-
 content/uploads/2025/06/repeat_10-2-1024x680.jpg",
         "orientation": "landscape"
     },
     "thumbnail": {
         "height": 150,
         "width": 150,
         "url": "http://localhost:8889/wp-
 content/uploads/2025/06/repeat_10-2-150x150.jpg",
         "orientation": "landscape"
     },
     "medium_large": {
         "height": 438,
         "width": 660,
         "url": "http://localhost:8889/wp-
 content/uploads/2025/06/repeat_10-2-768x510.jpg",
         "orientation": "landscape"
     },
     "1536x1536": {
         "height": 438,
         "width": 660,
         "url": "http://localhost:8889/wp-
 content/uploads/2025/06/repeat_10-2-1536x1020.jpg",
         "orientation": "landscape"
     },
     "2048x2048": {
         "height": 438,
         "width": 660,
         "url": "http://localhost:8889/wp-
 content/uploads/2025/06/repeat_10-2-2048x1360.jpg",
         "orientation": "landscape"
     },
     "post-thumbnail": {
         "height": 408,
         "width": 660,
         "url": "http://localhost:8889/wp-
 content/uploads/2025/06/repeat_10-2-825x510.jpg",
         "orientation": "landscape"
     },
     "full": {
         "url": "http://localhost:8889/wp-
 content/uploads/2025/06/repeat_10-2-scaled.jpg",
         "height": 1700,
         "width": 2560,
         "orientation": "landscape"
     }
 }
 }}}

 === Additional Notes

 - I believe that some Unit Tests are required to pass. Wondering why this
 report got abandoned.

 cc @joemcgill

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/34981#comment:22>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform