Skip to content

feat: Handle remote editor load failure #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dcalhoun merged 6 commits into from
Oct 21, 2024
Merged

feat: Handle remote editor load failure #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
820e951
feat: Handle remote editor load failure
dcalhoun Sep 24, 2024
88307ee
feat: Allow retrying remote editor load
dcalhoun Sep 24, 2024
cddd6a3
feat: Update editor load notice message
dcalhoun Sep 24, 2024
563450b
refactor: Reduce `useEditorLoadNotice` API surface area
dcalhoun Sep 24, 2024
44a4d2a
task: Capture build results
dcalhoun Sep 25, 2024
cfc1273
task: Capture build output
dcalhoun Oct 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion Demo-Android/Gutenberg/src/main/assets/assets/remote-hV9R00EW.css
View file
Open in desktop

This file was deleted.

8 changes: 7 additions & 1 deletion ReactApp/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,15 @@
* Internal dependencies
*/
import Editor from './components/Editor';
import EditorLoadNotice from './components/EditorLoadNotice';

function App(props) {
return <Editor {...props} />;
return (
<>
<EditorLoadNotice />
<Editor {...props} />
</>
);
}

export default App;
70 changes: 70 additions & 0 deletions ReactApp/src/components/EditorLoadNotice.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
/**
* WordPress dependencies
*/
import { Notice } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useState, useEffect } from '@wordpress/element';

export default function EditorLoadNotice() {
const { notice, clearNotice } = useEditorLoadNotice();

const actions = [
{
label: 'Retry',
onClick: () => (window.location.href = 'remote.html'),
variant: 'primary',
},
{
label: 'Dismiss',
onClick: clearNotice,
variant: 'secondary',
},
];

if (!notice) {
return null;
}

return (
<div className="editor-load-notice">
<Notice actions={actions} status="warning" isDismissible={false}>
{notice}
</Notice>
</div>
);
}

function useEditorLoadNotice() {
const [notice, setNotice] = useState(null);

useEffect(() => {
const url = new URL(window.location.href);
const error = url.searchParams.get('error');

let message = null;
switch (error) {
case REMOTE_EDITOR_LOAD_ERROR:
message = __(
"Oops! We couldn't load your site's editor and plugins. Don't worry, you can use the default editor for now."
);
break;
default:
message = null;
}

setNotice(message);
}, []);

useEffect(() => {
if (notice) {
const timeout = setTimeout(() => {
setNotice(null);
}, 20000);
return () => clearTimeout(timeout);
}
}, [notice]);

return { notice, clearNotice: () => setNotice(null) };
}

const REMOTE_EDITOR_LOAD_ERROR = 'remote_editor_load_error';
8 changes: 8 additions & 0 deletions ReactApp/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,14 @@ h4 {
display: none;
}

.editor-load-notice {
position: fixed;
bottom: 62px;
left: 16px;
right: 16px;
z-index: 999;
}

/* Toolbar */

.gbkit-editor-toolbar {
Expand Down
5 changes: 4 additions & 1 deletion ReactApp/src/remote.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,10 @@ async function initalizeRemoteEditor() {
createElement(StrictMode, null, createElement(App, settings))
);
} catch (error) {
console.error('Error initializing the remote editor', error);
// 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=remote_editor_load_error';
}
}

Expand Down
1 change: 0 additions & 1 deletion Sources/GutenbergKit/Gutenberg/assets/App-C-YJyckR.js
View file
Open in desktop

This file was deleted.

Loading