Gallery Block: Opening Media Library second time results in console error

[DarkMatter-999]

Description

When trying to open Media Library second time, it results in a console error.

The error is as follows:

media-views.js?ver=6.9-alpha-60093-src:1868 
Uncaught TypeError: Cannot read properties of undefined (reading 'className')
    at child.ready (media-views.js?ver=6.9-alpha-60093-src:1868:44)
    at triggerEvents (backbone.js?ver=1.6.0:334:57)
    at triggerApi (backbone.js?ver=1.6.0:322:19)
    at eventsApi (backbone.js?ver=1.6.0:110:16)
    at Events.trigger (backbone.js?ver=1.6.0:312:5)
    at wp.Backbone.Subviews.ready (wp-backbone.js?ver=6.9-alpha-60093-src:393:14)
    at underscore.js?ver=1.13.7:1456:47
    at map (underscore.js?ver=1.13.7:1354:24)
    at _$1.<anonymous> (underscore.js?ver=1.13.7:1447:12)
    at _$1.invoke (underscore.js?ver=1.13.7:76:29)

While researching, we found that it appears to be related to #62168.
When testing with other media blocks for the same behavior we found that the id (__wp-uploader-id-xx) remains unchanged if we dont update the gallery, due to which when opening again it cannot find the frame.

cc: @USERSATOSHI

Step-by-step reproduction instructions

1. Create a new post.
2. Add Gallery Block.
3. Click on Media Library button.
4. Close the Modal without selecting anything.
5. Click on Media Library button again.
6. Check the console for errors.

Screenshots, screen recording, code snippet

Screen.Recording.2025-09-10.at.4.40.47.PM.mov

Environment info

• WordPress: 6.9-alpha-60272
• PHP: 8.2.29
• Server: Apache/2.4.65 (Debian)
• Database: mysqli (Server: 11.8.3-MariaDB-ubu2404 / Client: mysqlnd 8.2.29)
• Browser: Chrome 138.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.3
• MU Plugins: None activated
• Plugins:
  • Gutenberg 21.6.0-rc.1

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[USERSATOSHI]

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

• WordPress: 6.9-alpha-60534
• PHP: 8.2.29
• Server: Apache/2.4.65 (Debian)
• Database: mysqli (Server: 11.8.3-MariaDB-ubu2404 / Client: mysqlnd 8.2.29)
• Browser: Chrome 139.0.0.0
• OS: macOS
• Theme: Twenty Twenty-One 2.6
• MU Plugins:
  • Gutenberg Test Plugin, Disable Login Autofocus
  • Gutenberg Test Plugin, Disable Remote Patterns
  • Gutenberg Test Plugin, Enable Templates UI
  • Gutenberg Test Plugin, No-cache Headers
  • Gutenberg Test Plugin, Normalize Theme
  • server-timing.php
• Plugins:
  • Gutenberg 21.5.0-rc.1
  • Test Reports 1.2.0

Actual Results

1. ✅ Error condition occurs (reproduced).

Additional Notes

• From the testing and debugging, we were able to pinpoint the issue which was that gallery block reuses the existing one if the gallery was not updated but it seems like using detach on this cases causes issues when trying to find the old frame.

A possible solution for this would be to either not detach when the gallery was not updated but instead just dispose it, but when the gallery is updated just use the normal detach.

if this solution seems good would love it help with that.

Supplemental Artifacts

Screen.Recording.2025-09-10.at.5.06.08.PM.mov

cc: @DarkMatter-999

[Mamaduka]

It seems the problem could be with the gallery frame code in the MediaUpload component, since the error doesn't happen for singular images.

[USERSATOSHI]

It seems the problem could be with the gallery frame code in the MediaUpload component, since the error doesn't happen for singular images.

On debugging, It was found that, since there is an optimization that uses the old frame for gallery when the gallery is not updated, the detach kind of breaks that.

From my understanding, either for this case, we need to use dispose() so that the element stays in the html such that it can be used again, or we need to remove the

if ( value === this.lastGalleryValue ) {
	return;
}

which would cause gallery block to create new uploader elements like other media elements.

cc: @Mamaduka

[DarkMatter-999]

From my understanding, either for this case, we need to use dispose() so that the element stays in the html such that it can be used again, or we need to remove the

I tried using the dispose() function instead of detach() only for gallery when its not updated but this causes event listeners to multiply each time its disposed.

gutenberg/packages/media-utils/src/components/media-upload/index.js

Lines 296 to 306 in 80237f7

	// If the value did not changed there is no need to rebuild the frame,
	// we can continue to use the existing one.
	if ( value === this.lastGalleryValue ) {
	return;
	}
	const { wp } = window;
	this.lastGalleryValue = value;

I think removing this optimization would the solve the problem, as currently in case of other media blocks we are creating a new uploader frame each time. I don't think there will me much overhead when creating a new gallery frame each time(like how it works in other blocks).

cc: @USERSATOSHI