diff --git a/src/utils/remote-editor.js b/src/utils/remote-editor.js index 4ca56443..e3682e3e 100644 --- a/src/utils/remote-editor.js +++ b/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 *