convert useInserterMediaCategories to selector and make private

WordPress · Oct 4, 2023 · 9ecb2ef · 9ecb2ef
1 parent 8dfdc8c
commit 9ecb2ef
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 85 deletions.
diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md
@@ -713,18 +713,6 @@ _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.

diff --git a/packages/block-editor/src/components/inserter/media-tab/hooks.js b/packages/block-editor/src/components/inserter/media-tab/hooks.js
@@ -1,13 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useState, useRef, useMemo } from '@wordpress/element';
+import { useEffect, useState, useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
 
 /** @typedef {import('../../../store/actions').InserterMediaRequest} InserterMediaRequest */
 /** @typedef {import('../../../store/actions').InserterMediaItem} InserterMediaItem */
@@ -50,67 +51,14 @@ export function useMediaResults( category, query = {} ) {
 	return { mediaList, isLoading };
 }
 
-function useInserterMediaCategories() {
-	const {
-		inserterMediaCategories,
-		allowedMimeTypes,
-		enableOpenverseMediaCategory,
-		registeredInserterMediaCategories,
-	} = useSelect( ( select ) => {
-		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 &&
-				! registeredInserterMediaCategories.length ) ||
-			! allowedMimeTypes
-		) {
-			return;
-		}
-		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 &&
-				category.name === 'openverse'
-			) {
-				return false;
-			}
-			return Object.values( allowedMimeTypes ).some( ( mimeType ) =>
-				mimeType.startsWith( `${ category.mediaType }/` )
-			);
-		} );
-	}, [
-		inserterMediaCategories,
-		registeredInserterMediaCategories,
-		allowedMimeTypes,
-		enableOpenverseMediaCategory,
-	] );
-	return allowedCategories;
-}
-
 export function useMediaCategories( rootClientId ) {
 	const [ categories, setCategories ] = useState( [] );
+
+	const inserterMediaCategories = useSelect(
+		( select ) =>
+			unlock( select( blockEditorStore ) ).getInserterMediaCategories(),
+		[]
+	);
 	const { canInsertImage, canInsertVideo, canInsertAudio } = useSelect(
 		( select ) => {
 			const { canInsertBlockType } = select( blockEditorStore );
@@ -131,7 +79,6 @@ export function useMediaCategories( rootClientId ) {
 		},
 		[ rootClientId ]
 	);
-	const inserterMediaCategories = useInserterMediaCategories();
 	useEffect( () => {
 		( async () => {
 			const _categories = [];

diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js
@@ -164,3 +164,75 @@ export function getOpenedBlockSettingsMenu( state ) {
 export function getStyleOverrides( state ) {
 	return state.styleOverrides;
 }
+
+/** @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;
+}
+
+/**
+ * Returns an array containing the allowed inserter media categories.
+ * It merges the registered media categories from extenders with the
+ * core ones. It also takes into account the allowed `mime_types`, which
+ * can be altered by `upload_mimes` filter and restrict some of them.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {InserterMediaCategory[]} Client IDs of descendants.
+ */
+export const getInserterMediaCategories = createSelector(
+	( state ) => {
+		const {
+			settings: {
+				inserterMediaCategories,
+				allowedMimeTypes,
+				enableOpenverseMediaCategory,
+			},
+			registeredInserterMediaCategories,
+		} = state;
+		// 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.
+		if (
+			( ! inserterMediaCategories &&
+				! registeredInserterMediaCategories.length ) ||
+			! allowedMimeTypes
+		) {
+			return;
+		}
+		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 &&
+				category.name === 'openverse'
+			) {
+				return false;
+			}
+			return Object.values( allowedMimeTypes ).some( ( mimeType ) =>
+				mimeType.startsWith( `${ category.mediaType }/` )
+			);
+		} );
+	},
+	( state ) => [
+		state.settings.inserterMediaCategories,
+		state.settings.allowedMimeTypes,
+		state.settings.enableOpenverseMediaCategory,
+		state.registeredInserterMediaCategories,
+	]
+);
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
@@ -3022,15 +3022,3 @@ 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;
-}