wordpress-mobile · dcalhoun · Aug 25, 2025 · Aug 19, 2025 · Aug 19, 2025 · Aug 19, 2025
diff --git a/src/index.html b/src/index.html
@@ -10,7 +10,7 @@
 	</head>
 	<body class="gutenberg-kit wp-embed-responsive">
 		<div id="root" class="gutenberg-kit-root"></div>
-		<script type="module" src="/index.jsx"></script>
+		<script type="module" src="/index.js"></script>
 		<div
 			id="popover-fallback-container"
 			class="components-popover__fallback-container"

diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,7 @@
+/**
+ * Internal dependencies
+ */
+import { initializeBundledEditor } from './utils/bundled-editor';
+import './index.scss';
+
+initializeBundledEditor();
diff --git a/src/index.jsx b/src/index.jsx
diff --git a/src/remote.html b/src/remote.html
@@ -10,7 +10,7 @@
 	</head>
 	<body class="gutenberg-kit wp-embed-responsive">
 		<div id="root" class="gutenberg-kit-root"></div>
-		<script type="module" src="/remote.jsx"></script>
+		<script type="module" src="/remote.js"></script>
 		<div
 			id="popover-fallback-container"
 			class="components-popover__fallback-container"

diff --git a/src/remote.js b/src/remote.js
@@ -0,0 +1,7 @@
+/**
+ * Internal dependencies
+ */
+import { initializeRemoteEditor } from './utils/remote-editor';
+import './index.scss';
+
+initializeRemoteEditor();
diff --git a/src/remote.jsx b/src/remote.jsx
diff --git a/src/utils/bundled-editor.jsx b/src/utils/bundled-editor.jsx
@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { createRoot, StrictMode } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { initializeApiFetch } from './api-fetch';
+import { awaitGBKitGlobal, editorLoaded } from './bridge';
+import { configureLocale } from './localization';
+import EditorLoadError from '../components/editor-load-error';
+import { error } from './logger';
+import './editor-styles.js';
+
+/**
+ * Initialize the bundled editor by loading assets and configuring modules
+ * in the correct sequence.
+ *
+ * @return {Promise} Promise that resolves when initialization is complete
+ */
+export function initializeBundledEditor() {
+	// Rely upon promises rather than async/await to avoid timeouts caused by
+	// circular dependencies. Addressing the circular dependencies is quite
+	// challenging due to Vite's preload helpers and bugs in `manualChunks`
+	// configuration.
+	//
+	// See:
+	// - https://github.com/vitejs/vite/issues/18551
+	// - https://github.com/vitejs/vite/issues/13952
+	// - https://github.com/vitejs/vite/issues/5189#issuecomment-2175410148
+	return awaitGBKitGlobal()
+		.then( initializeApiAndLocale )
+		.then( importEditor )
+		.then( initializeEditor )
+		.catch( handleError );
+}
+
+function initializeApiAndLocale() {
+	initializeApiFetch();
+	return configureLocale();
+}
+
+function importEditor() {
+	return import( './editor' );
+}
+
+function initializeEditor( editorModule ) {
+	const { initializeEditor: _initializeEditor } = editorModule;
+	_initializeEditor();
+}
+
+function handleError( err ) {
+	error( 'Error initializing editor', err );
+	const root = document.getElementById( 'root' );
+	createRoot( root ).render(
+		<StrictMode>
+			<EditorLoadError error={ err } />
+		</StrictMode>
+	);
+	editorLoaded();
+}
diff --git a/src/utils/remote-editor.js → src/utils/editor-loader.js b/src/utils/remote-editor.js → src/utils/editor-loader.js
diff --git a/src/utils/editor-styles.js b/src/utils/editor-styles.js
@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+// Default styles that are needed for the editor.
+import '@wordpress/components/build-style/style.css';
+import '@wordpress/block-editor/build-style/style.css';
+// Default styles that are needed for the core blocks.
+import '@wordpress/block-library/build-style/style.css';
+import '@wordpress/block-library/build-style/editor.css';
+import '@wordpress/block-library/build-style/theme.css';
+import '@wordpress/format-library/build-style/style.css';
+import '@wordpress/block-editor/build-style/content.css';
+import '@wordpress/editor/build-style/style.css';
diff --git a/src/utils/remote-editor.jsx b/src/utils/remote-editor.jsx
@@ -0,0 +1,94 @@
+/**
+ * Internal dependencies
+ */
+import { awaitGBKitGlobal } from './bridge';
+import { loadEditorAssets } from './editor-loader';
+import { initializeVideoPressAjaxBridge } from './videopress-bridge';
+import { error, warn } from './logger';
+import { isDevMode } from './dev-mode';
+import './editor-styles.js';
+
+const I18N_PACKAGES = [ 'i18n', 'hooks' ];
+const API_FETCH_PACKAGES = [ 'api-fetch', 'url' ];
+
+/**
+ * Initialize the remote editor by loading assets and configuring modules
+ * in the correct sequence.
+ *
+ * @return {Promise} Promise that resolves when initialization is complete
+ */
+export function initializeRemoteEditor() {
+	// Rely upon promises rather than async/await to avoid timeouts caused by
+	// circular dependencies. Addressing the circular dependencies is quite
+	// challenging due to Vite's preload helpers and bugs in `manualChunks`
+	// configuration.
+	//
+	// See:
+	// - https://github.com/vitejs/vite/issues/18551
+	// - https://github.com/vitejs/vite/issues/13952
+	// - https://github.com/vitejs/vite/issues/5189#issuecomment-2175410148
+	return awaitGBKitGlobal()
+		.then( initializeApiAndLoadI18n )
+		.then( importL10n )
+		.then( configureLocale ) // Configure locale before loading modules with strings
+		.then( loadApiFetch )
+		.then( initializeApiFetch ) // Configure API fetch before loading remaining modules
+		.then( loadRemainingAssets )
+		.then( initializeEditor )
+		.catch( handleError );
+}
+
+function initializeApiAndLoadI18n() {
+	return loadEditorAssets( { allowedPackages: I18N_PACKAGES } );
+}
+
+function importL10n() {
+	return import( './localization' );
+}
+
+function configureLocale( localeModule ) {
+	const { configureLocale: _configureLocale } = localeModule;
+	return _configureLocale();
+}
+
+function loadApiFetch() {
+	return loadEditorAssets( { allowedPackages: API_FETCH_PACKAGES } );
+}
+
+function loadRemainingAssets() {
+	return loadEditorAssets( {
+		disallowedPackages: [ ...I18N_PACKAGES, ...API_FETCH_PACKAGES ],
+	} );
+}
+
+function initializeApiFetch( assetsResult ) {
+	return import( './api-fetch' ).then(
+		( { initializeApiFetch: _initializeApiFetch } ) => {
+			_initializeApiFetch();
+			return assetsResult;
+		}
+	);
+}
+
+function initializeEditor( assetsResult ) {
+	initializeVideoPressAjaxBridge();
+
+	const { allowedBlockTypes } = assetsResult;
+	return import( './editor' ).then(
+		( { initializeEditor: _initializeEditor } ) => {
+			_initializeEditor( { allowedBlockTypes } );
+		}
+	);
+}
+
+function handleError( err ) {
+	error( 'Error initializing editor', err );
+	if ( isDevMode() ) {
+		warn( 'Dev mode disabled automatic redirect to the local editor.' );
+	} else {
+		// Fallback to the local editor and display a notice. Because the remote
+		// editor loading failed, it is more practical to rely upon the local
+		// editor's scripts and styles for displaying the notice.
+		window.location.href = 'index.html?error=gbkit_global_unavailable';
+	}
+}