[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 ] );
+}