[Inserter]: Fix reset of registered media categories

docs/reference-guides/data/data-core-block-editor.md

@@ -713,6 +713,18 @@ _Returns_
 
 -   `?string`: Adjacent block's client ID, or null if none exists.
 
+### getRegisteredInserterMediaCategories
+
+Returns the registered inserter media categories through the public API.
+
+_Parameters_
+
+-   _state_ `Object`: Editor state.
+
+_Returns_
+
+-   `InserterMediaCategory[]`: Inserter media categories.
+
 ### getSelectedBlock
 
 Returns the currently selected block, or null if there is no selected block.

packages/block-editor/src/components/inserter/media-tab/hooks.js

@@ -9,8 +9,8 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as blockEditorStore } from '../../../store';
 
-/** @typedef {import('./api').InserterMediaRequest} InserterMediaRequest */
-/** @typedef {import('./api').InserterMediaItem} InserterMediaItem */
+/** @typedef {import('../../../store/actions').InserterMediaRequest} InserterMediaRequest */
+/** @typedef {import('../../../store/actions').InserterMediaItem} InserterMediaItem */
 
 /**
  * Fetches media items based on the provided category.
@@ -55,22 +55,40 @@ function useInserterMediaCategories() {
 		inserterMediaCategories,
 		allowedMimeTypes,
 		enableOpenverseMediaCategory,
+		registeredInserterMediaCategories,
 	} = useSelect( ( select ) => {
-		const settings = select( blockEditorStore ).getSettings();
+		const { getSettings, getRegisteredInserterMediaCategories } =
+			select( blockEditorStore );
+		const settings = getSettings();
 		return {
 			inserterMediaCategories: settings.inserterMediaCategories,
 			allowedMimeTypes: settings.allowedMimeTypes,
 			enableOpenverseMediaCategory: settings.enableOpenverseMediaCategory,
+			registeredInserterMediaCategories:
+				getRegisteredInserterMediaCategories(),
 		};
 	}, [] );
 	// The allowed `mime_types` can be altered by `upload_mimes` filter and restrict
 	// some of them. In this case we shouldn't add the category to the available media
 	// categories list in the inserter.
 	const allowedCategories = useMemo( () => {
-		if ( ! inserterMediaCategories || ! allowedMimeTypes ) {
+		if (
+			( ! inserterMediaCategories &&
+				! registeredInserterMediaCategories.length ) ||
+			! allowedMimeTypes
+		) {
 			return;
 		}
-		return inserterMediaCategories.filter( ( category ) => {
+		const coreInserterMediaCategoriesNames =
+			inserterMediaCategories?.map( ( { name } ) => name ) || [];
+		const mergedCategories = [
+			...( inserterMediaCategories || [] ),
+			...( registeredInserterMediaCategories || [] ).filter(
+				( { name } ) =>
+					! coreInserterMediaCategoriesNames.includes( name )
+			),
+		];
+		return mergedCategories.filter( ( category ) => {
 			// Check if Openverse category is enabled.
 			if (
 				! enableOpenverseMediaCategory &&
@@ -84,6 +102,7 @@ function useInserterMediaCategories() {
 		} );
 	}, [
 		inserterMediaCategories,
+		registeredInserterMediaCategories,
 		allowedMimeTypes,
 		enableOpenverseMediaCategory,
 	] );

packages/block-editor/src/store/actions.js

@@ -1893,9 +1893,10 @@ export const registerInserterMediaCategory =
 			);
 			return;
 		}
-		const { inserterMediaCategories = [] } = select.getSettings();
+		const registeredInserterMediaCategories =
+			select.getRegisteredInserterMediaCategories();
 		if (
-			inserterMediaCategories.some(
+			registeredInserterMediaCategories.some(
 				( { name } ) => name === category.name
 			)
 		) {
@@ -1905,8 +1906,8 @@ export const registerInserterMediaCategory =
 			return;
 		}
 		if (
-			inserterMediaCategories.some(
-				( { labels: { name } } ) => name === category.labels?.name
+			registeredInserterMediaCategories.some(
+				( { labels: { name } = {} } ) => name === category.labels?.name
 			)
 		) {
 			console.error(
@@ -1919,13 +1920,8 @@ export const registerInserterMediaCategory =
 		// private, so extenders can only add new inserter media categories and don't have any
 		// control over the core media categories.
 		dispatch( {
-			type: 'UPDATE_SETTINGS',
-			settings: {
-				inserterMediaCategories: [
-					...inserterMediaCategories,
-					{ ...category, isExternalResource: true },
-				],
-			},
+			type: 'REGISTER_INSERTER_MEDIA_CATEGORY',
+			category: { ...category, isExternalResource: true },
 		} );
 	};
 

packages/block-editor/src/store/reducer.js

@@ -1949,6 +1949,22 @@ export function styleOverrides( state = new Map(), action ) {
 	return state;
 }
 
+/**
+ * Reducer returning a map of the registered inserter media categories.
+ *
+ * @param {Array}  state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Array} Updated state.
+ */
+export function registeredInserterMediaCategories( state = [], action ) {
+	switch ( action.type ) {
+		case 'REGISTER_INSERTER_MEDIA_CATEGORY':
+			return [ ...state, action.category ];
+	}
+	return state;
+}
+
 const combinedReducers = combineReducers( {
 	blocks,
 	isTyping,
@@ -1976,6 +1992,7 @@ const combinedReducers = combineReducers( {
 	removalPromptData,
 	blockRemovalRules,
 	openedBlockSettingsMenu,
+	registeredInserterMediaCategories,
 } );
 
 function withAutomaticChangeReset( reducer ) {

packages/block-editor/src/store/selectors.js

@@ -3022,3 +3022,15 @@ export const isGroupable = createRegistrySelector(
 			);
 		}
 );
+
+/** @typedef {import('./actions').InserterMediaCategory} InserterMediaCategory */
+/**
+ * Returns the registered inserter media categories through the public API.
+ *
+ * @param {Object} state Editor state.
+ *
+ * @return {InserterMediaCategory[]} Inserter media categories.
+ */
+export function getRegisteredInserterMediaCategories( state ) {
+	return state.registeredInserterMediaCategories;
+}

packages/block-editor/src/store/test/actions.js

@@ -1279,9 +1279,9 @@ describe( 'actions', () => {
 					fetch: () => {},
 				} )( {
 					select: {
-						getSettings: () => ( {
-							inserterMediaCategories: [ { name: 'a' } ],
-						} ),
+						getRegisteredInserterMediaCategories: () => [
+							{ name: 'a' },
+						],
 					},
 				} );
 				expect( console ).toHaveErroredWith(
@@ -1296,11 +1296,9 @@ describe( 'actions', () => {
 					fetch: () => {},
 				} )( {
 					select: {
-						getSettings: () => ( {
-							inserterMediaCategories: [
-								{ labels: { name: 'a' } },
-							],
-						} ),
+						getRegisteredInserterMediaCategories: () => [
+							{ labels: { name: 'a' } },
+						],
 					},
 				} );
 				expect( console ).toHaveErroredWith(
@@ -1321,18 +1319,14 @@ describe( 'actions', () => {
 			const dispatch = jest.fn();
 			registerInserterMediaCategory( category )( {
 				select: {
-					getSettings: () => ( { inserterMediaCategories } ),
+					getRegisteredInserterMediaCategories: () =>
+						inserterMediaCategories,
 				},
 				dispatch,
 			} );
 			expect( dispatch ).toHaveBeenLastCalledWith( {
-				type: 'UPDATE_SETTINGS',
-				settings: {
-					inserterMediaCategories: [
-						...inserterMediaCategories,
-						{ ...category, isExternalResource: true },
-					],
-				},
+				type: 'REGISTER_INSERTER_MEDIA_CATEGORY',
+				category: { ...category, isExternalResource: true },
 			} );
 		} );
 	} );