Problems with implementation of the Isolated Block Editor in a NextJS application #257
Comments
|
This ticket is based on the recommendation at #248 (comment) to open a new separate ticket. |
|
Have you tried to run your component in client only mode ? i'm trying something similar too, here is the code i've used so far : import {React} from 'react';
import { useState, useEffect } from 'react';
import '@automattic/isolated-block-editor/build-browser/core.css';
import '@automattic/isolated-block-editor/build-browser/isolated-block-editor.css';
import IsolatedBlockEditor, { EditorLoaded, DocumentSection, ToolbarSlot } from '@automattic/isolated-block-editor';
function App() {
return (
<>
<IsolatedBlockEditor
settings={ settings }
onSaveContent={ ( html ) => saveContent( html ) }
onLoad={ ( parse ) => loadInitialContent( parse ) }
onError={ () => document.location.reload() }
>
<EditorLoaded onLoaded={ () => {} } onLoading={ () => {} } />
<DocumentSection>Extra Information</DocumentSection>
<ToolbarSlot>
<button>Beep!</button>
</ToolbarSlot>
</IsolatedBlockEditor>
</>
)
}
export default App |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Context of my problem
I am trying to use the Gutenberg Block Editor within a React/NextJS-based application as a UI for a headless CMS. Here is a link to the repo that I used to create a very simplified version of our project. However, I couldn't get this to work.
To reproduce the problem in detail, please clone the repository and checkout the
install-isolated-block-editorbranch. Then follow the installation instruction as described in the/README.mdDetails about implementation
As the '@automattic/isolated-block-editor
does not have any package-lock.json (or its equivalent) the dependencies specified in thepackage.jsondo not get installed if the repo itself is used as a dependency. Thus I tried recreated the@automattic/isolated-block-editor/src/index.jsascrs1138/turborepo-nextjs-with-isolated-block-editor/packages/block-editor/IsolatedBlockEditor.tsxand installed all the dependencies imported in this file. This is then re-exported as a simple React component and used on the pagegbof theatlas-editor` web app. Once you have the local development server running you can access this page at http://localhost:3001/gb.Problem
Upon compilation of the http://localhost:3001/gb the following error is displayed.
Please, help me to get to understand what is the problem and provide a direction in what it could be resolved.
The full stack that can be found in the terminal:
The text was updated successfully, but these errors were encountered: