perf: Avoid unnecessary editor assets requests

src/utils/remote-editor.js

@@ -9,11 +9,16 @@ import apiFetch from '@wordpress/api-fetch';
 import { getGBKit } from './bridge';
 import { error } from './logger';
 
+/**
+ * Cache for editor assets to avoid unnecessary network requests
+ * @type {Object|null}
+ */
+let editorAssetsCache = null;
+
 /**
  * @typedef {Object} EditorAssetConfig
  *
  * @property {string[]} allowedBlockTypes Array of allowed block types provided by the API.
- * @property {Object}   wpDependencies    WordPress dependencies, empty when allowedPackages is provided.
  */
 
 /**
@@ -23,50 +28,34 @@ import { error } from './logger';
  * @param {Array}  [options.allowedPackages]    Array of allowed package names to load.
  * @param {Array}  [options.disallowedPackages] Array of disallowed package names to load.
  *
- * @return {EditorAssetConfig} Allowed block types and WordPress dependencies.
+ * @return {EditorAssetConfig} Editor configuration provided by the API.
  */
 export async function loadEditorAssets( {
 	allowedPackages = [],
 	disallowedPackages = [],
 } = {} ) {
 	try {
+		// Return cached response if available
+		if ( editorAssetsCache ) {
+			return processEditorAssets( editorAssetsCache, {
+				allowedPackages,
+				disallowedPackages,
+			} );
+		}
+
 		const { siteApiRoot, siteApiNamespace } = getGBKit();
 		// TODO: Load editor assets within the host app
-		const {
-			styles,
-			scripts,
-			allowed_block_types: allowedBlockTypes,
-		} = await apiFetch( {
+		const response = await apiFetch( {
 			url: `${ siteApiRoot }wpcom/v2/${ siteApiNamespace[ 0 ] }/editor-assets`,
 		} );
 
-		if ( allowedPackages.length > 0 ) {
-			// Only load allowed packages.
-			await loadAssets( [ ...styles, ...scripts ].join( '' ), {
-				allowedPackages,
-			} );
-
-			return {
-				allowedBlockTypes,
-				wpDependencies: {},
-			};
-		}
+		// Cache the response
+		editorAssetsCache = response;
 
-		await loadAssets( [ ...styles, ...scripts ].join( '' ), {
+		return processEditorAssets( response, {
+			allowedPackages,
 			disallowedPackages,
 		} );
-
-		return {
-			allowedBlockTypes,
-			wpDependencies: {
-				StrictMode: window.wp?.element?.StrictMode,
-				createRoot: window.wp?.element?.createRoot,
-				dispatch: window.wp?.data?.dispatch,
-				editorStore: window.wp?.editor?.store,
-				preferencesStore: window.wp?.preferences?.store,
-				registerCoreBlocks: window.wp?.blockLibrary?.registerCoreBlocks,
-			},
-		};
 	} catch ( err ) {
 		error( 'Error loading editor assets', err );
 		// Fallback to the local editor and display a notice. Because the remote
@@ -76,6 +65,40 @@ export async function loadEditorAssets( {
 	}
 }
 
+/**
+ * Process editor assets and return the configuration
+ *
+ * @param {Object}   assets                     The assets to process
+ * @param {string[]} assets.styles              Array of style assets
+ * @param {string[]} assets.scripts             Array of script assets
+ * @param {string[]} assets.allowedBlockTypes   Array of allowed block types
+ * @param {Object}   options                    Processing options
+ * @param {string[]} options.allowedPackages    Array of allowed package names
+ * @param {string[]} options.disallowedPackages Array of disallowed package names
+ *
+ * @return {EditorAssetConfig} Processed editor configuration
+ */
+async function processEditorAssets(
+	assets,
+	{ allowedPackages = [], disallowedPackages = [] } = {}
+) {
+	const { styles, scripts, allowed_block_types: allowedBlockTypes } = assets;
+
+	if ( allowedPackages.length > 0 ) {
+		await loadAssets( [ ...styles, ...scripts ].join( '' ), {
+			allowedPackages,
+		} );
+
+		return { allowedBlockTypes };
+	}
+
+	await loadAssets( [ ...styles, ...scripts ].join( '' ), {
+		disallowedPackages,
+	} );
+
+	return { allowedBlockTypes };
+}
+
 /**
  * Load the asset files for a block
  *