[Block Editor - Inserter]: preload media categories empty client side

WordPress · Jan 27, 2023 · c7f761b · c7f761b
1 parent 7b8b687
commit c7f761b
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 24 deletions.
diff --git a/lib/compat/wordpress-6.2/edit-form-blocks.php b/lib/compat/wordpress-6.2/edit-form-blocks.php
diff --git a/lib/load.php b/lib/load.php
@@ -84,7 +84,6 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.2/block-template-utils.php';
 require __DIR__ . '/compat/wordpress-6.2/get-global-styles-and-settings.php';
 require __DIR__ . '/compat/wordpress-6.2/default-filters.php';
-require __DIR__ . '/compat/wordpress-6.2/edit-form-blocks.php';
 require __DIR__ . '/compat/wordpress-6.2/site-editor.php';
 require __DIR__ . '/compat/wordpress-6.2/block-editor.php';
 require __DIR__ . '/compat/wordpress-6.2/block-editor-settings.php';

diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
@@ -32,6 +32,7 @@ import BlockListAppender from '../block-list-appender';
 import { useInBetweenInserter } from './use-in-between-inserter';
 import { store as blockEditorStore } from '../../store';
 import { usePreParsePatterns } from '../../utils/pre-parse-patterns';
+import { useCheckEmptyMediaCategories } from '../inserter/media-tab/hooks';
 import { LayoutProvider, defaultLayout } from './layout';
 import BlockToolsBackCompat from '../block-tools/back-compat';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
@@ -126,6 +127,9 @@ function Root( { className, ...settings } ) {
 
 export default function BlockList( settings ) {
 	usePreParsePatterns();
+	// We need to check if there is at least one item for each media category before
+	// opening the inserter, in order to avoid late rendering of the media tab.
+	useCheckEmptyMediaCategories();
 	return (
 		<BlockToolsBackCompat>
 			<BlockEditContextProvider value={ DEFAULT_BLOCK_EDIT_CONTEXT }>

diff --git a/packages/block-editor/src/components/inserter/media-tab/hooks.js b/packages/block-editor/src/components/inserter/media-tab/hooks.js
@@ -189,3 +189,24 @@ export function useMediaCategories( rootClientId ) {
 	] );
 	return categories;
 }
+
+export function useCheckEmptyMediaCategories() {
+	const isPreviewMode = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings().__unstableIsPreviewMode,
+		[]
+	);
+	const inserterMediaCategories = useInserterMediaCategories();
+	useEffect( () => {
+		if ( isPreviewMode || ! inserterMediaCategories ) {
+			return;
+		}
+		// Loop through categories to check if they have at least one media item.
+		inserterMediaCategories.forEach( ( category ) => {
+			// Some sources are external and we don't need to make a request.
+			if ( ! category.isExternalResource ) {
+				category.fetch( { per_page: 1 } );
+			}
+		} );
+	}, [ isPreviewMode, inserterMediaCategories ] );
+}