Registered inserter media categories are reset

[mmtr]

Description

When registering new inserter media categories with dispatch( 'core/block-editor' ).registerInserterMediaCategory(), they are removed by the editor initialization.

Consider this snippet of code that is loaded by a plugin which registers an "Openverse 2" media category:

add_action( 'enqueue_block_editor_assets', function() {
	wp_add_inline_script( 'wp-editor', "
wp.domReady( function() {
	wp.data.dispatch( 'core/block-editor' ).registerInserterMediaCategory( {
		name: 'openverse-2',
		labels: {
			name: 'Openverse 2',
			search_items: 'Search Openverse',
		},
		mediaType: 'image',
		async fetch( query = {} ) {
			const defaultArgs = {
				mature: false,
				excluded_source: 'flickr,inaturalist,wikimedia',
				license: 'pdm,cc0',
			};
			const finalQuery = { ...query, ...defaultArgs };
			const mapFromInserterMediaRequest = {
				per_page: 'page_size',
				search: 'q',
			};
			const url = new URL( 'https://api.openverse.engineering/v1/images/' );
			Object.entries( finalQuery ).forEach( ( [ key, value ] ) => {
				const queryKey = mapFromInserterMediaRequest[ key ] || key;
				url.searchParams.set( queryKey, value );
			} );
			const response = await window.fetch( url, {
				headers: {
					'User-Agent': 'WordPress/inserter-media-fetch',
				},
			} );
			const jsonResponse = await response.json();
			const results = jsonResponse.results;
			return results.map( ( result ) => ( {
				...result,
				sourceId: result.id,
				id: undefined,
				caption: result.caption,
				previewUrl: result.thumbnail,
			} ) );
		},
		getReportUrl: ( { sourceId } ) =>
			'https://wordpress.org/openverse/image/' + sourceId + '/report/',
		isExternalResource: true,
	} );
	console.log( 'Registered inserter media categories', wp.data.select( 'core/block-editor' ).getSettings().inserterMediaCategories );
} );
	" );
} );

There is a console.log call at the end to confirm that indeed the media category has been registered.

However, it never shows up in the Media tab of the inserter menu because it has been replaced by the default categories (which can be confirmed by checking wp.data.select( 'core/block-editor' ).getSettings().inserterMediaCategories):

Seems that any category registered before the default categories are added here is completely ignored and removed, and they need to be registered afterwards.

The problem is that there isn't any straightforward way to know when it is safe to register new categories.

There are several ways to solve this:

• Ensure that previously registered categories remain registered after adding the default categories.
• Provide an API function (not a core/block-editor action) that guarantees that custom media categories are registered and remain registered.
• Provide a hook that is triggered when default categories have been registered and it's safe to register new categories.

cc @ntsekouras

Step-by-step reproduction instructions

• Add the code above to your testing site.
• Go to wp-admin/post-new.php.
• Open the browser JS console.
• Note how there is a message indicating that the "Openverse 2" category has been registered.
• Open the inserter menu.
• Activate the Media tab.
• Note how "Openverse 2" is missing.
• Execute wp.data.select( 'core/block-editor' ).getSettings().inserterMediaCategories in the browser JS console.
• Note how only the default categories are registered.

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

[ntsekouras]

Thanks for the issue! That's a tough one, as it's more about when can we dispatch actions or call API functions that rely on the initialization of the block editor store's settings.

I explored this for a while, but couldn't figure out a proper solution. I'll cc @WordPress/gutenberg-core if I've missed something or for any insights.

--edit

This seems to be more problematic than I initially thought, because every time this code runs the settings are reset. For example when we toggle the spotlight mode.